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. HSL membuat penyesuaian intuitif (lebih terang/lebih gelap tanpa perubahan rona) lebih mudah daripada mengedit digit hex.
Warna
Hasil
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
Kapan harus memilih sesuatu yang lain
• Jika Anda harus memverifikasi kontras WCAG — gunakan pemeriksa kontras.
• Saat Anda memerlukan CMYK atau Pantone untuk mencetak — gunakan alat khusus pencetakan.
• Saat Anda membuat gradien penuh — gunakan generator gradien CSS.
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.
Aksesibilitas dimulai saat konversi
Warna ungu #7C3AED yang indah di atas putih mungkin gagal kontras untuk teks kecil. Setelah memilih warna di sini, jalankan pasangan latar depan/latar belakang melalui pemeriksa kontras. Lebih suka penyesuaian HSL untuk memperbaiki kegagalan: menggelapkan teks atau mencerahkan latar belakang sambil mempertahankan rona. Jangan mengandalkan warna saja untuk kesalahan — pasangkan dengan ikon dan label (WCAG 1.4.1).
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”.
Apakah data dikirim ke server?
Tidak.
Apakah alat ini gratis?
Ya.