CSS Warna Name Finder

Cara menggunakan

1. Masukkan nilai warna: ketik atau tempel kode hex (#3b82f6), nilai RGB atau HSL, atau klik pemilih untuk memilih warna secara visual.
2. Dapatkan nama warna: nama CSS bernama terdekat, referensi Pantone, dan nama yang dapat dibaca ditampilkan seketika.
3. Jelajahi warna terdekat: lihat palet warna bernama serupa untuk menemukan yang paling cocok atau alternatif untuk desain Anda.

Mengapa menggunakan pencarian nama warna?

Saat bekerja dengan sistem desain, dokumentasi aksesibilitas, atau komunikasi klien, memiliki nama yang dapat dibaca untuk warna jauh lebih berguna daripada kode hex. "Cornflower Blue" berkomunikasi dengan jelas; "#6495ed" tidak. Alat ini menjembatani nilai mesin dan nama manusia, membantu desainer mendokumentasikan palet, menjelaskan pilihan warna, dan menemukan kembali nama CSS standar untuk nilai hex mereka.

Fitur

• Nama CSS terdekat: menemukan warna CSS bernama terdekat (dari daftar lengkap 148 warna CSS) untuk kode hex atau RGB apa pun.
• Beberapa format input: menerima hex (#rrggbb), RGB, HSL, dan HSV.
• Pemilih warna: gunakan pemilih native untuk pemilihan visual.
• Warna terdekat: menampilkan warna bernama serupa untuk menemukan alternatif.
• Metadata warna: menampilkan hue, saturasi, lightness, dan kecerahan yang dirasakan.

Pertanyaan umum

Bagaimana alat menemukan nama yang paling dekat?

Alat menghitung jarak persepsi antara warna Anda dan semua warna CSS bernama menggunakan rumus selisih CIEDE2000, yang sangat sesuai dengan persepsi manusia tentang perbedaan warna. Pencocokan terdekat dikembalikan sebagai nama.

Apakah warna ini sama dengan kata kunci CSS?

Ya. Alat ini mencakup semua 148 warna CSS standar bernama (dari spesifikasi CSS Color Module Level 4) seperti "rebeccapurple", "dodgerblue", dan "tomato". Anda dapat menggunakannya secara langsung di CSS sebagai pengganti nilai hex.

Bagaimana jika warna saya tidak memiliki nama yang tepat?

Kebanyakan warna tidak memiliki nama CSS yang tepat. Alat mengembalikan warna bernama yang paling dekat secara persepsi dan menampilkan selisih (delta E) untuk menunjukkan seberapa dekat pencocokannya.

Dari X11 ke CSS Color Module Level 4: jalan panjang menuju «rebeccapurple»

Warna bernama CSS yang digunakan kebanyakan orang saat ini diwariskan dari daftar warna X Window System (rgb.txt), yang dirakit di MIT untuk lingkungan grafis X11 pada 1986. Daftar tumbuh secara organik selama dekade berikutnya, penuh dengan nama-nama aneh dan tidak jelas seperti «papayawhip», «peachpuff», dan «papayawhip». Ketika Mosaic (1993) dan kemudian Netscape Navigator (1994) menstandardisasi warna di HTML, mereka mempertahankan subset dari nama-nama X11. CSS1 (Desember 1996) hanya memformalkan 16 warna bernama yang cocok dengan palet VGA asli: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) menambahkan «orange» sebagai yang ke-17. CSS2.1 (Juni 2011) mempertahankan 17. CSS3 Color Module (Juni 2014, diselesaikan 2018) menambahkan sisa nama X11, membawa total ke 147. Pada Juni 2014, warna «rebeccapurple» (#663399) ditambahkan untuk menghormati putri Eric Meyer, Rebecca, yang meninggal karena kanker otak; dia mengatakan ungu adalah warna favoritnya. Itu ditambahkan ke CSS Color Module Level 4, membawa total ke 148. Nilai hex #663399 adalah satu-satunya warna bernama CSS yang ditambahkan untuk mengenang orang tertentu.

Warna CSS di luar warna bernama: oklch, lab, color()

Warna bernama masih hanya mencakup satu sudut dari apa yang dapat ditampilkan layar modern. CSS Color Module Level 4 (Candidate Recommendation, draft saat ini) memperkenalkan set sintaks warna yang jauh lebih luas. lab() dan lch() memungkinkan Anda menentukan warna di CIE Lab dan LCh, yang merupakan ruang warna yang persepsinya seragam. oklab() dan oklch() (Björn Ottosson, 2020) adalah versi yang lebih baik yang menangani warna jenuh terang lebih baik; oklch(70% 0.15 240) adalah biru langit yang hidup. color(display-p3 1 0.5 0) memberikan akses ke gamut warna P3 yang lebih luas yang dapat ditampilkan oleh iPhone, iPad, dan Mac modern, sekitar 25% lebih jenuh daripada sRGB yang membatasi warna bernama. Sintaks warna relatif (oklch(from blue calc(l - 10%) c h)) memungkinkan Anda menurunkan satu warna dari yang lain. Dukungan browser untuk keempat fungsi warna mencapai >90% pada 2024. Untuk desain era 2025, gunakan warna bernama untuk prototyping, lalu port ke oklch() untuk palet produksi yang bekerja di seluruh spektrum gamut warna.

Bagaimana «warna terdekat» sebenarnya dihitung

«Jarak» antara dua warna bukanlah konsep tunggal. Rumus yang berbeda memberikan jawaban yang berbeda dan masing-masing cocok untuk kasus penggunaan yang berbeda.

• Jarak Euclidean dalam sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Cepat, tetapi tidak sesuai dengan persepsi manusia, dua warna yang terlihat identik dapat berjauhan di RGB dan dua warna yang terlihat sangat berbeda dapat dekat. Hindari untuk query «nama terdekat».
• Delta E CIE76. Rumus Euclidean yang sama tetapi dalam ruang CIE Lab, yang secara kasar seragam secara persepsi. Secara kasar, tidak persis. Pendekatan pertama yang baik; ΔE ≤ 2,3 dianggap «hampir tidak terlihat» dalam kondisi terkontrol.
• Delta E CIEDE2000. Standar industri saat ini, diterbitkan oleh CIE pada 2001. Menambahkan koreksi untuk kecerahan, kroma, dan rotasi rona yang lebih baik sesuai dengan bagaimana manusia sebenarnya memahami perbedaan warna. ΔE2000 ≤ 1 tidak terlihat bagi sebagian besar pengamat; ≤ 5 terlihat seperti warna yang serupa. Alat ini menggunakan CIEDE2000 untuk «kecocokan terdekat».
• Jarak Euclidean dalam OKLab. Ruang warna 2020 Björn Ottosson dirancang sehingga jarak Euclidean biasa mendekati ΔE2000 dengan dekat. Lebih cepat daripada ΔE2000 dan kualitas persepsinya serupa. Semakin menjadi default dalam tooling desain.

Di mana penamaan warna sebenarnya membantu

• Dokumentasi sistem desain. «Tindakan utama: Royal Blue (#4169e1)» lebih mudah dibaca daripada hanya nilai hex dalam spesifikasi desain dan pedoman merek.
• Komunikasi klien. «Mari gunakan coral dan steel blue» berfungsi dalam rapat; «#ff7f50 dan #4682b4» tidak. Nama-nama menjangkar percakapan sebelum Anda berkomitmen pada nilai yang tepat.
• Audit aksesibilitas. Saat mendokumentasikan warna mana yang gagal kontras WCAG terhadap latar belakang, memiliki nama manusiawi membuat laporan audit dapat digunakan oleh non-pengembang.
• Terjemahan kode legacy. File CSS lama sering menggunakan warna bernama. Saat bermigrasi ke token desain atau palet kustom, Anda perlu tahu warna mana yang tepat dipetakan oleh «lightseagreen» dan «mediumaquamarine».
• Prototipe cepat. Mengetik background: tomato lebih cepat daripada memilih hex dari roda warna. Warna bernama adalah default yang sangat baik untuk mensketsa layout sebelum warna akhir dipilih.
• Penamaan warna merek. Jika merah merek Anda dekat dengan crimson (#dc143c), menyebutnya «Brand Crimson» secara internal lebih mudah diingat daripada «Red 8».
• Pencocokan swatch. Desainer menempel warna yang diambil sampelnya dari foto atau screenshot dan bertanya «warna apa ini dekat?» untuk memulai palet dari referensi dunia nyata.

Kesalahan dan kejutan dengan warna bernama CSS

• gray vs grey. CSS menerima kedua ejaan, tetapi daftar X11 awalnya hanya memiliki «gray». «grey» ditambahkan kemudian. lightgray dan lightgrey adalah alias, warna yang sama. Tetap pada satu ejaan dalam basis kode.
• Varian «dark» tidak selalu lebih gelap dari basis. darkgray (#a9a9a9) sebenarnya lebih terang daripada gray (#808080), keanehan historis terkenal dari daftar X11 yang diwarisi CSS. Jebakan yang sama dengan darkgrey.
• aqua dan cyan adalah warna yang sama. Keduanya adalah #00ffff. CSS menyertakan keduanya sebagai alias legacy. fuchsia dan magenta juga identik (#ff00ff).
• «orange» adalah warna bernama CSS tetapi varian «pink» berbeda. orange = #ffa500. Tetapi tidak ada satu «pink», CSS memiliki pink, lightpink, hotpink, deeppink, palevioletred, semuanya terlihat berbeda.
• «Warna terdekat» tergantung pada apa yang otak Anda pikir warna itu. Dua orang yang mensampling chip cat yang sama dapat memilih nama yang berbeda. CIEDE2000 menangkap persepsi rata-rata, bukan Anda. Selalu periksa swatch secara visual daripada hanya mempercayai angka jarak.
• Warna bernama semuanya sRGB. Warna bernama CSS didefinisikan sebagai triple sRGB 8-bit. Pada layar P3 atau BT.2020, warna cerah seperti tomato dan fuchsia dapat terlihat lebih kusam daripada rona yang sama yang ditentukan dalam color(display-p3 ...). Untuk prototipe, baik; untuk produksi pada perangkat keras modern, port ke sintaks wide-gamut.
• Warna bernama saja tidak lulus pemeriksaan aksesibilitas. yellow pada white tidak terbaca; red pada black marginal. Status bernama warna tidak mengatakan apa-apa tentang kontras. Selalu pasangkan pilihan warna dengan pemeriksaan kontras WCAG.

Pertanyaan yang lebih sering diajukan

Siapa yang sebenarnya memilih nama seperti «papayawhip» dan «peachpuff»?

Bukan satu orang; file X11 rgb.txt tumbuh melalui beberapa kontributor di MIT dan vendor Unix lainnya pada akhir 1980-an. Banyak nama berasal dari katalog cat Sinclair Paints dan lainnya pada era itu. Penamaan tidak formal dan tidak konsisten dengan sengaja, kontributor menamai warna berdasarkan objek yang mereka miliki di meja atau di luar jendela mereka. Tidak ada komite pusat. Ketika CSS3 mengadopsi daftar X11 secara borongan pada 2014, semua keanehan datang bersamanya.

Haruskah saya menggunakan rebeccapurple dalam produksi?

Dukungan browser bersifat universal sejak 2014, jadi berfungsi di mana-mana. Itu persis setara dengan #663399. Gunakan nama apa pun yang lebih mudah dibaca di kode Anda; «rebeccapurple» adalah penghormatan kecil namun terlihat di setiap halaman yang menggunakannya.

Apa perbedaan antara CIEDE2000 dan rumus ΔE yang lebih sederhana?

ΔE76 (jarak Euclidean dalam CIE Lab) cepat dan memberikan jawaban yang masuk akal tetapi meremehkan perbedaan dalam warna jenuh dan melebih-lebihkan dalam warna gelap. CIEDE2000 menambahkan lima istilah koreksi (untuk kecerahan, kroma, rotasi rona, dan dua istilah silang) yang cocok dengan data empiris tentang bagaimana orang sebenarnya memahami perbedaan warna. Perbaikannya signifikan; pasangan warna yang sama dapat memberikan ΔE76 = 4 dan ΔE2000 = 2 (putusan persepsi sangat berbeda). Untuk «apakah warna ini cukup dekat dengan yang itu», gunakan ΔE2000. Untuk pemrosesan batch di mana kecepatan penting, jarak Euclidean OKLab adalah pendekatan cepat.

Bisakah saya menambahkan nama warna kustom saya sendiri?

Tidak sebagai kata kunci CSS, daftar warna bernama ditetapkan oleh spec. Tetapi Custom Properties CSS (variabel) memberi Anda ergonomi yang sama: :root { --brand-coral: #ff7f50; } lalu color: var(--brand-coral). Token desain pada dasarnya adalah ide ini diformalkan, dan sistem desain modern menggunakannya secara universal.

Apakah data warna saya dikirim ke mana pun?

Tidak. Semua konversi warna dan perhitungan jarak berjalan di browser Anda. Buka tab Jaringan di DevTools dan pilih warna, Anda akan melihat nol permintaan keluar. Aman untuk warna merek yang belum dirilis atau pekerjaan palet internal apa pun.