Color Picker Kode Warna Hex

Q: Nama warna CSS apa saja yang didukung?

Semua 148 nama warna dari CSS Color Module, mulai dari aliceblue hingga yellowgreen , termasuk rebeccapurple . Ketik nama warna di kolom hex atau filter daftar di bawah alat ini, lalu klik warna untuk memilihnya.

Klik kotak warna untuk memilih warna, atau ketik kode hex maupun nama warna CSS. Anda langsung mendapatkan semua format warna, tint, shade, dan harmoni yang serasi, serta cek kontras WCAG instan untuk teks putih dan hitam.

#7C3AEDKlik untuk memilih warna

Kode warna hex

HEX
RGB
HSL
HSV
CMYK
Nama CSS

Tint dan shade

Klik kotak warna untuk menyalin kode hex-nya.

Harmoni warna

Kontras dan aksesibilitas (WCAG)

Teks putih di atas warna ini

Teks hitam di atas warna ini

Nama warna CSS

Filter nama warna

Privasi terjaga: data Anda diproses di browser Anda dan tidak pernah diunggah.

Cara memakai color picker hex

Klik kotak warna besar untuk membuka pemilih warna bawaan sistem, atau ketik kode hex seperti #1E90FF atau nama seperti tomato.
Salin format yang Anda perlukan: HEX, RGB, HSL, HSV, atau CMYK. Klik kotak tint, shade, atau harmoni mana pun untuk menyalin kode hex-nya.
Periksa kotak kontras untuk melihat apakah teks putih atau hitam di atas warna Anda memenuhi WCAG level AA atau AAA.

Cara kerja kode warna hex

Kode warna hex seperti #FF6347 berisi tiga byte: merah (FF = 255), hijau (63 = 99), dan biru (47 = 71). Setiap kanal bernilai dari 00 hingga FF, sehingga tersedia 256 × 256 × 256 = 16.777.216 kemungkinan warna. Nilai yang sama menghasilkan abu-abu – #000000 adalah hitam, #808080 abu-abu sedang, dan #FFFFFF putih – sedangkan nilai yang lebih tinggi membuat warna lebih terang.

Tint, shade, dan harmoni warna

Tint adalah warna Anda yang dicampur putih, sedangkan shade adalah warna Anda yang dicampur hitam. Color picker ini menampilkan keduanya dalam langkah 10%, praktis untuk efek hover, border, dan latar belakang yang serasi dengan warna brand.

Harmoni warna memutar hue di sepanjang roda warna dengan tetap mempertahankan saturasi dan kecerahan:

Komplementer (180°) – warna yang berseberangan, untuk kontras kuat dan tombol call to action.
Analog (±30°) – warna yang bersebelahan di roda warna, untuk palet yang tenang dan selaras.
Triadik (±120°) – tiga warna dengan jarak yang sama, untuk desain yang cerah namun seimbang.

Kontras warna dan WCAG

Web Content Accessibility Guidelines (WCAG) mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal (level AA) dan 7:1 untuk level AAA. Teks besar – 18 pt, atau 14 pt tebal – cukup 3:1 untuk AA. Rasio ini membandingkan luminans relatif warna teks dan latar belakang, dengan rentang dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih).

Pertanyaan yang sering diajukan

Apa itu kode warna hex?

Kode warna hex menggambarkan warna dengan enam digit heksadesimal: dua untuk merah, dua untuk hijau, dan dua untuk biru, misalnya #FF6347 (tomato). CSS, HTML, aplikasi desain, dan editor gambar semuanya mengenalinya.

Berapa banyak warna yang bisa diwakili kode hex?

256 × 256 × 256 = 16.777.216 warna. Dengan pasangan alpha tambahan (#RRGGBBAA), setiap warna juga bisa memiliki 256 tingkat transparansi.

Nama warna CSS apa saja yang didukung?

Semua 148 nama warna dari CSS Color Module, mulai dari aliceblue hingga yellowgreen, termasuk rebeccapurple. Ketik nama warna di kolom hex atau filter daftar di bawah alat ini, lalu klik warna untuk memilihnya.