Warna

The CSS Podcast - 006: Warna Bagian Satu

Warna adalah bagian penting dari situs mana pun dan di CSS ada banyak opsi untuk jenis, fungsi, dan perlakuan warna.

Bagaimana cara Anda menentukan jenis warna yang akan digunakan? Bagaimana cara membuat warna menjadi semi-transparan? Dalam pelajaran ini, Anda akan mempelajari opsi yang tersedia untuk membantu Anda membuat keputusan yang tepat bagi project dan tim.

CSS memiliki berbagai jenis data, seperti string dan angka. Warna adalah salah satu jenis ini dan menggunakan jenis lain, seperti angka untuk definisinya sendiri.

Warna numerik

Kemungkinan besar Anda pertama kali mengenal warna di CSS melalui warna numerik. Kita dapat menggunakan nilai warna numerik dalam beberapa bentuk.

Warna heksadesimal

h1 {
  color: #b71540;
}

Notasi heksadesimal (sering disingkat menjadi hex) adalah sintaksis singkat untuk RGB, yang menetapkan nilai numerik ke 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 akan diterjemahkan ke rentang numerik RGB yang berkisar antara 0-255 yang masing-masing 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 hex, Anda menambahkan dua digit lagi ke urutan enam digit, sehingga menjadi urutan delapan digit. Misalnya, untuk menetapkan 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 seperti yang Anda harapkan. Berikut beberapa nilai utama dan umum yang ditambahkan ke kode hex hitam, #000000:

  • Alfa 0%—yang sepenuhnya transparan—adalah 00: #00000000
  • Alfa 50% adalah 80: #00000080
  • Alfa 75% adalah BF: #000000BF

Untuk mengonversi hex dua digit menjadi desimal, ambil digit pertama dan kalikan dengan 16 (karena hex adalah basis 16), lalu tambahkan digit kedua. Menggunakan BF sebagai contoh untuk alfa 75%:

  1. B sama dengan 11, yang jika dikalikan dengan 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 berfungsi pada skala 0-255, sehingga 255 akan setara dengan 100%, dan 0 hingga 0%.

Untuk menetapkan hitam dalam RGB, tentukan sebagai rgb(0 0 0), yang merupakan 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%).

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 hitam alfa 50% di browser modern, tulis: rgb(0 0 0 / 50%) atau rgb(0 0 0 / 0.5). Untuk dukungan yang lebih luas, menggunakan fungsi rgba(), tulis: rgba(0, 0, 0, 50%) atau rgba(0, 0, 0, 0.5).

HSL (Hue, Saturation, Lightness)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL adalah singkatan dari hue, saturation, dan lightness. Hue menjelaskan nilai pada roda warna, dari 0 hingga 360 derajat, dimulai dengan merah (yaitu 0 dan 360). Hue 180, atau 50% akan berada dalam rentang biru. Ini adalah asal warna yang kita lihat.

Roda warna dengan label untuk nilai derajat dalam penambahan 60 derajat untuk membantu visual yang mewakili setiap nilai sudut

Saturasi adalah seberapa cerah hue yang dipilih. Warna yang sepenuhnya didesaturasi (dengan saturasi 0%) akan muncul dalam hitam putih. Terakhir, kecerahan adalah parameter yang menjelaskan skala dari putih ke hitam dari cahaya yang ditambahkan. Kecerahan 100% akan selalu memberi Anda warna putih.

Dengan menggunakan fungsi warna hsl(), Anda menentukan warna hitam sejati dengan menulis hsl(0 0% 0%), atau bahkan hsl(0deg 0% 0%). Hal ini karena parameter hue menentukan derajat pada lingkaran 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 yang diuraikan secara visual. Hue menggunakan roda warna. Saturasi menunjukkan perpaduan abu-abu menjadi hijau kebiruan. Kecerahan menunjukkan hitam menjadi putih.

Alfa ditentukan dalam hsl(), dengan cara yang 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 menetapkan 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 yang dinamai di CSS. Nama ini adalah nama bahasa Inggris biasa seperti ungu, tomat, dan goldenrod. Beberapa nama yang paling populer, menurut Web Almanac, adalah hitam, putih, merah, biru, dan abu-abu. Favorit kami meliputi goldenrod, aliceblue, dan hotpink.

Selain warna standar, ada juga kata kunci khusus yang tersedia:

  • transparent adalah warna yang sepenuhnya transparan. Ini juga merupakan nilai awal background-color
  • currentColor adalah nilai dinamis yang dihitung secara kontekstual dari properti color. Jika Anda memiliki warna teks red, lalu menetapkan border-color menjadi currentColor, warnanya juga akan menjadi merah. Jika elemen tempat Anda menentukan currentColor tidak memiliki nilai untuk color yang ditentukan, currentColor akan dihitung oleh cascade

Tempat menggunakan warna dalam aturan CSS

Jika properti CSS menerima jenis data <color> sebagai nilai, properti tersebut akan menerima salah satu metode ekspresi 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 Anda. Properti box-shadow juga menerima warna sebagai salah satu nilai.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang warna

Manakah dari berikut ini yang merupakan warna yang valid?

rbga(400 0 1)
rbga adalah kesalahan ketik dari rgba dan 400 lebih besar dari yang akan diterima, sehingga tidak valid.
#0f08
🎉
#OOFZ2
Ini bukan nilai heksadesimal, hanya 5 angka dan menyertakan Z, sehingga tidak valid.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Temukan 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 ke-2 dan ke-3 harus berupa persentase.
hsl(2rad 50% 50%)
Ini adalah nilai hsl yang valid.
hsl(0 0% 0% / 20%)
Ini adalah nilai hsl yang valid.

Resource