Konverter warna

Konversi nilai HEX, RGB, HSL, dan HSV

Konversi nilai warna HEX, RGB, HSL, dan HSV
Input warna
Pratinjau warna
Format
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)

Panduan alat

Tentang Konverter warna

Konverter Warna mengubah nilai warna antara HEX, RGB, HSL, dan HSV untuk CSS antarmuka, serah terima desain, dan pembersihan token tema.

Masukkan #4f46e5, rgb(...), atau hsl(...) untuk normalisasi ke formats yang bisa disalin.

Cara memakai Konverter Warna

  1. Tempel nilai HEX, RGB, RGBA, HSL, atau HSLA.
  2. Convert lalu periksa keluaran HEX, RGB, HSL, dan HSV.
  3. Gunakan swatch preview, lalu salin satu format atau semua format.

Kapan dipakai

  • Mengubah design HEX nilai menjadi CSS rgb() atau hsl().
  • Menyesuaikan lightness dan saturation di HSL saat menguji hover states.
  • Menormalisasi nilai token warna saat membersihkan theme.

Format warna dan catatan

HEX, RGB, HSL, dan HSV menjelaskan color yang sama lewat koordinat yang berbeda. Converter ini mempertahankan warna RGB; kanal alfa dari RGBA atau HSLA masukan diterima tetapi tidak disimpan di keluaran.

  • HEX 3 digit diperluas menjadi HEX 6 digit.
  • RGB channels harus antara 0 dan 255.
  • HSL memakai percentages untuk S/L dan hue berputar 0 sampai 360 degrees.
  • HSV umum di picker, sedangkan HSL sering lebih mudah untuk CSS theme tuning.

Pertanyaan umum tentang Konverter warna

Bisa HEX to RGB dan RGB to HEX?
Ya. HEX masukan menghasilkan RGB/HSL/HSV, dan RGB masukan menghasilkan HEX/HSL/HSV.
Mengapa alpha hilang dari hasil?
Alat ini fokus pada opaque color conversion, jadi RGBA/HSLA alpha diabaikan.
Apakah colors saya diunggah?
Tidak. Parsing, conversion, preview, dan copy berjalan lokal di peramban.

Color conversion dan readability

Mengganti format tidak menjamin contrast. Sebelum dipakai untuk teks, buttons, atau links, uji di background nyata untuk WCAG contrast, brand fit, dan UI states.

Cara memilih CSS color format

Warna yang sama bisa ditulis sebagai HEX, RGB, HSL, atau HSV, tetapi tiap format cocok untuk tugas maintenance berbeda.

  • Gunakan HEX untuk serah terima desain yang compact dan token tema yang stabil.
  • Gunakan CSS rgb() atau hsl() saat memerlukan transparansi, variabel, atau komposisi dinamis.
  • Gunakan HSL untuk hover, active, varian yang lebih terang atau lebih gelap karena hue, saturation, dan lightness lebih mudah dipikirkan daripada RGB mentah.

Accessibility checks sebelum merilis warna

Color conversion menjaga nilai tetap ekuivalen, tetapi tidak membuktikan readability, state clarity, atau contrast compliance.

  • Cek body teks dan button teks di background sebenarnya dengan WCAG contrast rules.
  • Jangan menyampaikan error, success, atau disabled state hanya dengan warna; tambahkan teks, icons, atau shape changes.
  • Saat memakai brand colors untuk links atau focus rings, cek juga hover, active, disabled, dan selected states.