Cara menggunakan Pencari Nama Warna
- Masukkan kode HEX (misal
#55AAEE) atau warna CSS apa pun, atau gunakan pemilih warna. - Baca nama yang paling dekat dan seberapa mirip hasilnya (ΔE, makin kecil makin dekat).
- Salin nama variabel siap pakai untuk CSS, SCSS, JavaScript, atau Tailwind.
- Untuk memberi nama satu palet penuh, tempel beberapa warna di kotak massal lalu salin blok
:rootyang dihasilkan.
Kenapa perlu memberi nama warna?
Kode HEX seperti #55AAEE tidak bermakna saat review kode, tapi --cerulean langsung jelas. Nama warna yang deskriptif membuat design token lebih mudah dibaca, membantu desainer dan developer membicarakan warna yang sama, dan mencegah variabel seperti --blue-2-new-final menumpuk di codebase.
Cara pencocokannya bekerja
Alat ini membandingkan warna kamu dengan sekitar 5.000 nama pilihan dari proyek open-source color-names (lisensi MIT). Jarak dihitung di ruang warna OKLab yang seragam secara persepsi, jadi nama “paling dekat” adalah nama yang benar-benar terlihat paling mirip, bukan sekadar yang angka-nya paling dekat. Nilai ΔEOK menunjukkan seberapa dekat kecocokannya: di bawah sekitar 2 hampir tidak terlihat bedanya, 2–5 cukup dekat, dan di atas 5 nama tersebut hanya deskripsi kasar.
Kamu juga melihat salah satu dari 148 kata kunci warna CSS resmi yang paling dekat (seperti royalblue atau tomato), yang bisa langsung dipakai di CSS.
Konvensi penamaan token
| Konteks | Konvensi | Contoh |
|---|---|---|
| Properti kustom CSS | kebab-case | --ocean-blue |
| Variabel SCSS | kebab-case dengan awalan | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Kunci tema Tailwind | kebab-case | bg-ocean-blue |
Nama deskriptif vs semantik
Nama deskriptif (ocean blue, atau biru laut) cocok untuk palet mentah. Komponen biasanya sebaiknya merujuk ke token semantik (--color-primary, --color-danger) yang mengarah ke nama-nama deskriptif tersebut, sehingga kamu bisa ganti brand tanpa harus mengganti nama semuanya. Buat skala shade lengkap untuk setiap warna dasar dengan Tailwind Color Generator.
Juga dicari sebagai: nama warna, cari nama warna dari kode hex, nama warna hex, warna ini namanya apa, nama variabel css, design token.
Tool yang cocok dipakai bersama Pencari Nama Warna
- Pengambil Palet Warna Gambar — Temukan palet warna dari gambar apa pun, seperti foto, logo, screenshot, atau desain.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- CSS Variables ke Tailwind — Ubah variabel warna :root kamu menjadi theme Tailwind hanya dengan sekali tempel.
- Pencampur Warna — Pilih dua warna dan jumlah langkah untuk mendapatkan warna transisi yang tercampur merata, cocok untuk gradien, border, chart, dan state hover.
Pertanyaan yang sering diajukan
Warna apa itu #008080?
#008080 adalah Teal, yang juga merupakan salah satu kata kunci warna CSS resmi. Tempel kode apa pun di atas untuk mengidentifikasinya.Apakah nama-nama ini resmi?
tomato) yang resmi di CSS. Nama lainnya berasal dari daftar komunitas yang dikurasi dan merupakan label deskriptif, bukan standar.Seberapa akurat kecocokannya?
Bisakah saya memberi nama banyak warna sekaligus?
:root yang dihasilkan. Nama yang duplikat akan mendapat akhiran angka.