Konverter Warna HEX ke RGB

Apa Itu Kode Warna HEX?

Kode warna HEX adalah string alfanumerik enam karakter yang digunakan dalam desain web dan grafis digital untuk mewakili warna tertentu.#RRGGBB, di mana setiap pasangan dua karakter mengkode intensitas salah satu dari tiga warna primer aditif - merah (RR), hijau (GG), dan biru (BB) - menggunakan notasi heksadesimal (basis 16).00(intensitas nol) sampaiFF(intensitas maksimum, setara dengan 255 dalam desimal).

Kode HEX berasal dari kebutuhan untuk mendefinisikan warna dalam HTML dan CSS tanpa bergantung pada kata kunci warna yang diberi nama. Sementara CSS sekarang mendukung beberapa format warna termasukrgb(), hsl(), danoklch(), HEX tetap menjadi notasi yang paling banyak digunakan dalam pengembangan front-end, penyerahan desain, dan pedoman branding.

Jumlah total warna unik yang dapat direpresentasikan dengan kode HEX enam digit adalah 16.777.216 (256 x 256 x 256). Ini sering disebut sebagai "True Color" atau "warna 24 bit", yang cocok dengan kedalaman warna dari sebagian besar layar modern. Setiap saluran mendapatkan 8 bit (satu byte), dan tiga saluran bersama-sama menghasilkan 24 bit data warna.

Kode HEX tidak sensitif terhadap huruf besar, jadi#ff8000dan#FF8000Beberapa panduan gaya lebih suka huruf besar untuk keterbacaan, sementara minifier CSS sering output huruf kecil untuk menyimpan byte - meskipun dalam prakteknya perbedaannya dapat diabaikan.

Cara Mengkonversi HEX ke RGB Langkah demi Langkah

Mengkonversi kode warna HEX ke setara RGB-nya mudah. Prosesnya melibatkan pembagian string enam karakter menjadi tiga pasang dan mengkonversi setiap pasangan dari heksadesimal (basis 16) ke desimal (basis 10). Berikut adalah metode langkah demi langkah:

1. Hapus simbol hash.Jika kode HEX dimulai dengan#Sebagai contoh,#1A2B3Cmenjadi1A2B3C.
2. Berbagi menjadi tiga pasang.Bagilah string yang tersisa menjadi tiga kelompok dari dua karakter:1A, 2B, 3C.
3. Ubah setiap pasangan menjadi desimal.Gunakan sistem nilai tempat heksadesimal di mana digit pertama dikalikan dengan 16 dan digit kedua ditambahkan:
   • Merah:1A-> (1 x 16) + 10 =26
   • Hijau:2B-> (2 x 16) + 11 =43
   • Biru:3C-> (3 x 16) + 12 =60
4. Tuliskan nilai RGB.Gabungkan tiga nilai desimal:rgb(26, 43, 60).

Angka heksadesimal dan setara desimalnya adalah: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memori A sampai F adalah satu-satunya bagian yang berbeda dari aritmatika desimal standar.

Untuk konversi program, kebanyakan bahasa menawarkan built-in fungsi.parseInt("1A", 16)kembali26Dalam Python,int("1A", 16)CSS sendiri menangani kedua format secara asli, jadi konversi terutama berguna ketika Anda perlu memanipulasi saluran warna individu dalam kode -- misalnya, menyesuaikan kecerahan, membuat gradien secara program, atau mencampur dua warna.

Kode HEX 3 digit vs 6 digit

CSS mendukung format singkat 3 digit HEX (#RGB) sebagai kenyamanan ketika masing-masing dari tiga pasangan terdiri dari digit yang identik. Dalam singkatan ini, setiap digit tunggal diperluas dengan menggandakan. Misalnya:

• #F80berkembang menjadi#FF8800-> rgb{255, 136, 0)
• #FFFberkembang menjadi#FFFFFF-> rgb ((255, 255, 255)
• #000berkembang menjadi#000000-> rgb ((0, 0, 0)
• #09Cberkembang menjadi#0099CC-> rgb{0, 153, 204)
• #A3Fberkembang menjadi#AA33FF-> rgb{170, 51, 255)

Notasi 3-digit mengurangi jumlah warna yang tersedia dari 16,7 juta menjadi hanya 4.096 (16 x 16 x 16), sehingga tidak dapat mewakili setiap warna.

CSS juga mendukung 4 digit (#RGBA) dan 8 digit (#RRGGBBAA) Kode HEX yang mencakup saluran alpha (transparansi). Nilai alpha mengikuti logika heksadesimal yang sama:FFbenar-benar buram dan00adalah sepenuhnya transparan.#FF880080mewakili warnargb(255, 136, 0)Konverter kami berfokus pada format 3 dan 6 digit standar; jika Anda memasukkan kode dengan saluran alpha, itu hanya akan memproses bagian RGB.

HEX ke RGB Tabel Referensi

Di bawah ini adalah tabel referensi warna HEX umum dan setara RGB mereka. tabel ini mencakup warna yang paling sering digunakan dalam desain web, CSS bernama warna, dan pilihan palet merek populer.

CSS mendefinisikan 147 nama warna secara total, masing-masing dengan nilai HEX yang sesuai. Sementara nama warna yang nyaman untuk prototipe, proyek profesional biasanya mengandalkan nilai HEX atau RGB untuk presisi dan konsistensi di seluruh browser dan alat desain.

Warna Merek Populer - Nilai HEX dan RGB

Pengembang dan desainer sering membutuhkan nilai HEX dan RGB yang tepat dari warna merek populer untuk mockup, integrasi, dan panduan gaya.

Pedoman merek sering menentukan warna dalam beberapa format (HEX, RGB, CMYK, Pantone). Saat menerapkan warna merek dalam CSS, selalu konfirmasi nilai terhadap halaman sumber daya merek resmi untuk memastikan akurasi. Warna dapat bergeser sedikit di antara layar, sehingga konsistensi dalam kode sangat penting.

Perbandingan Model Warna: HEX, RGB, HSL, dan CMYK

Memahami kapan menggunakan setiap model warna membantu Anda bekerja lebih efisien di berbagai alat dan media:

HEX dan RGB secara matematis identik-- mereka mewakili ruang warna yang sama menggunakan notasi yang berbeda. Konversi di antara mereka adalah translasi dasar-16 ke dasar-10 sederhana tanpa kehilangan presisi atau perbedaan gamut. HSL, di sisi lain, adalah transformasi RGB menjadi sistem koordinat silinder yang memudahkan penalaran tentang hue, saturasi, dan ringan secara independen. CMYK adalah model warna subtraktif yang digunakan dalam pencetakan dan tidak dapat mewakili semua warna RGB (dan sebaliknya), sehingga konversi antara RGB dan CMYK adalah perkiraan.

Dalam CSS modern (Level 4),color()fungsi dan ruang warna baru sepertioklch()dandisplay-p3Namun, HEX dan RGB tetap menjadi dasar untuk kompatibilitas web dan didukung oleh setiap browser yang digunakan saat ini.

Menggunakan HEX dan RGB dalam CSS dan JavaScript

Kedua nilai HEX dan RGB berlaku dalam CSS dan menghasilkan hasil yang identik. Berikut adalah contoh praktis bagaimana masing-masing format digunakan:

Deklarasi CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Fungsi konversi JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Ketika bekerja dengan HTML Canvas API, warna sering harus ditetapkan sebagai string."#FF8000"dan"rgb(255, 128, 0)"bekerja untukfillStyledanstrokeStyleNamun,getImageData()metode mengembalikan data piksel sebagai array 0 - 255 bilangan bulat (RGBA), membuat RGB format alami untuk manipulasi tingkat piksel.

Dalam CSS custom properties (variabel), nilai-nilai HEX biasanya disimpan untuk kesederhanaan:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Pola menyimpan nilai saluran RGB mentah sebagai variabel CSS ini adalah teknik populer yang memungkinkan Anda menerapkan opacity secara dinamis tanpa mengkonversi antara format pada saat runtime.

Aksesibilitas dan Kontras Warna

Konversi HEX ke RGB seringkali merupakan langkah pertama dalam menghitung rasio kontras warna untuk kepatuhan aksesibilitas.4,5:1untuk teks normal dan3: 1untuk teks besar (18px+ tebal atau 24px+ biasa).

Rumus rasio kontras membutuhkanluminansi relatifdari setiap warna, yang dihitung dari nilai RGB linier. Langkah-langkahnya adalah:

1. Mengkonversi HEX ke RGB (0 - 255 per saluran).
2. Normalisasi setiap saluran ke 0 - 1 dengan membagi dengan 255.
3. Terapkan rumus linearisasi sRGB: jika nilai <= 0,04045, bagi dengan 12,92; jika tidak, hitung ((nilai + 0,055) / 1,055) ^ 2.4.
4. Hitung luminansi: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Hitung rasio kontras antara dua warna: (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah warna yang lebih terang.

Seperti yang Anda lihat, nilai RGB adalah input penting untuk setiap perhitungan kontras aksesibilitas. Alat seperti WebAIM Contrast Checker, Chrome DevTools color picker, dan scanner aksesibilitas kapak semua melakukan konversi ini secara internal.

Untuk desainer, aturan praktis yang cepat: teks gelap pada latar belakang terang (atau sebaliknya) dengan perbedaan luminansi setidaknya 125 dan perbedaan warna setidaknya 500 (menggunakan jumlah perbedaan mutlak di seluruh R, G, B saluran) umumnya akan lulus standar WCAG AA.