Warna

The CSS Podcast - 006: Warna Bagian Satu

Warna adalah bagian penting dari situs apa pun dan di CSS ada banyak opsi untuk menentukan dan memanipulasi 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.

Memilih warna

Warna yang diberi nama

Cara termudah untuk memilih warna adalah dengan memilih salah satu dari 148 warna bernama di CSS. Ini adalah nama dalam bahasa Inggris biasa seperti purple, tomato, dan goldenrod. Beberapa nama yang paling populer, menurut Web Almanac, adalah black, white, red, blue, dan gray. Favorit kami meliputi goldenrod, aliceblue, dan hotpink.

Warna numerik

Meskipun warna yang dinamai dapat memudahkan, Anda mungkin perlu menggunakan warna tertentu yang tidak tersedia dalam set tersebut. Anda dapat menentukan warna dengan nilai angka 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).

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.

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.

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

Warna definisi tinggi

RGB dan HSL menentukan warna dalam gamut sRGB. Monitor yang lebih baru mendukung lebih banyak warna daripada yang dapat dijelaskan oleh format ini, dan di luar gamut sRGB. Anda dapat memilih warna ini dengan berbagai fungsi CSS.

Fungsi color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

Fungsi color() CSS memungkinkan Anda memilih warna dalam ruang warna tertentu. Argumen pertama adalah ruang warna yang akan digunakan, yang menentukan opsi untuk saluran berikut. Seperti rgb(), Anda dapat menetapkan saluran alfa dengan menetapkan angka antara 0 dan 1, atau persentase, setelah /.

Misalnya, warna RGB merah gelap dalam cuplikan kode sebelumnya, yang ditentukan sebagai rgb(183 21 64), dapat ditentukan dengan persentase sebagai rgb(72% 8% 25%). Anda dapat menggunakan fungsi color() dengan kata kunci srgb untuk menentukan warna yang sama dengan color(srgb .72 .08 .25).

srgb menetapkan ruang warna dan memberi tahu kita bahwa tiga argumen berikutnya adalah merah, hijau, dan biru. Nilai bervariasi dari 0 hingga 1, bukan 0 hingga 255.

Serupa dengan rgb(), kita dapat menetapkan alfa dengan / dan persentase, atau desimal antara 0 dan 1.

Ada banyak ruang warna yang dapat Anda gunakan dengan fungsi color(), masing-masing dengan kekuatan dan kasus penggunaan yang berbeda.

Layar P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

Gamut Display P3 berisi 50% lebih banyak warna daripada sRGB. Anda dapat menentukan semua warna dalam gamut Display P3 dengan ruang warna Display P3 menggunakan fungsi color().

Untuk menetapkan hitam di Display P3, tentukan sebagai color(display-p3 0 0 0). Setelah menentukan ruang warna display-p3 untuk fungsi color(), Anda memiliki tiga saluran: Merah, hijau, dan biru, mirip dengan color(srgb). Namun, karena nilai saluran mewakili koordinat dalam ruang warna yang lebih luas, nilai saluran yang sama akan memiliki arti yang berbeda.

color(srgb 1 .5 0) adalah warna oranye yang setara dengan color(display-p3 0.93596 0.52724 0.1983). Kita dapat membuat warna oranye lebih terang dengan memperluasnya dari ruang sRGB, ke color(display-p3 1 .5 0).

Oklab

Oklab ditentukan dengan fungsi oklab(), dengan saluran Kecerahan, a, dan b. Hal ini berguna untuk membuat gradien yang halus dan menyesuaikan saturasi warna, sekaligus mempertahankan hue dan kecerahan.

h1 {
  color: oklab(75% 0.1 0.1)
}

Saluran kecerahan berkisar dari 0 ke 1 atau 0% ke 100%. Warna dengan kecerahan 0 akan selalu berwarna hitam.

Saluran a berlangsung dari -0.4 ke 0.4 atau 0% ke 100%. Nilai yang lebih rendah berwarna hijau, dan nilai yang lebih tinggi berwarna lebih merah.

Saluran b berlangsung dari -0.4 ke 0.4 atau 0% ke 100%. Nilai yang lebih rendah akan berwarna lebih biru, dan nilai yang lebih tinggi akan berwarna lebih kuning.

OkLCh

OkLCh adalah bentuk kutub atau silinder dari OKLab, dan ditentukan dengan saluran Kecerahan, Kroma, dan Hue. Hal ini berguna untuk menyesuaikan warna dengan cara yang seragam secara persepsi. Artinya, perubahan pada hue tidak akan memengaruhi tampilan warna yang terang atau jenuh.

h1 {
  color: oklch(80% 0.1 200)
}

Anda telah menggunakan kecerahan dan hue di HSL, dan kromatik mirip dengan saturasi. Anda dapat menetapkan hitam dengan oklch(0 0 0) dan putih dengan oklch(1 0 0).

Saluran kecerahan berkisar dari 0 ke 1 atau 0% ke 100%. Warna dengan kecerahan 0 akan selalu berwarna hitam.

Saluran kromatik menetapkan seberapa cerah warna—0 atau 0% akan didesaturasi, dan nilai yang lebih tinggi akan memiliki lebih banyak warna. Nilai 100% sama dengan .4, tetapi Anda dapat dengan cepat keluar dari gamut dengan nilai yang mendekati .4.

Hue ditentukan dalam derajat, seperti hsl().

OkLCh tidak dibatasi oleh gamut seperti Display P3, jadi Anda harus memastikan bahwa Anda membuat warna yang dapat ditampilkan. oklch(80% 50% 200) adalah biru cerah yang secara numerik terlihat seperti warna yang wajar, tetapi berada di luar gamut Display P3.

Ruang lainnya

Ada banyak cara untuk menentukan warna di CSS, dan Anda tidak perlu mempelajari semuanya. Format rgb() dan Hex biasanya digunakan dalam alat desain dan dalam kode yang ada, serta berguna untuk diketahui. Sebaiknya Anda juga memahami format yang dapat dimanipulasi secara dapat diprediksi. Anda dapat mengubah nilai hsl atau oklch secara langsung, dan mengetahui warna yang dihasilkan.

Baca selengkapnya di Mengakses lebih banyak warna dan ruang baru.

Warna sistem

Selain warna yang diberi nama seperti ungu atau hijau kebiruan, 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 red. Jika elemen tempat Anda menentukan currentColor tidak memiliki nilai untuk warna yang ditentukan, currentColor akan dihitung oleh cascade.

Memanipulasi warna

Meskipun Anda mungkin memiliki palet warna untuk digunakan di situs, Anda mungkin memerlukan varian warna tersebut untuk status pengarahan kursor, batas, dan elemen UI lainnya. Anda dapat menentukan setiap warna, tetapi CSS juga menyediakan cara untuk mengubah warna guna membuat varian ini.

color-mix()

Untuk menggunakan hasil pencampuran dua warna, Anda dapat menggunakan metode color-mix(). Hal ini berguna untuk mencampur warna dengan putih atau hitam untuk membuat varian yang lebih terang atau lebih gelap.

Untuk menggunakan color-mix(), Anda harus menentukan dua warna, cara Anda ingin warna tersebut dicampur (metode interpolasi), dan jumlah setiap warna yang Anda inginkan.

Untuk ruang warna yang memiliki hue, Anda juga dapat menentukan arah di roda warna yang ingin Anda tuju. Secara default, gunakan jalur shorter, tetapi Anda juga dapat memilih longer, atau increasing dan decreasing.

Ruang warna dan arahnya adalah metode interpolasi.

Anda juga dapat memberikan jumlah setiap warna yang akan dicampur.

Sintaksis warna relatif

Anda juga dapat bekerja lebih langsung dengan warna menggunakan sintaksis warna relatif, yang memungkinkan Anda mengambil warna apa pun, dan melakukan penghitungan pada warna tersebut untuk membuat warna baru.

h1 {
  color: oklch(from red l c h);
}

Menggunakan fungsi oklch() berarti Anda akan menggunakan saluran kecerahan, kromatik, dan hue. Setelah kata kunci from, Anda dapat menentukan warna apa pun dalam sintaksis apa pun. Tindakan ini akan memberi Anda setiap nilai saluran untuk digunakan sebagai huruf. Hal ini akan memunculkan warna merah, tanpa penyesuaian apa pun.

Untuk melakukan penyesuaian, Anda dapat menggunakan fungsi calc() untuk mengubah nilai saluran, atau hanya mengganti saluran sepenuhnya. Di sini kita menggunakan warna red yang sama, tetapi menentukannya dengan oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Saluran kecerahan adalah 62% / 2, atau 31% Saluran kromatik tidak berubah, sehingga adalah 0.25. Saluran hue adalah 180. Tindakan ini akan membuat warna baru oklch(31% 0.25 180), warna hijau gelap baru.

Anda akan sering menggunakan properti kustom sebagai warna input. Hal ini memungkinkan Anda membuat variasi warna secara dinamis.

Anda dapat melakukannya dengan fungsi warna apa pun, dan sebaiknya lakukan hal ini dengan fungsi warna yang memiliki saluran yang mendeskripsikan perubahan yang ingin Anda buat. Misalnya, jika Anda ingin menyesuaikan kecerahan warna, pilih oklch atau hsl, karena Anda dapat langsung mengubah saluran kecerahan.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Dengan menggunakan Sintaksis Warna Relatif, atau RCS, Anda dapat membuat palet warna untuk digunakan di situs Anda.

Warna di luar gamut

Konten Anda akan ditampilkan di berbagai layar yang mungkin mendukung atau tidak mendukung warna gamut lebar. Jika Anda menentukan warna yang tidak didukung oleh layar, warna tersebut akan mengalami proses yang disebut pemetaan gamut untuk menemukan warna serupa yang dapat ditampilkan di layar. Jika ingin menentukan warna tertentu dalam kasus tersebut, Anda dapat menggunakan kueri media color-gamut.

Tempat menggunakan warna dalam aturan CSS

Jika properti CSS menerima jenis data <color> sebagai nilai, properti tersebut akan menerima metode apa pun yang diuraikan sebelumnya untuk mengekspresikan warna. 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

Resource

• Demo praktis yang menunjukkan cara menggunakan sudut dengan HSL
• Panduan komprehensif tentang warna
• Panduan komprehensif tentang warna gamut lebar
• [video] Penjelasan tentang cara membaca kode heksadesimal
• Cara kerja kode heksadesimal