Format Warna Dijelaskan: Panduan Konversi HEX, RGB, HSL

Setiap piksel di layar Anda didefinisikan oleh angka. Tetapi warna yang sama dapat dinyatakan dalam berbagai format — HEX, RGB, HSL, HSB, dan lainnya. Memahami format-format ini dan kapan menggunakan masing-masing membuat Anda menjadi pengembang dan desainer yang lebih efektif.

Model Warna

RGB (Red, Green, Blue)

RGB adalah model warna aditif berdasarkan cara kerja layar. Setiap piksel adalah kombinasi cahaya merah, hijau, dan biru pada intensitas yang bervariasi.

color: rgb(59, 130, 246);       /* Solid blue */
color: rgba(59, 130, 246, 0.5); /* 50% transparent blue */

Setiap kanal berkisar dari 0 (tidak ada) hingga 255 (intensitas maksimum):

rgb(0, 0, 0) = Hitam (tanpa cahaya)
rgb(255, 255, 255) = Putih (semua cahaya)
rgb(255, 0, 0) = Merah murni

Kapan menggunakan RGB: Manipulasi warna secara programatik, operasi canvas, pemrosesan gambar. RGB memetakan langsung ke perangkat keras, membuat perhitungan menjadi mudah.

HEX (Heksadesimal)

HEX hanyalah RGB yang ditulis dalam notasi heksadesimal. Setiap pasangan karakter mewakili satu kanal (00-FF):

color: #3B82F6;   /* Same blue as rgb(59, 130, 246) */
color: #3B82F680; /* With 50% alpha (8-digit hex) */

Konversinya langsung: 3B = 59, 82 = 130, F6 = 246.

Singkatan: Ketika setiap pasangan memiliki digit identik, Anda dapat menyingkat: #AABBCC → #ABC

Kapan menggunakan HEX: Stylesheet CSS (format paling umum), handoff desain, pedoman merek. HEX ringkas dan dipahami secara universal.

HSL (Hue, Saturation, Lightness)

HSL merepresentasikan warna sebagaimana manusia mempersepsikannya. Alih-alih mencampurkan kanal cahaya, Anda mendeskripsikan warna berdasarkan propertinya:

Hue: Sudut warna pada roda warna (0-360°). 0° = merah, 120° = hijau, 240° = biru
Saturation: Seberapa cerah warnanya (0% = abu-abu, 100% = warna penuh)
Lightness: Seberapa terang warnanya (0% = hitam, 50% = warna murni, 100% = putih)

color: hsl(217, 91%, 60%);       /* Same blue */
color: hsla(217, 91%, 60%, 0.5); /* With alpha */

Kapan menggunakan HSL: Membuat palet warna, menyesuaikan warna secara programatik (misalnya, membuat state hover dengan mengatur kecerahan), desain warna yang aksesibel. HSL adalah format paling intuitif untuk penalaran manusia tentang warna.

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB mirip dengan HSL tetapi mendefinisikan kecerahan secara berbeda. Pada kecerahan maksimum, Anda mendapatkan warna murni; pada minimum, Anda mendapatkan hitam. Model ini digunakan oleh alat desain seperti Figma, Sketch, dan Photoshop.

Perbedaan utama dari HSL: Dalam HSL, lightness 50% memberikan warna murni. Dalam HSB, brightness 100% memberikan warna murni. Ini membuat HSB lebih intuitif untuk beberapa tugas tetapi kurang berguna di CSS (yang tidak mendukung HSB secara native).

Konversi Antar Format

Mengonversi antar format melibatkan matematika yang sederhana. Berikut adalah hubungan utamanya:

HEX ke RGB

Pisahkan string hex menjadi pasangan dan konversi masing-masing ke desimal:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB ke HSL

Algoritma menormalisasi nilai RGB ke 0-1, menemukan kanal maksimum dan minimum, lalu menghitung hue berdasarkan kanal mana yang dominan, saturasi dari rentang, dan lightness dari rata-rata.

Daripada mengimplementasikan konversi ini secara manual, gunakan Color Converter kami untuk menerjemahkan antar format secara instan.

Aplikasi Praktis

Membangun Palet Warna dengan HSL

HSL unggul dalam menghasilkan palet yang konsisten. Pertahankan hue konstan dan variasikan saturasi dan lightness:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Lightest */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Darkest */
}

Pendekatan ini menjamin langkah-langkah yang konsisten secara perseptual. Membuat palet lengkap secara manual? Color Palette Generator kami mengotomatisasi proses ini.

State Hover dan Fokus

Dengan HSL, membuat state interaktif sangat mudah:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% darker */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% darker */
}

Aksesibilitas dan Kontras

WCAG 2.1 mensyaratkan rasio kontras minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Komponen lightness dalam HSL memberi Anda cara intuitif untuk memastikan kontras yang cukup:

Latar belakang terang (lightness > 90%) cocok dengan teks gelap (lightness < 30%)
Latar belakang gelap (lightness < 20%) cocok dengan teks terang (lightness > 80%)

Fungsi Warna CSS Modern

CSS sekarang mendukung fungsi manipulasi warna yang powerful:

/* Relative color syntax (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Perceptually uniform color space */
color: oklch(0.7 0.15 250);

Format oklch semakin banyak diadopsi karena bersifat seragam secara perseptual — perubahan numerik yang sama menghasilkan perubahan yang dipersepsikan sama, tidak seperti HSL di mana perubahan lightness 10% terlihat berbeda pada nilai hue yang berbeda.

FAQ

Format warna mana yang harus saya gunakan di CSS?

Untuk sebagian besar proyek, gunakan HEX untuk warna sederhana dan HSL ketika Anda perlu membuat variasi atau memanipulasi warna secara programatik. HEX adalah format paling ringkas dan dikenal luas. HSL lebih mudah dibaca saat membangun sistem warna. CSS modern mendukung semua format secara bergantian.

Apa perbedaan antara HSL dan HSB?

HSL dan HSB keduanya menggunakan hue dan saturasi, tetapi mendefinisikan kecerahan secara berbeda. Dalam HSL, lightness 0% adalah hitam, 50% adalah warna murni, dan 100% adalah putih. Dalam HSB, brightness 0% adalah hitam dan 100% adalah warna murni (tidak ada jalur ke putih melalui brightness saja). CSS mendukung HSL secara native; HSB terutama digunakan di alat desain seperti Figma dan Photoshop.

Sumber Terkait

Color Converter — Konversi antara HEX, RGB, HSL, dan HSB secara instan
Color Palette Generator — Buat palet warna yang harmonis
Panduan Gradien CSS — Buat gradien yang indah dengan CSS