6 Jenis Nilai Warna Pada CSS
Nilai Warna - Pada postingan sebelumnya kita sudah membahas mengenai property-property CSS yang nilainya berupa warna.
Seperti color dan background-color.
Pada postingan tersebut saya mencontohkan nilai warna dengan nama warnanya.
Pada CSS terdapat 6 jenis nilai warna termasuk nama warna tersebut.
Langsung saja berikut daftarnya.
Nama Warna
Jenis ini yang paling mudah digunakan, yaitu dengan menuliskan nama yang akan digunakan.
Contohnya, warna merah berarti red, biru blue, hijau green, dsb.
p {
color: red;
}
Ada sekitar 140 nama warna yang dapat digunakan pada CSS. Untuk daftar lengkapnya kunjungi tautan berikut.
Warna Heksadesimal
Heksadesimal adalah sistem bilangan yang menggunakan 16 simbol, angka 0 - 9 dan huruf A - F.
Heksadesimal dapat digunakan sebagai warna, dengan penulisannya menggunakan tanda pagar (#) sebelum kodenya.
Kode Heksadesimal dapat terdiri dari 6 atau 3 digit.
p {
background-color: #000;
color: #FF0000;
}
Tiap-tiap angka pada kode heksadesimal menentukan warna yang ditampilkan (#RRGGBB atau #RGB).
Anda dapat membuat warna heksadesimal dengan bantuan hex calculator.
Warna RGB
Warna RGB pada CSS dibuat dengan fungsi rgb() dengan tiga parameter berisi angkanya, red, green, blue.
Nilai angkanya dimulai dari angka 0 - 255.
p {
background-color: rgb(0, 0, 0);
color: rgb(255, 0, 0);
}
Anda dapat mencoba RGB calculator untuk membuat warna RGB.
Warna RGBA
Fungsi jenis ini sama seperti RGB, dengan penambahan parameter A yang berarti alpha, untuk mengatur transaparansi warna.
Nilai angkanya dimulai dari 0.1 - 1.0.
body {
background-color: rgba(255, 0, 0, 0.5);
}
Warna HSL
Warna HSL terdiri dari hue, saturation, dan lightness.
hsl(hue, saturation, lightness);
- Nilai hue dimulai dari 0 - 360.
- Nilai saturation dan lightness menggunakan persen dimulai dari 1 - 100.
Contoh.
body {
background-color: hsl(0, 100%, 50%);
}
Warna HSLA
Fungsi jenis ini sama seperti HSL, dengan penambahan parameter A yang berarti alpha, untuk mengatur transaparansi warna.
body {
background-color: hsla(0, 100%, 50%, 0.5);
}
Referensi
Saya sudah menyediakan referensi yang berisi penjelasan lengkap mengenai warna, mulai dari jenis warna, kalkulator warna, konverter warna, sampai psikologi warna. Berikut tautanya.