Podcast CSS - 006: Warna Bagian Satu
Warna adalah bagian penting dari situs web mana pun dan di CSS ada banyak pilihan untuk jenis, fungsi dan perlakuannya.
Bagaimana Anda memutuskan jenis warna yang akan digunakan? Bagaimana cara membuat warna semi-transparan? Dalam pelajaran ini, Anda akan belajar opsi mana yang Anda miliki untuk membantu Anda membuat keputusan yang tepat untuk proyek dan tim Anda.
CSS memiliki berbagai jenis data, seperti {i>string<i} dan angka. Warna adalah salah satu dari jenis ini dan menggunakan jenis lain, seperti angka untuk definisinya sendiri.
Warna numerik
Sangat mungkin bahwa eksposur pertama Anda terhadap warna di CSS adalah melalui warna numerik. Kita dapat menggunakan nilai warna numerik dalam beberapa bentuk yang berbeda.
Warna heksadesimal
h1 {
color: #b71540;
}
Notasi heksadesimal (sering disingkat menjadi heksa) adalah sintaks 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. Ketika digunakan dalam urutan enam digit, mereka diterjemahkan ke dalam rentang numerik RGB yaitu 0-255 yang sesuai dengan saluran warna merah, hijau, dan biru.
Anda juga dapat menentukan nilai alfa dengan warna numerik apa pun.
Nilai alfa adalah persentase transparansi.
Dalam kode {i>hex<i}, Anda menambahkan dua
digit lagi ke urutan enam digit,
dengan urutan delapan digit.
Misalnya, untuk menetapkan warna hitam dalam kode heksadesimal, tulis #000000
.
Untuk menambahkan transparansi sebesar 50%, ubah menjadi #00000080
.
Karena skala heksadesimal adalah 0-9 dan A-F, nilai transparansi mungkin tidak seperti yang Anda harapkan.
Berikut adalah beberapa nilai umum utama 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 mengubah {i>hex<i} dua digit menjadi desimal, ambil digit pertama dan kalikan dengan 16 (karena heksa adalah basis 16), kemudian 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 didefinisikan 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 menyetel hitam dalam RGB, tentukan sebagai rgb(0 0 0)
,
yaitu nol merah, nol hijau, dan nol biru.
Hitam juga dapat didefinisikan sebagai rgb(0%, 0%, 0%)
.
Putih adalah kebalikan dari: rgb(255, 255, 255)
atau rgb(100%, 100%, 100%)
.
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 menyetel hitam alfa 50% di browser modern, tulis: rgb(0 0 0 / 50%)
atau rgb(0 0 0 / 0.5)
.
Untuk mendapatkan dukungan yang lebih luas, gunakan fungsi rgba()
,
tulis: rgba(0, 0, 0, 50%)
atau rgba(0, 0, 0, 0.5)
.
HSL (Hue, Saturasi, Ringan)
h1 {
color: hsl(344, 79%, 40%);
}
HSL adalah singkatan dari hue, saturation, dan lightness. Hue menggambarkan nilai pada roda warna, dari 0 hingga 360 derajat, dimulai dengan warna merah (baik 0 dan 360). Hue 180, atau 50% akan berada dalam rentang biru. Ini adalah asal warna yang kita lihat.
Saturasi adalah seberapa terang rona yang dipilih.
Warna yang terdesaturasi sepenuhnya (dengan saturasi 0%
) akan muncul sebagai hitam putih.
Terakhir, kecerahan adalah parameter yang menjelaskan skala cahaya tambahan dari putih ke hitam.
Cahaya 100%
akan selalu menampilkan warna putih.
Menggunakan fungsi warna hsl()
,
Anda menentukan warna hitam yang sebenarnya dengan menulis hsl(0 0% 0%)
, atau bahkan hsl(0deg 0% 0%)
.
Hal ini karena parameter {i>hue<i} mendefinisikan
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()
,
sama seperti rgb()
dengan menambahkan /
setelah parameter hue, saturasi, dan kecerahan atau dengan menggunakan
fungsi hsla()
.
Alfa dapat ditentukan dengan persentase atau desimal antara 0 dan 1.
Misalnya, untuk menyetel hitam alfa 50%, 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 Warna
Ada 148 warna bernama di CSS. Ini adalah nama bahasa Inggris yang sederhana, seperti ungu, tomat, dan emasrod. Beberapa nama yang paling populer, menurut Web Almanac, adalah hitam, putih, merah, biru dan abu-abu. Favorit kami antara lain emasrod, aliceblue, dan hotpink.
Selain warna standar, ada juga kata kunci khusus yang tersedia:
transparent
adalah warna yang sepenuhnya transparan. Nilai ini juga merupakan nilai awalbackground-color
currentColor
adalah nilai dinamis yang dihitung secara kontekstual dari properticolor
. Jika Anda memiliki warna teksred
, lalu menyetelborder-color
menjadicurrentColor
, warna tersebut juga akan menjadi merah. Jika elemen yang Anda tentukancurrentColor
tidak memiliki nilai untukcolor
yang ditentukan, Sebagai gantinya,currentColor
akan dihitung dengan jenjang
Tempat menggunakan warna dalam aturan CSS
Jika properti CSS menerima
Jenis data <color>
sebagai nilai,
ia 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 menetapkan 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 di 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 untuk batas dan garis batas pada kotak.
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?
hotpink
#0f08
hsl(180deg 50% 50%)
rgb(255, 0, 0)
#OOFZ2
rbga(400 0 1)
Temukan warna hsl yang tidak valid.
hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)