Warna

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:

  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 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.

Roda warna dengan label untuk nilai derajat dalam kelipatan 60 derajat untuk membantu visual apa yang diwakili oleh setiap nilai sudut

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.

Fungsi warna HSL diuraikan secara visual. Rona menggunakan roda warna. Saturasi menunjukkan warna abu-abu yang bercampur menjadi hijau kebiruan. Tingkat kecerahannya menunjukkan warna hitam menjadi putih.

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 awal background-color
  • currentColor adalah nilai dinamis yang dihitung secara kontekstual dari properti color. Jika Anda memiliki warna teks red, lalu menyetel border-color menjadi currentColor, warna tersebut juga akan menjadi merah. Jika elemen yang Anda tentukan currentColor tidak memiliki nilai untuk color 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?

rbga(400 0 1)
{i>rbga<i} adalah kesalahan ketik dari rgba dan 400 lebih besar dari yang akan diterima, sehingga tidak valid.
#0f08
🎉
#OOFZ2
Ini bukan nilai {i>hex<i}, hanya berisi 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 seharusnya berupa persentase.
hsl(2rad 50% 50%)
Ini adalah nilai hsl yang valid.
hsl(0 0% 0% / 20%)
Ini adalah nilai hsl yang valid.

Resource