Pemilih warna

Pilih warna pada roda, sempurnakan pada kanvas saturasi dan kecerahan, lalu baca kembali dalam setiap format yang dipakai proyek Anda, dari #RRGGBB hingga oklch(). Alat ini juga melakukan hal yang dilewatkan pemilih warna lain: tiga geometri roda termasuk roda pelukis RYB, harmoni warna yang membangun palet untuk Anda, kanal alfa, dan ekspor sekali klik untuk seluruh palet sebagai variabel CSS, SCSS, atau JSON. Semuanya dihitung langsung di browser Anda.

RYB vs RGB: tiga roda warna, bukan satu

Pilihan Mode Roda mengubah susunan rona pada roda itu sendiri:

• HSV dan HSL adalah roda digital: rona disusun sesuai cara layar mencampur cahaya RGB. Keduanya berbeda pada kanvas persegi: sudut paling terang pada HSV adalah rona murni, sedangkan HSL menempatkan rona murni di kecerahan tengah dengan putih di atasnya.
• RYB (pelukis) menyusun rona seperti yang dipelajari seniman: merah, kuning, dan biru sebagai warna primer, dengan oranye, hijau, dan ungu di antaranya (lihat model warna RYB, dalam bahasa Inggris). Perbedaannya paling terasa pada harmoni. Pada roda RYB, komplemen merah adalah hijau dan komplemen biru adalah oranye, pasangan pigmen klasik ala pelukis. Roda digital justru memasangkan merah dengan sian. Kalau palet “komplementer” dari pemilih warna biasa pernah terasa janggal di mata Anda, inilah sebabnya.

Harmoni warna yang membangun palet untuk Anda

Pilih aturan di kolom Harmoni Warna. Roda akan menandai warna pendampingnya dan palet siap pakai muncul di bawahnya:

• Komplementer: satu warna berlawanan. Kontras paling kuat, cocok untuk satu aksen tunggal di samping warna merek utama.
• Split-Komplementer: dua tetangga dari warna komplemen. Kontrasnya hampir sama kuat, tapi jauh lebih mudah diseimbangkan.
• Triadik: tiga rona berjarak sama di sekeliling roda. Hidup namun tetap stabil kalau satu warna mendominasi dan dua lainnya dipakai secukupnya.
• Tetradik (persegi): empat rona. Skema kaya untuk ilustrasi dan visualisasi data, tapi sulit diseimbangkan dalam antarmuka aplikasi.
• Analog: tetangga terdekat di roda. Kombinasi tenang untuk latar belakang dan gradien.
• Monokromatik: satu rona dalam beberapa tingkat kecerahan. Pilihan paling aman untuk status tombol (hover, aktif, nonaktif).

Salin seluruh palet dalam satu klik, dalam format pilihan Anda: HEX biasa, RGB, HSL, OKLCH, properti kustom CSS siap tempel (--color-1: …), variabel SCSS, atau JSON untuk kode. Untuk memastikan palet tetap kontras bagi orang yang sulit membedakan rona, ambil tangkapan layar lalu konversi ke skala abu-abu.

Konversi HEX, RGB, HSL, OKLCH, dan CMYK: tempelkan apa saja, baca semuanya

Bidang input menerima hampir semua notasi warna: #f80, #ff8800, hex 8 digit dengan alfa, rgb() dan rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, atau nama warna CSS seperti rebeccapurple. Apa pun yang Anda masukkan, tujuh output tersinkron langsung tersedia: HEX, RGB, HSL, HSV, LCH, OKLCH, dan CMYK, masing-masing dengan tombol salinnya sendiri.

Penggeser Opasitas (alfa) di bawah pratinjau mengubah output ke bentuk transparannya: #RRGGBBAA, rgba(), dan hsla(). Pratinjau ditampilkan di atas pola papan catur, jadi transparansinya langsung terlihat.

Temukan token warna Tailwind CSS terdekat

Dua label di bawah pratinjau menamai warna untuk Anda: warna bernama CSS terdekat (berguna untuk prototipe cepat) dan token Tailwind terdekat, misalnya orange-500, sehingga Anda tetap berada dalam sistem desain alih-alih membuat nilai satu kali pakai sendiri. Klik salah satu label untuk menyalinnya.

Ini menjawab pertanyaan yang selalu muncul di setiap serah terima desain: desainer mengirim kode hex, kelas Tailwind mana yang paling dekat? Kecocokan dihitung terhadap palet bawaan Tailwind CSS 4 (lihat dokumentasi Tailwind, dalam bahasa Inggris), jadi token yang Anda dapat bisa langsung ditempel ke nama kelas.

Format mana yang harus Anda gunakan?

Format	Nama Lengkap	Kapan digunakan?
HEX	Hexadecimal	Standar web. Ringkas, didukung di mana saja, mudah disalin. 8 digit menambahkan alfa.
RGB	Red, Green, Blue	Cara layar berpikir. Tiga kanal cahaya dari 0 hingga 255. Format yang diharapkan sebagian besar API dan kode canvas.
HSL	Hue, Saturation, Lightness	Untuk diubah secara manual. “Sedikit lebih terang” atau “kurang jenuh” cuma mengubah satu angka.
HSV	Hue, Saturation, Value	Perangkat lunak desain. Model di balik pemilih warna pada Photoshop dan GIMP.
LCH	Lightness, Chroma, Hue	Seragam secara perseptual. Langkah angka yang sama terlihat sebagai langkah visual yang sama, sesuatu yang cuma diusahakan HSL.
OKLCH	OK Lightness, Chroma, Hue	Pilihan CSS modern. Memperbaiki pergeseran rona pada biru yang mengganggu LCH. Didukung semua browser terkini dan cocok untuk token desain.
CMYK	Cyan, Magenta, Yellow, Key	Berorientasi cetak. Konversi perkiraan untuk berbicara dengan percetakan; nilai akhir tetap ditentukan profil warna mesin cetak.

Alasan OKLCH lebih seragam secara perseptual dibanding model lama dijelaskan oleh Björn Ottosson, perancang ruang warna Oklab, dalam artikel aslinya (dalam bahasa Inggris). Sintaks dan dukungan browsernya dirangkum di MDN (dalam bahasa Inggris). Cara kerja model cetak dijelaskan di Wikipedia tentang CMYK.

Hal-hal kecil yang menghemat waktu

• Riwayat mengingat dirinya sendiri. 24 warna terakhir yang Anda pakai bertahan setelah halaman dimuat ulang, tersimpan hanya di penyimpanan lokal browser Anda dan tidak pernah diunggah.
• Eyedropper. Di browser dengan EyeDropper API (Chrome dan Edge), Anda bisa mengambil warna dari mana saja di layar, bahkan di luar jendela browser. Untuk mengambil warna dari foto atau file logo, pakai pipet warna online.
• Kontrol keyboard. Roda dan kanvas saturasi merespons tombol panah, jadi Anda bisa menyesuaikan warna langkah demi langkah.
• Preset mencakup warna dasar umum saat Anda hanya butuh titik awal cepat.

Pertanyaan yang sering diajukan

Bagaimana cara mengonversi OKLCH ke HEX?

Tempelkan nilai oklch() ke bidang OKLCH dan semua output lain, termasuk HEX, langsung diperbarui. Berlaku juga sebaliknya: ketik kode HEX dan baca padanan oklch()-nya. Satu catatan: OKLCH bisa menjelaskan warna di luar rentang sRGB, dan warna semacam itu dipangkas ke batas yang bisa ditampilkan sRGB. Karena itu oklch() dengan kroma sangat tinggi tidak akan terlihat identik dengan versi HEX-nya di layar bergamut lebar.

Apakah oklch() aman dipakai di CSS produksi?

Ya. Semua versi terkini Chrome, Edge, Firefox, dan Safari mendukung oklch(), dan notasi ini sudah jadi pilihan populer untuk token desain (Tailwind CSS 4 mendefinisikan seluruh paletnya dengan format ini). Untuk browser yang sangat lama, sediakan fallback HEX pada baris sebelumnya. Alat ini memberi Anda kedua nilai tersebut sekaligus.

Kenapa harmoni berubah saat saya beralih ke roda RYB?

Karena "berlawanan" bergantung pada cara rona disusun di sekeliling lingkaran. Roda RYB menyebarkan warna primer pigmen secara merata, sehingga pasangan komplementer sesuai dengan yang dikenal pelukis: merah dengan hijau, biru dengan oranye, kuning dengan ungu. Roda HSV dan HSL menyusun rona berdasarkan pencampuran cahaya, sehingga memasangkan merah dengan sian. Tidak ada yang salah; RYB mengikuti tradisi seni rupa, sementara HSV dan HSL mengikuti cara kerja layar.

Bisakah saya memercayai nilai CMYK untuk pencetakan?

Anggap sebagai panduan, bukan patokan pasti. Konversi cetak yang sesungguhnya bergantung pada profil ICC (dalam bahasa Inggris) milik mesin cetak, kertas, dan tinta. Warna RGB yang sama bisa tampil berbeda di kertas berlapis dan tanpa lapisan. Nilai di sini memakai rumus standar yang mendekati, tapi bukti akhir tetap ada di tangan percetakan.

Di mana tombol eyedropper di Firefox atau Safari?

Tombol itu memang sengaja disembunyikan di sana. EyeDropper API (MDN, dalam bahasa Inggris) yang jadi dasar tombol tersebut saat ini hanya tersedia di browser berbasis Chromium (Chrome, Edge, Opera). Fitur lain dari pemilih warna ini tetap berfungsi normal di semua browser, hanya pengambilan warna dari layar yang tidak tersedia. Kalau butuh warna dari gambar, pakai pipet warna online yang berfungsi di semua browser.

Apakah riwayat warna saya privat?

Ya. Riwayat disimpan di localStorage browser Anda, di perangkat Anda sendiri. Tidak ada yang Anda pilih, tempel, atau salin yang pernah dikirimkan; seluruh alat ini adalah JavaScript sisi klien, yang bisa Anda verifikasi lewat tab jaringan di alat pengembang.