Podcast CSS - 006: Color Part One
Warna adalah bagian penting dari setiap situs, dan di CSS terdapat banyak opsi untuk jenis, fungsi, dan perlakuan warna.
Bagaimana Anda memutuskan jenis warna mana yang akan digunakan? Bagaimana cara membuat warna semi-transparan? Dalam pelajaran ini, Anda akan mempelajari opsi yang Anda miliki untuk membuat keputusan yang tepat untuk proyek dan tim Anda.
CSS memiliki berbagai jenis data, seperti string dan angka. Warna adalah salah satu dari jenis tersebut dan menggunakan jenis lain, seperti angka untuk definisinya sendiri.
Warna numerik
Sangat mungkin bahwa keterpaparan pertama Anda terhadap warna dalam CSS adalah melalui warna numerik. Kita dapat bekerja dengan nilai warna numerik dalam beberapa bentuk yang berbeda.
Warna heksadesimal
h1 {
color: #b71540;
}
Notasi heksadesimal (sering disingkat menjadi heksadesimal) adalah sintaksis singkat untuk RGB, yang menetapkan nilai numerik menjadi merah hijau dan biru, yang merupakan tiga warna primer.
Rentang heksadesimal adalah 0-9 dan A-F. Jika digunakan dalam urutan enam digit, nilai tersebut diterjemahkan ke rentang numerik RGB yaitu 0-255 yang sesuai dengan saluran warna merah, hijau, dan biru.
Anda juga dapat menentukan nilai alfa dengan warna numerik.
Nilai alfa adalah persentase transparansi.
Dalam kode {i>hex<i}, Anda menambahkan dua digit lagi ke urutan enam digit,
membuat urutan delapan digit.
Misalnya, untuk menetapkan warna hitam dalam kode heksadesimal, tulis #000000
.
Untuk menambahkan transparansi 50%, ubah menjadi #00000080
.
Karena skala heksadesimal adalah 0-9 dan A-F, nilai transparansi mungkin tidak sesuai dengan yang Anda harapkan.
Berikut adalah beberapa kunci, nilai umum yang ditambahkan ke kode heksadesimal hitam, #000000
:
- 0% alfa—yang sepenuhnya transparan—adalah 00:
#00000000
- 50% alfa adalah 80:
#00000080
- 75% alfa adalah BF:
#000000BF
Untuk mengonversi heksadesimal dua digit menjadi desimal, ambil digit pertama dan kalikan dengan 16 (karena heksadesimal adalah basis 16), lalu tambahkan digit kedua. Menggunakan BF sebagai contoh untuk 75% alfa:
- B sama dengan 11, yang jika dikalikan 16 sama dengan 176
- F sama dengan 15
- 176 + 15 = 191
- Nilai alfa adalah 191—75% dari 255
RGB (Merah, Hijau, Biru)
h1 {
color: rgb(183, 21, 64);
}
Warna RGB ditentukan dengan
fungsi warna rgb()
,
menggunakan angka atau persentase sebagai parameter.
Angka harus berada dalam rentang 0-255 dan persentasenya antara 0% dan 100%.
RGB bekerja pada skala 0-255,
jadi 255 akan setara dengan 100%, dan 0 hingga 0%.
Untuk menetapkan warna hitam dalam RGB, tentukan sebagai rgb(0 0 0)
,
yang bernilai nol merah, nol hijau, dan nol biru.
Hitam juga dapat ditentukan sebagai rgb(0%, 0%, 0%)
.
Warna putih adalah kebalikannya: rgb(255, 255, 255)
atau rgb(100%, 100%, 100%)
.
Versi alfa ditetapkan di rgb()
dengan salah satu dari dua cara.
Tambahkan /
setelah parameter merah, hijau, dan biru,
atau gunakan fungsi rgba()
.
Alfa dapat ditentukan dengan persentase atau desimal antara 0 dan 1.
Misalnya, untuk menetapkan 50% alfa hitam di browser modern, tulis: rgb(0 0 0 / 50%)
atau rgb(0 0 0 / 0.5)
.
Untuk dukungan yang lebih luas, dengan menggunakan fungsi rgba()
, tulis: rgba(0, 0, 0, 50%)
atau rgba(0, 0, 0, 0.5)
.
HSL (Hue, Saturasi, Lightness)
h1 {
color: hsl(344, 79%, 40%);
}
HSL adalah singkatan dari {i>hue<i}, saturasi (saturasi) dan {i>lightness<i} (cahaya). Hue menggambarkan nilai pada roda warna, dari 0 hingga 360 derajat, dimulai dengan merah (menjadi 0 dan 360). Rona 180, atau 50% akan berada di rentang biru. Itu adalah asal warna yang kita lihat.
Saturasi adalah seberapa cerah hue yang dipilih.
Warna terdesaturasi penuh (dengan saturasi 0%
) akan tampak hitam putih.
Dan terakhir, kecerahan adalah parameter yang mendeskripsikan skala dari putih ke hitam cahaya yang ditambahkan.
Tingkat kecerahan 100%
akan selalu memberi Anda warna putih.
Dengan menggunakan fungsi warna hsl()
,
Anda menentukan hitam pekat dengan menulis hsl(0 0% 0%)
, atau bahkan hsl(0deg 0% 0%)
.
Hal ini karena parameter hue menentukan derajat pada roda warna, yang jika Anda menggunakan jenis angka, adalah 0-360.
Anda juga dapat menggunakan jenis sudut, yaitu (0deg
) atau (0turn)
.
Saturasi dan kecerahan ditentukan dengan persentase.
Alfa ditentukan dalam hsl()
,
dengan cara yang sama seperti rgb()
dengan menambahkan /
setelah parameter hue, saturasi, dan kecerahan atau menggunakan
fungsi hsla()
.
Alfa dapat ditentukan dengan persentase atau desimal antara 0 dan 1.
Misalnya, untuk menetapkan 50% alfa hitam, gunakan: hsl(0 0% 0% / 50%)
atau hsl(0 0% 0% / 0.5)
.
Dengan menggunakan fungsi hsla()
, tulis: hsla(0, 0%, 0%, 50%)
atau hsla(0, 0%, 0%, 0.5)
.
Kata Kunci Berwarna
Ada 148 warna yang diberi nama di CSS. Nama tersebut adalah nama bahasa Inggris biasa seperti ungu, tomat, dan goldrod. Beberapa nama yang paling populer, menurut Web Almanac, adalah hitam, putih, merah, biru, dan abu-abu. Favorit kita antara lain Goldenrod, aliceblue, dan hotpink.
Selain warna standar, tersedia juga kata kunci khusus:
transparent
adalah warna yang sepenuhnya transparan. Nilai ini juga merupakan nilai awalbackground-color
currentColor
adalah nilai dinamis komputasi kontekstual dari properticolor
. Jika Anda memiliki warna teksred
, lalu menetapkanborder-color
menjadicurrentColor
, warna tersebut juga akan berwarna merah. Jika elemen tempat Anda menetapkancurrentColor
tidak memiliki nilai untukcolor
yang ditentukan,currentColor
akan dihitung oleh cascade sebagai gantinya
Tempat menggunakan warna dalam aturan CSS
Jika properti CSS menerima jenis data <color>
sebagai nilai, properti tersebut akan menerima salah satu metode untuk mengekspresikan warna di atas.
Untuk menata gaya teks, gunakan properti color
, text-shadow
, dan text-decoration-color
yang semuanya menerima warna sebagai nilai atau warna sebagai bagian dari nilai.
Untuk latar belakang, Anda dapat menyetel warna sebagai nilai untuk background
atau background-color
.
Warna juga dapat digunakan dalam gradien, seperti linear-gradient
.
Gradien adalah jenis gambar yang dapat ditentukan secara terprogram dalam CSS.
Gradien menerima dua warna atau lebih dalam kombinasi format warna apa pun, seperti hex, rgb, atau hsl.
Terakhir, border-color
, dan outline-color
menetapkan warna batas dan garis luar pada kotak Anda.
Properti box-shadow
juga menerima warna sebagai salah satu nilai.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang warna
Manakah dari berikut ini yang merupakan warna yang valid?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Menemukan warna hsl yang tidak valid.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)