Color Picker & Converter

Color Picker & Converter

Pilih secara visual atau tempel nilai apa pun — HEX, RGB, HSL, OKLCH, dan OKLAB tetap selaras. Termasuk pemeriksa kontras WCAG 2.2 dan generator palet berbasis OKLCH. Berjalan sepenuhnya di browser Anda.

Color Picker & Converter — TL;DR

Pilih secara visual atau tempel nilai apa pun — HEX, RGB, HSL, OKLCH, dan OKLAB tetap selaras. Termasuk pemeriksa kontras WCAG 2.2 dan generator palet berbasis OKLCH. Berjalan sepenuhnya di browser Anda.

Tempel nilai hex Anda (mis. #ff5722) ke kolom HEX — baris RGB akan diperbarui secara instan. Demikian pula, tempel rgb(255 87 34) ke kolom RGB dan HEX, HSL, OKLCH, serta OKLAB akan ikut selaras. Konversi bersifat dua arah di setiap format yang didukung.

OKLCH adalah ruang warna CSS Color Module Level 4 yang menggunakan lightness persepsi (L), chroma (C), dan hue (h) — seperti HSL, tetapi seragam secara persepsi. Dua warna OKLCH dengan nilai L yang sama tampak sama terangnya, bahkan pada hue yang berbeda. Ini membuat token desain, palet yang dihasilkan, dan ramp warna yang aksesibel jauh lebih dapat diprediksi dibanding HSL. Semua browser evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) mendukungnya.

Nilai warna tidak pernah meninggalkan perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama konversi, pemilihan, pembuatan palet, atau pemeriksaan kontras.

HEX
RGB
HSL
OKLCH
OKLAB
Bernama

Palet

Kontras WCAG 2.2

Teks
Latar belakang
—
Pratinjau
Sampel heading besar
Sampel teks isi — rubah cokelat cepat melompati anjing pemalas.

Dirancang untuk alur kerja nyata

Dari design system hingga audit aksesibilitas — setiap format dan pemeriksaan yang Anda butuhkan, dalam satu tempat.

Enam ruang warna

Konversi bolak-balik antara HEX (3 / 4 / 6 / 8 digit), RGB(A), HSL(A), OKLCH, OKLAB, dan warna bernama CSS. String output sesuai sintaks CSS Color Module Level 4 — tempel langsung ke stylesheet Anda.

Pemeriksa kontras WCAG 2.2

Lihat rasio kontras antara dua warna dengan badge lulus/gagal sekali klik untuk AA (4.5 : 1) dan AAA (7 : 1), pada ukuran teks normal maupun besar. Perhitungan sesuai referensi W3C: linearisasi sRGB, luminans relatif, lalu (L1+0.05)/(L2+0.05).

EyeDropper — ambil sampel piksel apa pun

Klik eyedropper untuk mengambil sampel warna mana pun di layar Anda — desain, tangkapan layar, foto, bahkan tab browser lain. Menggunakan EyeDropper API native pada browser Chromium.

Palet berbasis OKLCH

Hasilkan 9 langkah tints dan shades plus harmoni komplementer, triadic, dan analog — diturunkan dalam OKLCH sehingga setiap langkah memiliki jarak persepsi yang merata (tidak seperti HSL, di mana lightness berubah-ubah).

Privasi sejak awal

Setiap konversi berjalan dalam JavaScript di perangkat Anda. Tidak ada yang diunggah, dicatat, atau dikirim ke pihak ketiga — buka DevTools → Network jika Anda ingin memverifikasinya sendiri.

Dibangun untuk kecepatan

JavaScript murni, tanpa runtime framework. Cold load di bawah 50 KB gzip; konversi dan pembuatan palet selesai dalam waktu kurang dari satu milidetik di laptop berusia lima tahun.

Cara menggunakan pemilih warna

Empat cara untuk memulai, setiap format selaras.

  1. 1

    Pilih secara visual

    Seret di dalam kotak saturasi/value untuk memilih shade, geser bilah hue di bawah untuk mengubah warna dasar, dan gunakan slider alpha untuk transparansi. Setiap format di sebelah kanan diperbarui secara instan.

  2. 2

    Tempel nilai apa pun

    Tempel HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)), atau bahkan warna bernama CSS (tomato) ke input yang sesuai — pemilih dan format lain semuanya akan ikut selaras.

  3. 3

    Ambil sampel dengan eyedropper

    Klik tombol eyedropper untuk menangkap piksel apa pun di layar Anda — tab lain, tangkapan layar, foto, ikon. Menggunakan EyeDropper API native di Chrome, Edge, dan Opera.

  4. 4

    Salin atau periksa kontras

    Klik ikon salin di samping format mana pun untuk menyalinnya ke clipboard. Atau gulir ke bagian kontras WCAG 2.2 untuk memeriksa apakah kombinasi foreground / background Anda lulus AA atau AAA pada ukuran teks normal dan besar.

Dibangun untuk desainer, developer, dan auditor aksesibilitas

Alat warna yang cocok untuk empat alur kerja umum.

Penyusunan token design system

Konversi nilai HEX brand ke OKLCH sehingga setiap shade dalam ramp token Anda memiliki langkah lightness persepsi yang sama. Tempel output OKLCH langsung ke CSS Anda — tidak perlu preprocessor.

Audit aksesibilitas WCAG

Masukkan pasangan foreground / background dan baca rasio kontras plus badge AA / AAA. Tangkap kombinasi yang gagal sebelum dirilis — memenuhi ambang batas yang diwajibkan W3C 4.5 : 1 normal / 7 : 1 enhanced.

Konversi CSS front-end

Punya HEX dari mockup desainer tetapi butuh HSL untuk konfigurasi Tailwind atau OKLCH untuk stylesheet modern? Tempel sekali, salin dalam format apa pun. String output adalah sintaks CSS Color Module Level 4 yang valid.

Eksplorasi palet

Pilih warna dasar dan langsung lihat sembilan tints dan shades dengan jarak persepsi yang merata plus harmoni komplementer, triadic, dan analog — dihasilkan dalam OKLCH sehingga setiap langkah tampak sama terangnya.

100% privat — berjalan di browser Anda

Nilai warna tidak pernah meninggalkan perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama konversi, pemilihan, pembuatan palet, atau pemeriksaan kontras.

  • Setiap konversi (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) berjalan sebagai JavaScript di mesin Anda — rumusnya terlihat di sumber halaman.
  • EyeDropper API hanya mengembalikan warna yang Anda klik secara eksplisit; browser menangani izin dan tidak pernah membiarkan halaman melihat piksel sembarangan.
  • Tanpa login, tanpa telemetri pada nilai warna, tanpa API warna pihak ketiga. Situs ini mematuhi GDPR sejak awal.

Panduan terkait

Tutorial pilihan untuk desainer, developer, dan tim aksesibilitas.

Pertanyaan umum

Bagaimana cara mengonversi HEX ke RGB?

Tempel nilai hex Anda (mis. #ff5722) ke kolom HEX — baris RGB akan diperbarui secara instan. Demikian pula, tempel rgb(255 87 34) ke kolom RGB dan HEX, HSL, OKLCH, serta OKLAB akan ikut selaras. Konversi bersifat dua arah di setiap format yang didukung.

Apa itu OKLCH dan mengapa saya harus menggunakannya?

OKLCH adalah ruang warna CSS Color Module Level 4 yang menggunakan lightness persepsi (L), chroma (C), dan hue (h) — seperti HSL, tetapi seragam secara persepsi. Dua warna OKLCH dengan nilai L yang sama tampak sama terangnya, bahkan pada hue yang berbeda. Ini membuat token desain, palet yang dihasilkan, dan ramp warna yang aksesibel jauh lebih dapat diprediksi dibanding HSL. Semua browser evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) mendukungnya.

Apakah hasil kontras WCAG dapat diandalkan?

Ya. Kami menggunakan algoritma dari WCAG 2.2 §1.4.3: linearisasi setiap kanal sRGB, hitung luminans relatif (0.2126·R + 0.7152·G + 0.0722·B), lalu (L_lighter + 0.05) / (L_darker + 0.05). AA lulus pada 4.5 : 1 untuk teks normal dan 3 : 1 untuk teks besar (18 pt+ atau 14 pt+ tebal). AAA lulus pada 7 : 1 dan 4.5 : 1 berturut-turut.

Bisakah saya mengambil sampel warna dari gambar atau aplikasi lain?

Ya — klik tombol Eyedropper untuk meluncurkan EyeDropper API bawaan browser. Anda bisa mengambil sampel piksel apa pun di mana saja di layar: tab browser lain, desain Figma, frame video, bahkan tangkapan layar. Saat ini didukung di Chrome, Edge, dan Opera; Firefox dan Safari menangani fallback dengan baik (tombol dinonaktifkan).

Apakah ada yang dikirim ke server Anda?

Tidak. Pemilih, setiap konversi, generator palet, dan pemeriksa kontras semuanya berjalan di browser Anda. Tidak ada nilai warna, sampel gambar, atau teks yang pernah dikirim. Anda dapat membuka DevTools → Network dan memverifikasi tidak ada permintaan keluar selama penggunaan.