Pemilih Warna Online
Pilih warna pada roda, sempurnakan pada kanvas saturasi, dan baca kembali dalam setiap format yang digunakan proyek Anda — dari #RRGGBB hingga oklch(). Pemilih warna ini juga melakukan hal-hal yang dilewatkan alat lain: tiga geometri roda termasuk roda pelukis RYB, overlay harmoni yang membangun palet untuk Anda, kanal alfa, dan ekspor sekali klik untuk seluruh palet sebagai variabel CSS, SCSS, atau JSON. Semuanya dihitung secara lokal di browser Anda.
Tiga roda, bukan satu
Pemilih Mode Roda mengubah geometri roda itu sendiri:
- HSV dan HSL adalah roda digital — rona disusun sesuai cara layar RGB mencampur cahaya. Keduanya berbeda dalam cara kanvas persegi berperilaku: sudut paling terang pada HSV adalah rona murni, sedangkan HSL menempatkan rona murni pada kecerahan 50% dengan putih di atasnya.
- RYB (pelukis) menyusun rona sebagaimana yang dipelajari para seniman: merah, kuning, dan biru sebagai warna primer, dengan oranye, hijau, dan ungu di antaranya. Nilai praktisnya terlihat pada harmoni — pada roda RYB, komplemen merah adalah hijau dan komplemen biru adalah oranye, pasangan pigmen klasik, sedangkan roda digital memasangkan merah dengan sian. Jika palet “komplementer” dari pemilih warna biasa pernah terasa salah di mata Anda, inilah alasannya.
Harmoni yang membangun palet untuk Anda
Pilih aturan di bawah Harmoni Warna dan roda akan menandai warna pendampingnya, yang muncul sebagai palet siap pakai:
- Komplementer — satu warna berlawanan. Kontras terkuat; gunakan untuk satu aksen tunggal terhadap warna merek yang dominan.
- Split-Komplementer — dua tetangga dari warna komplemen. Kontras hampir sama kuat, jauh lebih mudah diseimbangkan.
- Triadik — tiga rona berjarak sama. Hidup namun stabil; biarkan satu mendominasi dan gunakan dua lainnya secukupnya.
- Tetradik (persegi) — empat rona. Skema kaya untuk ilustrasi dan visualisasi data; sulit diseimbangkan dalam desain antarmuka.
- Analog — tetangga terdekat. Ketegangan rendah, cocok untuk latar belakang dan gradien.
- Monokromatik — satu rona dalam tingkat kecerahan bertahap. Pilihan teraman untuk status antarmuka (hover, aktif, nonaktif).
Panel palet menyalin seluruh set dalam satu klik, dalam format pilihan Anda: HEX biasa, RGB, HSL, OKLCH, properti kustom CSS siap tempel (--color-1: …), variabel SCSS, atau JSON untuk diserahkan ke kode.
Tempelkan apa saja, baca semuanya
Bidang input menerima hampir semua notasi warna yang Anda masukkan: #f80, #ff8800, hex 8 digit dengan alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, atau nama warna CSS seperti rebeccapurple. Apa pun yang masuk, tujuh output tersinkron akan kembali: HEX, RGB, HSL, HSV, LCH, OKLCH, dan CMYK, masing-masing dengan tombol salinnya sendiri.
Dua chip pembantu di bawah pratinjau menamai warna untuk Anda: warna bernama CSS terdekat (berguna untuk prototipe cepat dan untuk membicarakan warna) dan token Tailwind terdekat (misalnya orange-500), sehingga Anda dapat tetap berada dalam sistem desain Anda alih-alih membuat nilai satu kali pakai sendiri.
Geser penggeser Opasitas (alfa) di bawah pratinjau dan output akan berubah ke bentuk transparannya — #RRGGBBAA, rgba(), hsla() — dengan pratinjau ditampilkan di atas pola papan catur agar Anda dapat menilai transparansinya.
Format mana yang harus Anda gunakan?
| Format | Nama Lengkap | Kapan digunakan? |
|---|---|---|
| HEX | Hexadecimal | Standar web. Ringkas, didukung secara universal, mudah disalin. 8 digit menambahkan alfa. |
| RGB | Red, Green, Blue | Cara layar berpikir. Tiga kanal cahaya, 0–255. Format yang diharapkan sebagian besar API dan kode canvas. |
| HSL | Hue, Saturation, Lightness | Untuk manusia yang mengedit secara manual. “Sedikit lebih terang” atau “kurang jenuh” hanya perubahan satu angka. |
| HSV | Hue, Saturation, Value | Perangkat lunak grafis. Model di balik pemilih warna di Photoshop dan GIMP. |
| LCH | Lightness, Chroma, Hue | Seragam secara perseptual. Langkah numerik yang sama terlihat seperti langkah visual yang sama — yang coba dilakukan HSL. |
| OKLCH | OK Lightness, Chroma, Hue | Pilihan CSS modern. Memperbaiki pergeseran rona LCH pada warna biru; didukung di semua browser terkini dan ideal untuk sistem token desain. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientasi cetak. Konversi perkiraan untuk berbicara dengan desainer cetak — nilai akhir selalu berasal dari profil warna mesin cetak. |
Hal-hal kecil yang menghemat waktu
- Riwayat mengingat dirinya sendiri. 24 warna terakhir yang Anda gunakan bertahan setelah halaman dimuat ulang — disimpan hanya di penyimpanan lokal browser Anda, tidak pernah diunggah ke mana pun.
- Eyedropper. Di browser dengan EyeDropper API (Chrome dan Edge) Anda dapat mengambil warna dari mana saja di layar Anda, bahkan di luar jendela browser.
- Kontrol keyboard. Roda dan kanvas saturasi merespons tombol panah untuk penyesuaian presisi piksel.
- Preset mencakup warna dasar umum saat Anda hanya butuh titik awal cepat.
Pertanyaan yang Sering Diajukan (FAQ)
Apakah oklch() aman digunakan dalam CSS produksi?
Ya. Semua versi terkini Chrome, Edge, Firefox, dan Safari mendukungoklch(), dan notasi ini telah menjadi pilihan utama untuk token desain (Tailwind CSS 4 mendefinisikan seluruh paletnya dalam format ini). Untuk browser yang sangat lama, sediakan fallback HEX pada baris sebelumnya — alat ini memberi Anda kedua nilai tersebut.