# Pemilih warna

> Roda warna HSV, HSL, dan RYB gaya pelukis, harmoni warna otomatis, plus konversi HEX, RGB, HSL, OKLCH, dan CMYK. Termasuk token Tailwind terdekat. Gratis.

URL: https://acrafto.com/id/pemilih-warna-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://en.wikipedia.org/wiki/RYB_color_model), 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](https://acrafto.com/id/konversi-gambar-ke-skala-abu-abu-online/).

## 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](https://tailwindcss.com/docs/colors), 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](https://bottosson.github.io/posts/oklab/) (dalam bahasa Inggris). Sintaks dan dukungan browsernya dirangkum di [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (dalam bahasa Inggris). Cara kerja model cetak dijelaskan di [Wikipedia tentang CMYK](https://id.wikipedia.org/wiki/Cyan_Magenta_Yellow_Key_%28skala_warna%29).

## 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](https://acrafto.com/id/pemilih-warna-gambar-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](https://en.wikipedia.org/wiki/ICC_profile) (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](https://developer.mozilla.org/en-US/docs/Web/API/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](https://acrafto.com/id/pemilih-warna-gambar-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.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))