Bagaimana untuk menukar warna css

Transformasi Warna CSS

Dalam reka bentuk dan pembangunan web, warna merupakan elemen yang sangat penting. Saya percaya ramai orang telah menghadapi situasi berikut: Dalam draf reka bentuk, pereka bentuk memberikan nilai warna kegemaran, tetapi nilai warna ini tidak boleh digunakan secara langsung dalam CSS. Pada masa ini, kita perlu melakukan beberapa operasi penukaran warna untuk menukarnya kepada nilai warna CSS.

Di bawah, saya akan memperkenalkan kaedah penukaran warna biasa dan cara menggunakannya.

1. Penukaran RGB

RGB ialah salah satu format warna yang paling biasa. Dalam reka bentuk web, kami sering menggunakan format RGB heksadesimal untuk mewakili warna.

Dalam RGB, nilai warna bagi tiga warna utama merah, hijau dan biru ialah nombor antara 0 dan 255, mewakili keamatan cahaya warna yang berbeza.

Sebagai contoh, kami mewakili nilai RGB merah sebagai merah (255,0,0), hijau (0,255,0), biru (0,0,255).

Untuk menukar nilai warna RGB kepada CSS, kita perlu membahagikan nilai RGB dengan 255 dan kemudian memformatkannya ke dalam format RGB (merah, hijau, biru) dalam CSS. Seperti berikut:

rgb(255, 0, 0) /*红色*/
rgb(0, 255, 0) /*绿色*/
rgb(0, 0, 255) /*蓝色*/

2. Penukaran Hex

Satu lagi format warna biasa ialah perwakilan heksadesimal (Hex). Dalam tatatanda Hex, nilai warna diwakili menggunakan enam digit heksadesimal. Dalam CSS, gunakan simbol #.

Dalam tatatanda Hex, setiap nombor dua digit mewakili nilai kecerahan tiga warna utama merah, hijau dan biru. Nombor berkisar antara 00 hingga FF, mewakili nilai dari 0 hingga 255. Sebagai contoh, nilai Hex merah ialah #FF0000, nilai Hex hijau ialah #00FF00 dan nilai Hex biru ialah #0000FF.

Kaedah penukaran adalah sangat mudah, cuma keluarkan # dan enam digit perenambelasan dan nyatakannya dalam format RGB.

#FF0000 /*红色*/
#00FF00 /*绿色*/
#0000FF /*蓝色*/

3. Penukaran HSL

HSL ialah format warna yang sangat intuitif, yang merangkumi tiga parameter: warna, ketepuan dan kecerahan.

Nilai hue (hue) mewakili kedudukan warna pada plat warna, antara 0 hingga 360. Ketepuan mewakili kedalaman warna, antara 0% hingga 100%. Kecerahan (Lightness) mewakili kecerahan dan kegelapan warna, dan julat nilai juga dari 0% hingga 100%.

Kaedah penukaran juga sangat mudah, hanya gunakan format hsl (warna, tepu, kecerahan), seperti yang ditunjukkan di bawah:

hsl(0, 100%, 50%) /*红色*/
hsl(120, 100%, 50%) /*绿色*/
hsl(240, 100%, 50%) /*蓝色*/

4. Penukaran HSLA

HSLA ialah versi dipertingkatkan bagi format HSL, yang turut termasuk nilai ketelusan (alfa). Nilai ketelusan berjulat dari 0 hingga 1, dengan 0 mewakili telus sepenuhnya dan 1 mewakili legap sepenuhnya.

Kaedah penukaran adalah serupa dengan HSL, kecuali nilai ketelusan perlu ditambahkan pada penghujungnya, dinyatakan dalam format hsla (warna, tepu, kecerahan, alfa). Contohnya:

hsla(0, 100%, 50%, 0.5) /*半透明红色*/
hsla(120, 100%, 50%, 0.5) /*半透明绿色*/
hsla(240, 100%, 50%, 0.5) /*半透明蓝色*/

Ringkasan

Dalam reka bentuk dan pembangunan web, kita perlu menggunakan pelbagai format warna. Menguasai kemahiran penukaran warna ini bukan sahaja dapat meningkatkan kecekapan pembangunan dan mengurangkan kemungkinan ralat, tetapi juga memenuhi keperluan pereka dengan lebih baik.

Di atas adalah kaedah penukaran warna yang biasa digunakan saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk menukar warna css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!