Nama Warna dan Kode Hex

Temukan nilai hex, RGB, dan HSL untuk nama warna apa pun, atau nama warna terdekat dari sebuah kode. Lengkap dengan gradasi dan rasio kontras WCAG 148 warna CSS.


Ketik nama warna, atau tempel nilai hex, RGB maupun HSL. Keempat format bisa dipakai.
Bersihkan

Semua warna bernama di CSS

Seluruh 148 nama warna bawaan CSS, lengkap dengan nilai hex dan RGB-nya. Klik baris mana pun untuk membukanya di atas.

Cara kerja kode warna hex

Kode hex hanyalah tiga angka yang ditulis dalam basis 16: berapa banyak merah, berapa banyak hijau dan berapa banyak biru, masing-masing dari 00 sampai FF. Jadi #FFD700 berarti merah penuh, hijau 215 dari 255, dan sama sekali tanpa biru, yang oleh mata dibaca sebagai emas. Yang menentukan hanyalah pasangan dua digitnya, dan itulah sebabnya #FFF dan #FFFFFF sama-sama putih.

Perbandingan hex, RGB dan HSL

Ketiganya menggambarkan warna yang sama, hanya membawa informasi yang berbeda. Hex ringkas dan menjadi pilihan lazim di CSS. RGB adalah angka yang sama dalam desimal, lebih mudah untuk perhitungan. HSL memisahkan rona dari saturasi dan kecerahan, sehingga jauh lebih mudah menyusun palet secara manual: pertahankan rona, ubah kecerahannya, dan Anda mendapat gradasi yang serasi.

Mengapa kontras penting

Teks harus cukup menonjol dari latarnya agar terbaca oleh orang dengan penglihatan lemah atau pada layar yang redup. Pedoman aksesibilitas menetapkan rasio 4,5 banding 1 untuk teks biasa (AA) dan 7 banding 1 untuk tingkat yang lebih ketat, AAA. Teks berukuran besar cukup 3 banding 1. Alat ini menghitung rasio terhadap putih maupun hitam sehingga Anda langsung tahu mana yang sebaiknya diletakkan di atasnya.

Perlu diketahui

  • CSS punya 148 warna bernama, dan beberapa di antaranya kembar: grey dan gray, serta aqua dan cyan, sama persis.
  • Penulisan hex singkat hanya berlaku bila tiap pasangan berulang, jadi #FFCC00 bisa ditulis #FC0 tetapi #FFD700 tidak bisa dipendekkan.
  • Menambah dua digit hex lagi mengatur transparansi, sehingga #FFD70080 adalah emas dengan kepekatan sekitar setengah.
  • Untuk menyusun palet, pertahankan rona di HSL dan ubah kecerahannya saja. Warnanya akan selalu tampak sekeluarga.

Pertanyaan yang sering diajukan

Warna CSS bernama gold adalah #FFD700, yaitu rgb(255, 215, 0). Warnanya kuning keemasan yang cerah, bukan nuansa metalik, karena warna datar tidak bisa meniru kilau emas asli. Untuk kesan lebih metalik, para perancang biasanya memadukannya dengan emas yang lebih gelap seperti #B8860B, yang di CSS disebut darkgoldenrod.

Ketik namanya di kotak di atas dan Anda mendapat nilai hex, RGB serta HSL sekaligus. Ini berlaku untuk seluruh 148 warna bernama di CSS, dan juga berlaku sebaliknya: tempel kode hex, maka alat ini menyebutkan warna bernama terdekat beserta jarak persisnya.

Keduanya membawa informasi yang sama persis dalam penulisan berbeda. Hex menulis tiap kanal dengan dua digit basis 16, jadi #FF7F50 berarti merah 255, hijau 127, biru 80. RGB menulis angka yang sama dalam desimal sebagai rgb(255, 127, 80). Tidak ada yang lebih akurat; hex sekadar lebih pendek diketik di CSS.

Rona, saturasi dan kecerahan. Rona adalah posisi pada roda warna dari 0 sampai 360 derajat, saturasi menunjukkan seberapa pekat warnanya, dan kecerahan berjalan dari hitam di 0% sampai putih di 100%. Inilah format paling praktis untuk merancang, karena mempertahankan rona sambil mengubah kecerahan saja menghasilkan rangkaian gradasi yang jelas saling berkaitan.

Spesifikasi CSS memuat 148 warna bernama, termasuk transparent. Beberapa nama merujuk pada nilai yang identik, terutama grey dan gray, aqua dan cyan, serta magenta dan fuchsia. Daftar lengkapnya beserta nilai hex dan RGB ada di halaman ini.

Pedoman aksesibilitas meminta setidaknya 4,5 banding 1 untuk teks isi biasa dan 3 banding 1 untuk teks besar, yang merupakan tingkat AA. Tingkat AAA yang lebih ketat meminta 7 banding 1. Alat ini menghitung rasio warna Anda terhadap putih dan hitam lalu memberi tahu mana yang lolos, sehingga Anda bisa langsung memilih opsi yang terbaca.

Bisa. Kode hex delapan digit menambahkan dua digit alfa di ujungnya, dengan 00 berarti sepenuhnya tembus pandang dan FF sepenuhnya pekat. Jadi #FF000080 adalah merah dengan kepekatan sekitar 50%. Semua peramban masa kini mendukungnya, meski penulisan lama rgba() masih sangat umum.

Karena 148 warna bernama itu hanyalah cuplikan kecil dari sekitar 16,7 juta warna yang bisa ditampilkan layar. Jika nilai Anda bukan salah satu titik persis itu, alat ini mencari warna bernama terdekat dengan mengukur jarak keduanya di ruang RGB, lalu memberi tahu bahwa itu pendekatan dan bukan kecocokan.

Berapa kode hex sebuah warna?

Ketik nama warna dan dapatkan sekaligus nilai hex, RGB dan HSL-nya, atau tempel kode apa pun untuk menemukan warna bernama CSS terdekat. Gold adalah #FFD700, coral adalah #FF7F50, dan teal adalah #008080. Setiap hasil juga menampilkan gradasi gelap terang serta rasio kontras terhadap hitam dan putih.