Konversi Warna RGB ke Hex: Panduan Referensi Lengkap

Konversi RGB ke Hex adalah proses menerjemahkan warna yang didefinisikan oleh komponen merah, hijau, dan biru menjadi representasi heksadesimal enam digit yang digunakan secara luas dalam pengembangan web. Memahami bagaimana format-format ini berhubungan membantu Anda bekerja lebih efektif dengan CSS, alat desain, dan manipulasi warna dalam kode.

Model Warna Dijelaskan

RGB (Merah, Hijau, Biru)

RGB adalah model warna aditif di mana setiap komponen warna adalah bilangan bulat dari 0 hingga 255. Kombinasi tiga nilai menghasilkan lebih dari 16 juta kemungkinan warna.

rgb(255, 0, 0)    → merah murni
rgb(0, 255, 0)    → hijau murni
rgb(0, 0, 255)    → biru murni
rgb(255, 255, 255) → putih
rgb(0, 0, 0)      → hitam
rgb(128, 128, 128) → abu-abu tengah

Heksadesimal (Hex)

Kode warna Hex menggunakan enam digit heksadesimal yang dikelompokkan sebagai RRGGBB. Setiap pasangan mewakili intensitas merah, hijau, atau biru dalam notasi basis-16, di mana 00 adalah minimum dan FF adalah maksimum.

#FF0000 → merah
#00FF00 → hijau
#0000FF → biru
#FFFFFF → putih
#000000 → hitam
#808080 → abu-abu

HSL (Hue, Saturation, Lightness)

HSL merepresentasikan warna sebagai sudut pada roda warna (0-360 derajat), ditambah persentase saturasi dan kecerahan. Ini lebih intuitif bagi manusia karena Anda dapat menyesuaikan kecerahan atau saturasi secara independen.

hsl(0, 100%, 50%)    → merah
hsl(120, 100%, 50%)  → hijau
hsl(240, 100%, 50%)  → biru
hsl(0, 0%, 50%)      → abu-abu tengah

CMYK (Cyan, Magenta, Yellow, Key/Hitam)

CMYK adalah model warna subtraktif yang digunakan untuk pencetakan. Nilai berkisar dari 0% hingga 100% untuk setiap komponen. Ini adalah kebalikan dari RGB — menambahkan lebih banyak tinta mengurangi cahaya yang dipantulkan.

cmyk(0%, 100%, 100%, 0%)   → merah
cmyk(100%, 0%, 100%, 0%)   → hijau
cmyk(0%, 0%, 0%, 100%)     → hitam
cmyk(0%, 0%, 0%, 0%)       → putih

Rumus Konversi

RGB ke Hex

Konversikan setiap komponen RGB ke nilai heksadesimal dua digit dan gabungkan:

R = 255 → FF
G = 128 → 80
B = 64  → 40
Hasil: #FF8040

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

console.log(rgbToHex(255, 128, 64)); // #FF8040

function rgbToHex(int $r, int $g, int $b): string {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

echo rgbToHex(255, 128, 64); // #FF8040

Hex ke RGB

Parsing string hex enam digit menjadi tiga pasangan dan konversi masing-masing dari basis-16 ke basis-10:

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

console.log(hexToRgb('#FF8040')); // { r: 255, g: 128, b: 64 }

def hex_to_rgb(hex_color: str) -> tuple:
    clean = hex_color.lstrip('#')
    return tuple(int(clean[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb('#FF8040'))  # (255, 128, 64)

RGB ke HSL

Konversi HSL melibatkan menemukan komponen warna dominan dan sekunder untuk menentukan sudut hue:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;

  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };

  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;

  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 128, 64)); // { h: 20, s: 100, l: 63 }

Tabel Referensi Cepat

Fungsi Warna CSS

CSS modern mendukung fungsi warna yang melampaui kode hex dasar:

/* Traditional hex */
.element { color: #FF8040; }

/* RGB with alpha */
.element { color: rgba(255, 128, 64, 0.5); }

/* HSL with alpha */
.element { color: hsla(20, 100%, 63%, 0.5); }

/* Modern relative color syntax */
.element { color: hsl(from #FF8040 h s calc(l + 10%)); }

/* OKLCH — warna dengan ruang warna seragam perseptual */
.element { color: oklch(0.7 0.15 45); }

Kasus Penggunaan Umum

• Pengembangan web — Menerjemahkan mockup desain (RGB/HSL) ke CSS (Hex)
• Visualisasi data — Menghasilkan skala warna secara terprogram
• Pemrosesan gambar — Membaca data piksel dalam RGB dan menyimpan sebagai hex
• Panduan merek — Mempertahankan warna yang konsisten di berbagai format
• Aksesibilitas warna — Menghitung rasio kontras antar warna

Alat Online

Alat RGB to HEX Converter di Help2Code mengonversi warna antara RGB, HEX, RGBA, HSL, dan CMYK dengan pratinjau langsung. Pilih warna, tempel kode hex, atau hasilkan warna acak untuk melihat keempat format secara instan. Pratinjau warna diperbarui secara real-time, dan Anda dapat menyalin format apa pun dengan satu klik. Alat Color Palette Extractor juga berguna untuk mengekstrak skema warna dari gambar.

Kesimpulan

Memahami konversi RGB ke Hex — dan hubungan antara model warna — sangat penting bagi pengembang web dan desainer. Konversinya sederhana: setiap saluran RGB dikonversi ke pasangan hex dua digit. Setelah Anda mengetahui polanya, berpindah antara RGB, Hex, HSL, dan CMYK menjadi hal yang alami. Gunakan alat RGB to HEX Converter untuk konversi instan dan contoh kode di atas untuk mengintegrasikan logika warna ke dalam proyek Anda.