Pemilih & Konverter Warna Hex (RGB, HSL, HSV, CMYK, OKLCH)

Konversi warna apa pun ke HEX, RGB, HSL, HSV, CMYK, dan OKLCH, periksa kontras, salin swatch harmoni, dan ekspor CSS atau JSON—langsung di browser Anda.

JavaScript diperlukan untuk fitur interaktif. Harap aktifkan JavaScript di browser Anda untuk menggunakan alat ini.

Nilai warna

Masukkan hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch(), atau nama warna CSS. Nilai tidak valid mempertahankan konversi terakhir yang benar.

Nama CSS terdekat: royalblue

Opasitas100%

Konversi

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

Kontras WCAG

Pada latar putih

3.68:1

Lulus WCAG AA (hanya teks besar)

Pada latar hitam

5.71:1

Lulus WCAG AA (teks normal)

Swatch harmoni

Jenis harmoni

Jumlah swatch

Strip tint/shade

Langkah tint/shade

Ekspor swatch

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

Pilih atau tempel format warna apa pun, konversikan ke HEX, RGB, HSL, HSV, CMYK, dan OKLCH, periksa kontras WCAG, hasilkan swatch harmoni, salin nilai, dan ekspor CSS atau JSON. Gratis, cepat, dan berjalan sepenuhnya di browser Anda.

Cara menggunakan pemilih warna ini

Ketik atau tempel format warna apa pun yang didukung, sesuaikan opasitas, atau gunakan pemilih bawaan. Halaman mengonversi ke HEX, RGB, HSL, HSV, CMYK, dan OKLCH secara instan, menampilkan kontras WCAG pada putih dan hitam, menghasilkan swatch harmoni dan strip tint/shade, serta menjaga semuanya siap disalin. Bagikan pengaturan Anda melalui URL—status disimpan dalam string kueri.

Referensi HEX, RGB, HSL, HSV, CMYK, dan OKLCH

Hex adalah pengodean RGB ringkas. RGB menjelaskan saluran merah/hijau/biru. HSL mengekspresikan rona, saturasi, dan kecerahan; HSV menggunakan rona, saturasi, dan nilai (kecerahan). CMYK memodelkan persentase tinta cetak. OKLCH adalah ruang warna CSS yang seragam secara perseptual. Alat ini menggunakan perhitungan deterministik di browser Anda—tanpa unggahan dan tanpa API eksternal.

Komplementer, analog, triadik, split-komplementer, tetradik, dan monokromatik

Komplementer memutar rona 180°. Analog melangkah rona dengan sudut tetap di sekitar dasar. Triadik menggunakan offset 120°. Split-komplementer menambahkan dua rona dekat komplemen. Tetradik menggunakan offset persegi panjang 90°. Monokromatik mempertahankan rona dan memvariasikan kecerahan. Kontrol jumlah berlaku untuk mode analog dan monokromatik.

Variabel CSS dan ekspor JSON

Ekspor menghasilkan properti kustom :root dengan nama stabil (misalnya --color-base, --color-analogous-1) dan JSON dengan baseHex, alpha, namedColor, mode harmoni, rasio kontras, dan daftar swatch untuk skrip atau token desain.

Pemeriksa kontras WCAG

Rasio kontras dihitung dari luminansi relatif menurut WCAG 2.x. AA memerlukan 4,5:1 untuk teks normal dan 3:1 untuk teks besar; AAA memerlukan 7:1. Gunakan pratinjau saat memilih warna teks atau UI pada latar terang atau gelap.

Pertanyaan yang Sering Diajukan

Format warna apa yang bisa saya masukkan?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch(), dan semua nama warna CSS standar seperti cornflowerblue atau rebeccapurple.

Apakah #ABC diperluas menjadi enam digit?

Ya. Hex tiga digit diperluas per pasangan digit, sehingga #ABC menjadi #AABBCC.

Apa yang terjadi jika warna saya tidak valid?

Anda melihat kesalahan sebaris. Warna valid terakhir tetap ada di baris konversi, pemilih, dan ekspor hingga Anda memasukkan nilai yang valid lagi.

Bagaimana cara kerja pemeriksa kontras WCAG?

Ia menghitung rasio kontras antara warna Anda dan putih atau hitam murni menggunakan luminansi relatif. Hasil menunjukkan apakah warna memenuhi ambang AA atau AAA untuk teks normal atau besar.

Bagaimana warna harmoni dihitung?

Bersifat deterministik: komplementer adalah pergeseran rona 180°; analog menggunakan langkah rona tetap; triadik offset 120°; split-komplementer rona dekat komplemen; tetradik offset persegi panjang 90°; monokromatik memvariasikan kecerahan sambil mempertahankan rona dan saturasi dasar.

Apa isi ekspor JSON?

Kunci stabil: baseHex, alpha, namedColor, harmony, harmonyCount jika berlaku, harmonySwatches, tintShadeStrip, stripCount, dan rasio kontras—cocok untuk alat atau dokumentasi.

Bisakah saya membagikan warna saya?

Ya. URL diperbarui dengan hex, alpha, mode harmoni, jumlah, dan ukuran strip sehingga Anda dapat menandai atau membagikan pengaturan yang tepat.