Konversi Warna: HEX, RGB, HSL, CMYK, OKLCH

Notasi warna, dan kapan memakai masing-masing

HEX

#rrggbb, atau #rrggbbaa dengan alpha. Bentuk pendek #rgb menggandakan setiap digit. Bawaan di alat desain dan CSS.

RGB

Merah, hijau, dan biru dari 0 hingga 255. CSS modern menulis rgb(42 157 143 / 50%); bentuk lama rgba(42, 157, 143, 0.5) masih berfungsi di mana saja.

HSL

Hue dalam derajat, saturasi dan kecerahan dalam persen. Mudah diubah manual, tetapi kecerahan 50% tidak sama terangnya untuk setiap hue: kuning terlihat jauh lebih terang daripada biru.

HSV / HSB

Hue, saturasi, dan value (atau brightness). Model di balik pemilih warna Photoshop, Figma, dan sebagian besar aplikasi desain. Tidak valid di CSS.

HWB

Hue ditambah seberapa banyak putih dan hitam yang dicampurkan. CSS yang valid sejak Color Level 4 dan intuitif untuk membuat varian pastel atau kalem.

CMYK

Persentase tinta cyan, magenta, kuning, dan key (hitam) untuk cetak. Nilai di sini memakai rumus perangkat standar; warna cetak sebenarnya bergantung pada kertas dan profil warna printer.

OKLCH

Kecerahan, chroma, dan hue dalam ruang yang seragam secara persepsi. Kecerahan yang sama terlihat sama terangnya di setiap hue, sehingga paling cocok untuk membangun skala warna dan palet yang aksesibel. Didukung semua browser terkini.

Nama CSS

148 kata kunci seperti tomato, rebeccapurple, dan slategray. Konverter menampilkan yang terdekat, dan menandainya jika cocok persis.

Konversi HEX ke RGB secara manual

Warna HEX terdiri dari tiga pasang digit basis 16. Pisahkan #2a9d8f menjadi 2a, 9d, dan 8f, lalu konversi setiap pasang: 2a adalah 2 × 16 + 10 = 42, 9d adalah 9 × 16 + 13 = 157, dan 8f adalah 8 × 16 + 15 = 143, jadi warnanya rgb(42, 157, 143). Untuk arah sebaliknya, bagi setiap kanal dengan 16: hasil bagi adalah digit pertama dan sisanya digit kedua. HEX 8 digit menambahkan pasangan keempat untuk alpha, di mana ff sepenuhnya buram dan 80 sekitar 50%.

Konversi antara HEX, RGB, HSL, HSV, dan HWB bersifat persis, selain pembulatan. CMYK pada dasarnya hanya perkiraan, dan warna OKLCH yang berada di luar rentang sRGB yang bisa ditampilkan layar dikembalikan ke dalam rentang dengan menurunkan chroma, sambil mempertahankan kecerahan dan hue yang Anda minta.

Notasi mana yang sebaiknya dipakai di CSS?

Semua browser terkini memahami HEX, rgb(), hsl(), hwb(), dan oklch(), jadi pilihannya soal mana yang paling mudah dibaca dan dirawat. HEX ringkas dan itulah yang biasa diserahkan desainer, sehingga tetap menjadi pilihan aman untuk nilai sekali pakai. HSL praktis saat Anda ingin menggeser warna secara manual, misalnya state hover yang sedikit lebih terang.

Untuk design system, OKLCH semakin menjadi pilihan yang lebih baik. Karena kecerahannya bersifat perseptual, sekumpulan warna merek dengan nilai L yang sama benar-benar terlihat sama terangnya, dan Anda bisa menurunkan satu skala penuh hanya dengan mengubah satu angka. OKLCH juga bisa menggambarkan warna yang lebih cerah di layar wide-gamut P3, yang tidak bisa dilakukan HEX dan rgb(). Ingat bahwa HSV, HSB, dan CMYK bukan CSS yang valid: semuanya ada di sini untuk memindahkan nilai antara alat desain dan cetak.

Tint, shade, tone, dan harmoni

Tint mencampur warna dengan putih, shade dengan hitam, dan tone dengan abu-abu. Ketiga baris bergerak dari warna asli dengan kenaikan 10%, sehingga Anda mendapat state hover, border, dan latar yang jelas serasi.

Harmoni memutar hue di roda warna: komplementer adalah hue yang berseberangan, analog adalah tetangganya 30° di kedua sisi, triadik tiga hue berjarak 120°, split-komplementer dua hue di samping komplemennya, dan tetradik empat hue berjarak 90°. Semuanya titik awal untuk aksen, bukan aturan: selalu periksa warna teks dengan cek kontras. Untuk membangun palet dari foto, gunakan color palette generator.