Konverter warna (HEX, RGB, HSL)
Konversi warna antara HEX (#RRGGBB), RGB (0–255), dan HSL (hue, saturation, lightness) secara real time. Sesuaikan nilai pemilih atau ketik untuk melihat semua format diperbarui secara bersamaan — ideal untuk CSS, handoff Figma, dan pedoman merek.
Bagaimana mengkonversi warna
1. Pilih warna secara visual atau masukkan nilai HEX, RGB, atau HSL.
2. Lihat nilai setara dalam semua format yang didukung secara instan.
3. Sesuaikan kecerahan HSL untuk status hover sambil mempertahankan rona merek.
4. Salin format yang dibutuhkan tumpukan Anda (#hex untuk CSS, rgb() untuk browser modern).
Contoh konversi warna
Merek biru #2563EB
RGB RGB(37, 99, 235); HSL hsl(217, 84%, 53%). Gelapkan hover: hsl(217, 84%, 45%) tanpa menebak hex.
CSS rgb ke HEX untuk SVG
rgb(255, 87, 51) → #FF5733 untuk pengisian SVG dan sumber warna XML Android.
Abu-abu netral untuk batas
hsl(220, 10%, 90%) → abu-abu sejuk sangat terang; tingkatkan saturasi sedikit untuk latar belakang UI berwarna.
Kapan menggunakan alat ini
• Saat Anda menerjemahkan token desain antara HEX di Figma dan HSL dalam variabel CSS.
• Saat Anda membuat tema terang/gelap yang konsisten dengan menggeser kecerahan HSL.
• Saat Anda mendokumentasikan palet merek untuk pengembang dan pemasar.
Teori warna untuk pekerjaan UI
Warna komplementer berlawanan pada rona roda (terpisah 180°) — kontras tinggi, gunakan secukupnya untuk CTA. Warna analog (±30°) terasa serasi untuk dasbor. Chrome UI netral sering kali menggunakan warna biru atau abu-abu dengan saturasi rendah (hsl 220, 10%, 96%) daripada #EEE murni, yang dapat terlihat hangat/dingin di bawah layar berbeda. Batasi palet merek pada satu rona primer, 2–3 warna netral, dan hijau/merah semantik untuk status.
Pertanyaan yang sering diajukan
Apa gunanya HSL?
Menyesuaikan kecerahan dan saturasi sekaligus menjaga rona tetap stabil — misalnya. primer, primer-hover, primer-diredam dari satu nilai rona.
Singkatan HEX #RGB?
#F53 diperluas ke #FF5533. Kami menerima hex 3 atau 6 digit (opsional #).
sRGB vs tampilan-P3?
Alat ini menggunakan sRGB, standar untuk CSS web. Tampilan gamut lebar mungkin ditampilkan sedikit berbeda.
Alfa / transparansi?
HEX 8 digit (#RRGGBBAA) dan rgba() mungkin didukung jika alat menampilkan alfa — periksa kolom UI.
Mengapa jumlah RGB saya terlihat salah dalam hex?
Setiap saluran adalah 0–255 → dua digit hex. 255 = FF, bukan gabungan “255”.