Macam-Macam Nilai Warna Dasar CSS

Ada beberapa properti CSS untuk mengatur warna pada elemen, seperti:

• color, untuk mengatur warna teks.
• background-color, untuk mengatur warna background.

Properti-properti tersebut nilainya dapat berupa nama warna, kode hex, kode rgb, dsb. Di materi ini kita membahas beberapa macam-macam nilai warna tersebut, yaitu:

1. Nama warna
2. Kode Hex
3. Kode RGB
4. Kode HSL

1. Nama Warna

Nama warna adalah warna yang ditandai dengan namanya, misal warna merah namanya red, biru namanya blue, dsb. Namanya tidak sembarangan diterjemahkan saja, tapi ada daftar nama warna yang digunakan. Berikut beberapa di antaranya:

1. black
2. silver
3. gray
4. white
5. maroon
6. red
7. purple
8. fuchsia
9. green
10. lime
11. olive
12. yellow
13. navy
14. blue
15. teal
16. aqua

Dan masih banyak lagi, untuk lebih lengkapnya cek di daftar nama warna dokumentasi MDN.

Contoh penggunaan nama warna di CSS:

h1 {
    color: red;
}

p {
    color: aqua;
}

<h1>Apa Itu Browser?</h1>
<p>Browser adalah aplikasi untuk membuka website</p>

Hasilnya:

2. Kode Hex

Kode Hex adalah nilai warna yang dihasilkan dari kombinasi tiga warna dasar, merah (red), hijau (green) dan biru (blue) yang dituliskan dalam bilangan heksadesimal.

Bilangan heksadesimal adalah bilangan yang menggunakan 16 simbol, angka 0 - 9 dan huruf A - F.

Formatnya seperti ini:

#RRGGBB

Setiap warna dasar dapat bernilai 00 (0) - FF (255). Semakin tinggi nilai warna dasar tersebut, semakin dominan di warna yang dihasilkan.

Contoh:

• FF0000 akan menghasilkan warna merah , karena warna merahnya bernilai FF (255) paling tinggi, sedangkan hijau dan biru 00 (0).
• FFC0CB akan menghasilkan warna pink , warna merah dominan FF (255) dicampur dengan hijau C0 (192) dan biru CB (203).

Contoh penggunaan kode hex di CSS.

h1 {
    color: #FF0000; /* Merah */
}

p {
    color: #8A2BE2; /* Ungu */
}

<h1>Apa Itu Browser?</h1>
<p>Browser adalah aplikasi untuk membuka website</p>

Hasilnya:

Kalau ingin membuat warna hex sendiri, Anda bisa menggunakan tool ini: HTML Color Picker.

3. Kode RGB

Kode RGB adalah nilai warna yang dihasilkan dari kombinasi tiga warna dasar, merah (red), hijau (green), dan biru (blue). Setiap warna dasar dituliskan dalam angka 0 - 255.

Formatnya seperti ini:

rgb(red, green, blue)

Semakin tinggi nilai warna dasarnya, semakin dominan warna dasar tersebut pada warna yang dihasilkan. Contoh:

• rgb(0, 255, 0) akan menghasilkan warna hijau , karena warnanya hijau paling dominan (255), sedangkan merah dan biru (0).
• rgb(210, 105, 30) akan menghasilkan warna coklat , karena perpaduan warna merah yang paling dominan (210) dengan hijau yang lumayan (105) dan biru (30).

Contoh penggunaan kode RGB di CSS.

h1 {
    color: rgb(0, 255, 0); /* Hijau */
}

p {
    color: rgb(210, 105, 30); /* Coklat */
}

<h1>Apa Itu Browser?</h1>
<p>Browser adalah aplikasi untuk membuka website</p>

Hasilnya:

Kalau ingin membuat warna rgb sendiri, Anda bisa menggunakan tool ini: HTML Color Picker.

4. Kode HSL

Kode HSL adalah nilai warna yang dihasilkan dari kombinasi hue, saturation dan lightness.

Formatnya seperti ini:

hsl(hue, saturation, lightness)

• Hue adalah warna dasar yang ingin dihasilkan, nilainya angka 0 - 360, 0 berarti merah, 120 mulai warna hijau, 240 mulai warna biru, 360 kembali ke merah.
• Saturation adalah intensitas warna, nilainya 0% - 100%, 100% berarti intensitas warna penuh, 0% berarti warnanya semakin pudar.
• Lightness adalah kecerahan warna, nilainya 0% - 100%, 100% berarti warna sangat terang, 0% berarti warnanya sangat gelap.

Contoh:

• hsl(240, 100%, 50%) akan menghasilkan warna biru , karena hue-nya 240 (biru), intensitasnya penuh, dan kecerahannya normal.
• hsl(135, 60%, 55%) akan menghasilkan hijau lembut , karena hue-nya 135 (hijau), intensitasnya tidak terlalu penuh, dan kecerahannya normal sedikit terang.

Contoh penggunaan kode HSL di CSS

h1 {
    color: hsl(240, 100%, 50%); /* Biru */
}

p {
    color: hsl(135, 60%, 55%); /* Hijau Lembut */
}

<h1>Apa Itu Browser?</h1>
<p>Browser adalah aplikasi untuk membuka website</p>

Hasilnya:

Kalau ingin membuat warna hsl sendiri, Anda bisa menggunakan tool ini: HTML Color Picker.

Panduan Memililih Nilai Warna

Keempat nilai warna memiliki cara penulisan, kelebihan dan kekurangannya masing-masing. Berikut tabel perbandingannya: