Generator dan Konverter Kode Warna

Pilih warna atau masukkan kode HEX — dapatkan HEX, RGB, HSL, nama CSS, dan warna komplementer seketika.

Hasil instan Berjalan di browser
Kode HEX
#3D7EF7
Nilai RGB
rgb(61, 126, 247)
Nilai HSL
hsl(218, 91%, 60%)
Nama CSS
—
Warna Komplementer
#F7823D

Model Warna

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: standar web. RGB: berbasis layar. HSL: hue-saturasi-kecerahan, intuitif untuk desainer.

Cara menggunakan?

  1. 1
    Pilih WarnaKlik color picker atau masukkan kode HEX langsung (contoh: #FF5733).
  2. 2
    Lihat NilaiHEX, RGB, dan HSL dihitung seketika; nama CSS dan warna komplementer ditampilkan otomatis.
  3. 3
    SalinSalin kode warna yang diinginkan ke clipboard dengan satu klik.

Pertanyaan umum

Apa itu kode warna HEX?
Nilai heksadesimal 6 digit dalam format #RRGGBB. Setiap pasang mewakili intensitas saluran warna (Merah, Hijau, Biru) dari 00 hingga FF (0–255), memungkinkan 16.777.216 warna.
RGB atau HSL — mana yang harus digunakan?
RGB sesuai dengan hardware layar dan banyak digunakan dalam CSS. HSL lebih intuitif untuk desainer: ubah kecerahan tanpa mengubah hue. Keduanya didukung penuh dalam CSS modern.
Apa kegunaan warna komplementer?
Warna komplementer berada 180° di seberang roda warna dan menciptakan kontras maksimum — ideal untuk tombol CTA dan visualisasi data.

Kode Warna di Web: HEX, RGB dan HSL

Dalam pengembangan web, warna didefinisikan terutama melalui tiga format: HEX, RGB, dan HSL. Alat ini mengonversi warna apa pun secara instan ke ketiga format dan juga menampilkan nama CSS dan warna komplementer.

Kode Warna HEX

HEX adalah format warna paling umum di web. Ditulis sebagai #RRGGBB, setiap pasang menunjukkan intensitas saluran (Merah, Hijau, Biru) dari 00 hingga FF (0–255). Dengan 256 nilai per saluran, HEX mendukung 16.777.216 warna. Notasi singkat #RGB juga valid.

Model Warna RGB

RGB mencerminkan struktur fisik layar. Setiap saluran mengambil nilai 0–255. Dalam CSS: rgb(255, 87, 51) atau dengan transparansi rgba(255, 87, 51, 0.8).

Model Warna HSL

HSL (Hue-Saturasi-Kecerahan) lebih intuitif untuk desainer. Membuat variasi terang atau gelap mudah: pertahankan hue dan saturasi, sesuaikan kecerahan saja.

Warna Komplementer

Warna komplementer berjarak 180° di roda warna: Merah ↔ Cyan, Hijau ↔ Magenta, Biru ↔ Kuning. Menciptakan kontras maksimum untuk tombol CTA dan visualisasi data.

Aksesibilitas Web (WCAG)

Sekitar 8% pria memiliki buta warna. WCAG 2.1 AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal. Jangan sampaikan informasi hanya melalui warna.

Privasi

Semua perhitungan dilakukan secara lokal di browser Anda. Tidak ada data yang dikirim ke server.

Komentar