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

Konversi hex ke RGB, HSL, dan HSV, salin contoh 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.

Warna hex

Masukkan #RGB atau #RRGGBB (dengan atau tanpa #). Nilai yang tidak valid mempertahankan konversi terakhir yang baik.

Konversi

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Contoh harmoni

Tipe harmoni

Jumlah sampel

Strip warna / peneduh

Langkah-langkah pewarnaan/peneduhan

Ekspor contoh

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",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Pilih atau tempel warna hex, konversikan ke RGB, HSL, dan HSV, buat contoh komplementer/analog/triadik/monokrom, salin nilai, dan ekspor CSS atau JSON. Gratis, cepat, dan berjalan sepenuhnya di browser Anda.

Cara menggunakan pemilih warna hex ini

Ketik atau tempelkan nilai hex, atau gunakan pemilih asli. Halaman ini mengubahnya menjadi RGB, HSL, dan HSV secara instan, menghasilkan contoh harmoni dan strip warna/warna, dan membuat semuanya siap untuk disalin. Bagikan penyiapan Anda dengan URL—status disimpan dalam string kueri.

Referensi hex, RGB, HSL, dan HSV

Hex adalah pengkodean RGB yang ringkas. RGB menjelaskan saluran merah/hijau/biru. HSL mengekspresikan rona, saturasi, dan kecerahan; HSV menggunakan hue, saturation, dan value (kecerahan). Alat ini menggunakan matematika deterministik di browser Anda—tanpa unggahan dan tanpa API eksternal.

Komplementer, analog, triadik, dan monokromatik

Komplementer memutar rona 180°. Langkah-langkah serupa diwarnai dengan sudut tetap di sekitar alas Anda. Triadic menggunakan offset 120°. Monokromatik mempertahankan rona dan memvariasikan kecerahan. Kontrol penghitungan berlaku untuk mode analog dan monokromatik.

Variabel CSS dan ekspor JSON

Ekspor menghasilkan :root properti khusus dengan nama stabil (misalnya --color-base, --color-analogous-1) dan JSON dengan baseHex, mode harmoni, dan daftar contoh untuk skrip atau token desain.

Pertanyaan yang Sering Diajukan

Apakah #ABC bertambah menjadi enam digit?

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

Apa yang terjadi jika hex saya tidak valid?

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

Bagaimana cara menghitung warna harmoni?

Mereka bersifat deterministik: saling melengkapi adalah perubahan warna 180° di HSL; analogi menggunakan langkah rona tetap; triadic menggunakan offset 120°; monokromatik memvariasikan kecerahan sambil menjaga rona dan saturasi dari dasar.

Apa yang ada dalam ekspor JSON?

Kunci stabil: baseHex, Harmony, HarmonyCount jika memungkinkan, HarmonySwatches (string hex), tintShadeStrip, dan stripCount—cocok untuk perkakas atau dokumentasi.

Bisakah saya membagikan warna saya?

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