Warna

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:

  1. B sama dengan 11, yang jika dikalikan 16 sama dengan 176
  2. F sama dengan 15
  3. 176 + 15 = 191
  4. 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.

Roda warna dengan label untuk nilai derajat dengan penambahan 60 derajat untuk membantu visual apa yang direpresentasikan oleh setiap nilai sudut

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.

Fungsi warna HSL dipecah secara visual. Hue menggunakan roda warna. Saturasinya menampilkan perpaduan abu-abu menjadi hijau kebiruan. Tingkat kecerahan akan menampilkan hitam menjadi putih.

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 awal background-color
  • currentColor adalah nilai dinamis komputasi kontekstual dari properti color. Jika Anda memiliki warna teks red, lalu menetapkan border-color menjadi currentColor, warna tersebut juga akan berwarna merah. Jika elemen tempat Anda menetapkan currentColor tidak memiliki nilai untuk color 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)
{i>rbga<i} adalah salah ketik dari rgba dan 400 lebih besar dari yang akan diterima, sehingga membuatnya tidak valid.
#0f08
🎉
#OOFZ2
Ini bukan nilai hex, hanya 5 angka dan termasuk Z, sehingga tidak valid.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Menemukan warna hsl yang tidak valid.

hsl(5, 0%, 90%)
Ini adalah nilai hsl yang valid.
hsl(.5turn 40% 60%)
Ini adalah nilai hsl yang valid.
hsl(0, 0, 0)
🎉 Anda menemukannya, nilai kedua dan ketiga seharusnya persentase.
hsl(2rad 50% 50%)
Ini adalah nilai hsl yang valid.
hsl(0 0% 0% / 20%)
Ini adalah nilai hsl yang valid.

Referensi