🎨 Konverter Warna

Alat konversi warna lengkap untuk desainer web dan developer. Ubah berbagai format warna seperti HEX, RGB, HSL, HSV secara real-time dan lihat pratinjaunya seketika. Temukan warna yang Anda inginkan secara intuitif dengan pemilih warna dan slider, atau bekerja cepat dengan warna preset.

Pilih Warna

Merah (0-255) — 102

Hijau (0-255) — 126

Biru (0-255) — 234

HEX

—

RGB

—

HSL

—

CMYK

—

Harmoni Warna

Komplementer

Analog

Triadik

Komplementer Terbelah

Warna Preset

PANDUAN

Pelajari lebih lanjut

Apa itu Konversi Kode Warna?

Konversi kode warna adalah proses menerjemahkan antarformat representasi warna yang berbeda (HEX, RGB, HSL, HSV) yang digunakan dalam desain digital. Ini penting dalam desain web, desain grafis, dan pengembangan aplikasi. Setiap format kode warna memiliki keunggulan tersendiri, sehingga penting untuk memilih format yang tepat sesuai kebutuhan Anda.

Format Kode Warna Utama

HEX: format #RRGGBB, paling banyak digunakan di web (misalnya, #FF0000 adalah merah). RGB: format rgb(255, 0, 0), rentang 0-255 per kanal, mendukung transparansi (rgba). HSL: format hsl(0, 100%, 50%), penyesuaian intuitif melalui hue/saturation/lightness. HSV: Mirip HSL tetapi perhitungan kecerahannya berbeda, terutama digunakan dalam software desain.

Aplikasi Desain Web

Kode HEX paling umum digunakan dalam CSS (seperti warna merek seperti #3498db), sementara RGB berguna untuk kontrol warna dinamis dengan JavaScript. HSL sangat praktis saat membuat tema warna - dengan hanya mengubah Hue sambil mempertahankan saturation dan lightness, Anda bisa dengan mudah membuat palet warna yang konsisten.

Aksesibilitas dan Kontras Warna

Menurut panduan aksesibilitas WCAG, kontras warna antara teks dan latar belakang sangat penting. Teks normal memerlukan rasio kontras minimum 4.5:1, sedangkan teks besar memerlukan 3:1. Saat menggunakan konverter warna, Anda bisa menyesuaikan nilai Lightness untuk memastikan kontras yang tepat demi keterbacaan yang lebih baik.

Harmoni Warna dan Palet

Metode untuk membuat palet warna yang harmonis: Monokromatik: Ubah hanya Saturation/Lightness dengan Hue yang sama. Analog: Variasikan Hue dalam 30 derajat. Komplementer: Hue berlawanan pada 180 derajat. Triadik: Tempatkan Hue berjarak 120 derajat (0°, 120°, 240°).

Tips Alat Konversi Warna

Tahap desain: Gunakan HSL untuk memilih warna (intuitif). Penulisan CSS: Gunakan HEX atau RGB. Animasi JavaScript: RGB/RGBA (kontrol opacity). Pembuatan palet: HSL (variasi berbasis Hue). Kompatibilitas browser: HEX paling aman. Penyimpanan warna: Dokumentasikan dalam semua format.

Pertanyaan umum

Format apa yang sebaiknya saya gunakan di CSS: HEX, RGB, atau HSL?

Ketiganya merepresentasikan warna yang sama, jadi semuanya bisa digunakan. HEX umum untuk warna merek yang tetap, RGBA saat Anda butuh transparansi, dan HSL nyaman saat ingin menyesuaikan lightness atau saturation sambil mempertahankan hue yang sama.

Apakah mengonversi kode warna mengubah warna aslinya?

Tidak, yang berubah hanya cara warna yang sama ditulis. Warna yang ditampilkan di layar tetap sama, meskipun pembulatan saat konversi HSL/RGB bisa menimbulkan sedikit perbedaan nilai.

Bagaimana warna komplementer dihitung?

Warna komplementer menambahkan 180 derajat ke nilai Hue dalam HSL, sehingga menghasilkan warna yang tepat berlawanan pada roda warna. Saturation dan Lightness tetap sama, jadi nadanya tetap selaras dengan warna asli.

Warna apa jika R, G, dan B sama (misalnya, 128,128,128)?

Nilai R, G, B yang sama berarti saturation nol, yaitu nuansa abu-abu. 0 adalah hitam, 255 adalah putih, dan semuanya di antaranya adalah abu-abu dengan tingkat kecerahan berbeda.

Apa yang harus saya periksa untuk kontras teks?

Bandingkan nilai Lightness pada warna teks dan latar belakang. Teks normal harus memiliki rasio kontras minimal 4.5:1 terhadap latar belakangnya.