CSS Dasar #10 - Warna di CSS: Named Colors, HEX, RGB, RGBA, HSL, HSLA

byFerdian Rahabista -
0

Warna adalah elemen penting dalam desain website. CSS menyediakan berbagai cara untuk mendefinisikan warna, mulai dari yang paling sederhana (nama warna) hingga yang paling fleksibel (HSLA). Memahami berbagai format warna akan membantu Anda menciptakan palet warna yang konsisten dan efek transparansi yang menarik.

Mengapa Banyak Format Warna?

Setiap format warna memiliki kelebihan masing-masing:

  • Named Colors → Mudah diingat, cocok untuk prototyping
  • HEX → Paling umum di industri web, kompak
  • RGB → Mudah dipahami (campuran merah, hijau, biru)
  • RGBA → Sama seperti RGB + transparansi (alpha)
  • HSL → Intuitif (Hue, Saturation, Lightness)
  • HSLA → HSL + transparansi
Rekomendasi untuk Pemula:
- Mulai dengan HEX atau RGB (paling umum)
- Gunakan RGBA atau HSLA saat butuh transparansi
- HSL sangat berguna untuk membuat variasi warna (lebih terang/gelap)

1. Named Colors (Nama Warna)

CSS mendukung 140+ nama warna standar seperti red, blue, green, yellow, dll. Cara termudah tapi terbatas.

Contoh:

<style>
    .bg-red { background-color: red; }
    .bg-blue { background-color: blue; }
    .bg-green { background-color: green; }
    .bg-yellow { background-color: yellow; }
    .bg-black { background-color: black; color: white; }
    .bg-white { background-color: white; border: 1px solid #ccc; }
</style>
Red
Blue
Green
Yellow
Black
White
Named Colors Populer:
merah: red, darkred, lightcoral, crimson
biru: blue, darkblue, lightblue, skyblue, royalblue
hijau: green, darkgreen, lightgreen, lime, forestgreen
netral: black, white, gray, darkgray, lightgray, silver

2. HEX (Hexadecimal)

HEX adalah format warna paling populer di web. Ditulis dengan tanda pagar (#) diikuti 6 karakter hexadecimal (0-9, A-F). Format: #RRGGBB (Red, Green, Blue).

Contoh:

<style>
    .hex-red { background-color: #ff0000; }
    .hex-green { background-color: #00ff00; }
    .hex-blue { background-color: #0000ff; }
    .hex-dark { background-color: #1e293b; color: white; }
    .hex-primary { background-color: #3b82f6; color: white; }
    .hex-success { background-color: #22c55e; color: white; }
</style>
#ff0000
#00ff00
#0000ff
#1e293b
#3b82f6
#22c55e

HEX Shorthand (3 digit):

Jika setiap pasangan digit sama, bisa disingkat menjadi 3 digit:

  • #ff0000 → #f00 (merah)
  • #00ff00 → #0f0 (hijau)
  • #0000ff → #00f (biru)
  • #ffffff → #fff (putih)
  • #000000 → #000 (hitam)
Tips HEX:
  • Gunakan tools seperti ColorZilla atau Eye Dropper untuk mengambil kode HEX dari website lain
  • Website seperti coolors.co membantu membuat palet warna
  • HEX case-insensitive (#3B82F6 sama dengan #3b82f6)

3. RGB (Red, Green, Blue)

RGB mendefinisikan warna berdasarkan intensitas merah, hijau, dan biru. Setiap nilai dari 0 sampai 255. Format: rgb(red, green, blue).

Contoh:

<style>
    .rgb-red { background-color: rgb(255, 0, 0); }
    .rgb-green { background-color: rgb(0, 255, 0); }
    .rgb-blue { background-color: rgb(0, 0, 255); color: white; }
    .rgb-primary { background-color: rgb(59, 130, 246); color: white; }
    .rgb-gray { background-color: rgb(128, 128, 128); color: white; }
</style>
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(59,130,246)
rgb(128,128,128)
Nilai RGB (0-255):
- 0 = tidak ada warna
- 255 = intensitas maksimal
- Contoh: rgb(255, 0, 0) = merah murni
- rgb(0, 0, 0) = hitam
- rgb(255, 255, 255) = putih

4. RGBA (RGB + Alpha/Transparansi)

RGBA sama seperti RGB, ditambah nilai alpha (transparansi) dari 0 (transparan) sampai 1 (solid). Format: rgba(red, green, blue, alpha).

Contoh:

<style>
    .bg-solid { background-color: rgba(59, 130, 246, 1); }
    .bg-75 { background-color: rgba(59, 130, 246, 0.75); }
    .bg-50 { background-color: rgba(59, 130, 246, 0.5); }
    .bg-25 { background-color: rgba(59, 130, 246, 0.25); }
    .bg-0 { background-color: rgba(59, 130, 246, 0); border: 1px solid #ccc; }
</style>
alpha: 1 (solid)
alpha: 0.75
alpha: 0.5
alpha: 0.25
alpha: 0

Latar belakang polkadot untuk menunjukkan efek transparansi

Kegunaan RGBA:
  • Membuat efek overlay (lapisan transparan di atas gambar)
  • Membuat shadow dengan efek transparan
  • Membuat efek hover yang halus
  • Membuat modal background yang tembus pandang

5. HSL (Hue, Saturation, Lightness)

HSL adalah format warna yang lebih intuitif untuk manusia. Format: hsl(hue, saturation%, lightness%).

  • Hue (0-360) → posisi warna pada roda warna (0=merah, 120=hijau, 240=biru)
  • Saturation (0%-100%) → kejenuhan warna (0%=abu-abu, 100%=warna penuh)
  • Lightness (0%-100%) → kecerahan (0%=hitam, 100%=putih)

Contoh:

<style>
    .hue-0 { background-color: hsl(0, 100%, 50%); }      /* Merah */
    .hue-120 { background-color: hsl(120, 100%, 50%); }  /* Hijau */
    .hue-240 { background-color: hsl(240, 100%, 50%); }  /* Biru */
    .saturation-demo { background-color: hsl(240, 50%, 50%); }
    .lightness-demo { background-color: hsl(240, 100%, 70%); }
</style>

Variasi Hue (warna dasar):

0° (Merah)
30° (Oranye)
60° (Kuning)
120° (Hijau)
180° (Cyan)
240° (Biru)
300° (Magenta)

Variasi Saturation (kejenuhan):

100%
75%
50%
25%
0% (abu-abu)

Variasi Lightness (kecerahan):

90% (sangat terang)
70% (terang)
50% (normal)
30% (gelap)
10% (sangat gelap)
Kelebihan HSL:
  • Sangat mudah membuat variasi warna (tinggal ubah lightness atau saturation)
  • Membuat palet warna monokromatik dengan mudah
  • Lebih intuitif daripada RGB (manusia lebih mudah memahami "warna apa, seberapa jenuh, seberapa terang")

6. HSLA (HSL + Alpha)

HSLA sama seperti HSL, ditambah nilai alpha (transparansi). Format: hsla(hue, saturation%, lightness%, alpha).

Contoh:

<style>
    .hsla-solid { background-color: hsla(240, 100%, 50%, 1); }
    .hsla-75 { background-color: hsla(240, 100%, 50%, 0.75); }
    .hsla-50 { background-color: hsla(240, 100%, 50%, 0.5); }
    .hsla-25 { background-color: hsla(240, 100%, 50%, 0.25); }
</style>
alpha: 1
alpha: 0.75
alpha: 0.5
alpha: 0.25

Tabel Perbandingan Format Warna

Format Contoh (Biru) Kelebihan Kekurangan
Named Colors blue Mudah diingat Pilihan terbatas (hanya 140+)
HEX #0000ff Populer, kompak Kurang intuitif
RGB rgb(0,0,255) Mudah dipahami Tanpa transparansi
RGBA rgba(0,0,255,0.5) Dengan transparansi -
HSL hsl(240,100%,50%) Intuitif, mudah buat variasi Tanpa transparansi
HSLA hsla(240,100%,50%,0.5) Intuitif + transparansi -

Contoh Proyek: Palet Warna Interaktif

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palet Warna CSS - Demo Semua Format</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: #1e293b;
            margin-bottom: 10px;
        }
        
        .subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 30px;
        }
        
        .section {
            background: white;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        .section h2 {
            color: #1e293b;
            margin-bottom: 15px;
            border-left: 4px solid #3b82f6;
            padding-left: 15px;
        }
        
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .color-box {
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            font-weight: 500;
            transition: transform 0.2s;
        }
        
        .color-box:hover {
            transform: scale(1.02);
        }
        
        .code {
            font-family: monospace;
            font-size: 12px;
            margin-top: 8px;
            background: rgba(0,0,0,0.1);
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .overlay-demo {
            background: url('data:image/svg+xml;utf8,') repeat;
            background-size: 20px;
            padding: 20px;
            border-radius: 12px;
            margin-top: 15px;
        }
        
        .overlay-box {
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 20px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>🎨 Palet Warna CSS</h1>
        <p class="subtitle">Named Colors | HEX | RGB | RGBA | HSL | HSLA</p>
        
        <!-- NAMED COLORS -->
        <div class="section">
            <h2>1. Named Colors (Nama Warna)</h2>
            <div class="color-grid">
                <div class="color-box" style="background: red; color: white;">red</div>
                <div class="color-box" style="background: blue; color: white;">blue</div>
                <div class="color-box" style="background: green; color: white;">green</div>
                <div class="color-box" style="background: purple; color: white;">purple</div>
                <div class="color-box" style="background: orange;">orange</div>
                <div class="color-box" style="background: teal; color: white;">teal</div>
            </div>
        </div>
        
        <!-- HEX -->
        <div class="section">
            <h2>2. HEX (Hexadecimal)</h2>
            <div class="color-grid">
                <div class="color-box" style="background: #ef4444; color: white;">#ef4444</div>
                <div class="color-box" style="background: #3b82f6; color: white;">#3b82f6</div>
                <div class="color-box" style="background: #22c55e; color: white;">#22c55e</div>
                <div class="color-box" style="background: #f59e0b; color: white;">#f59e0b</div>
                <div class="color-box" style="background: #8b5cf6; color: white;">#8b5cf6</div>
                <div class="color-box" style="background: #1e293b; color: white;">#1e293b</div>
            </div>
            <p style="margin-top: 15px; font-size: 14px;">HEX Shorthand: #f00 (merah), #0f0 (hijau), #00f (biru), #fff (putih), #000 (hitam)</p>
        </div>
        
        <!-- RGB -->
        <div class="section">
            <h2>3. RGB (Red, Green, Blue)</h2>
            <div class="color-grid">
                <div class="color-box" style="background: rgb(239,68,68); color: white;">rgb(239,68,68)</div>
                <div class="color-box" style="background: rgb(59,130,246); color: white;">rgb(59,130,246)</div>
                <div class="color-box" style="background: rgb(34,197,94); color: white;">rgb(34,197,94)</div>
                <div class="color-box" style="background: rgb(245,158,11); color: white;">rgb(245,158,11)</div>
                <div class="color-box" style="background: rgb(139,92,246); color: white;">rgb(139,92,246)</div>
            </div>
        </div>
        
        <!-- RGBA (Transparansi) -->
        <div class="section">
            <h2>4. RGBA (Dengan Transparansi)</h2>
            <div class="overlay-demo">
                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <div class="overlay-box" style="background: rgba(59,130,246,1); width: 100px;">alpha 1</div>
                    <div class="overlay-box" style="background: rgba(59,130,246,0.75); width: 100px;">alpha 0.75</div>
                    <div class="overlay-box" style="background: rgba(59,130,246,0.5); width: 100px;">alpha 0.5</div>
                    <div class="overlay-box" style="background: rgba(59,130,246,0.25); width: 100px;">alpha 0.25</div>
                </div>
            </div>
            <p style="margin-top: 10px; font-size: 14px;">Nilai alpha: 0 = transparan, 1 = solid</p>
        </div>
        
        <!-- HSL -->
        <div class="section">
            <h2>5. HSL (Hue, Saturation, Lightness)</h2>
            <div class="color-grid">
                <div class="color-box" style="background: hsl(0, 100%, 50%); color: white;">hsl(0,100%,50%)</div>
                <div class="color-box" style="background: hsl(120, 100%, 50%); color: white;">hsl(120,100%,50%)</div>
                <div class="color-box" style="background: hsl(240, 100%, 50%); color: white;">hsl(240,100%,50%)</div>
                <div class="color-box" style="background: hsl(30, 100%, 50%);">hsl(30,100%,50%)</div>
                <div class="color-box" style="background: hsl(60, 100%, 50%);">hsl(60,100%,50%)</div>
            </div>
            <p style="margin-top: 15px; font-size: 14px;">Hue: 0-360 (roda warna) | Saturation: 0-100% | Lightness: 0-100%</p>
        </div>
        
        <!-- HSLA -->
        <div class="section">
            <h2>6. HSLA (HSL + Alpha)</h2>
            <div class="overlay-demo">
                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <div class="overlay-box" style="background: hsla(240, 100%, 50%, 1); width: 100px;">alpha 1</div>
                    <div class="overlay-box" style="background: hsla(240, 100%, 50%, 0.75); width: 100px;">alpha 0.75</div>
                    <div class="overlay-box" style="background: hsla(240, 100%, 50%, 0.5); width: 100px;">alpha 0.5</div>
                    <div class="overlay-box" style="background: hsla(240, 100%, 50%, 0.25); width: 100px;">alpha 0.25</div>
                </div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Ringkasan Format Warna CSS</h3>
            <ul>
                <li><code>Named Colors</code> → red, blue, green (140+ warna, mudah diingat)</li>
                <li><code>HEX</code> → #3b82f6 (paling populer di industri)</li>
                <li><code>RGB</code> → rgb(59,130,246) (intensitas 0-255)</li>
                <li><code>RGBA</code> → rgba(59,130,246,0.5) (dengan transparansi)</li>
                <li><code>HSL</code> → hsl(240,100%,50%) (intuitif, mudah buat variasi)</li>
                <li><code>HSLA</code> → hsla(240,100%,50%,0.5) (HSL + transparansi)</li>
            </ul>
            <hr>
            <h3>Tips Memilih Format Warna:</h3>
            <ul>
                <li>Prototyping cepat → <strong>Named Colors</strong></li>
                <li>Website profesional → <strong>HEX atau RGB</strong></li>
                <li>Butuh transparansi (overlay, shadow) → <strong>RGBA atau HSLA</strong></li>
                <li>Membuat palet warna (terang/gelap) → <strong>HSL</strong></li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual palet warna:

Palet Warna CSS

red
#3b82f6
rgb(34,197,94)
hsla(240,100%,50%,0.5)
Ringkasan Format Warna: Named Colors, HEX, RGB, RGBA, HSL, HSLA

Kesalahan Umum Pemula

  • Lupa tanda pagar (#) pada HEX → 3b82f6 (salah) vs #3b82f6 (benar).
  • Lupa koma pada RGB/RGBA → rgb(59 130 246) (salah) vs rgb(59,130,246) (benar).
  • Nilai RGB melebihi 255 → Nilai maksimal adalah 255.
  • Lupa tanda persen (%) pada HSL → hsl(240,100,50) (salah) vs hsl(240,100%,50%) (benar).
  • Alpha lebih dari 1 → Alpha harus antara 0 dan 1.
Debugging Tips:
  • Gunakan Color Picker di Developer Tools (F12) untuk memilih warna secara visual
  • Klik kotak warna di DevTools untuk mengubah format warna (HEX, RGB, HSL)
  • Website seperti coolors.co dan colorhunt.co membantu mencari palet warna

Latihan Singkat

  1. Buat 3 kotak dengan warna merah menggunakan Named Colors, HEX, dan RGB
  2. Buat efek overlay dengan RGBA (background hitam transparan di atas gambar)
  3. Buat variasi warna biru dengan HSL (ubah lightness dari 30% ke 70%)
  4. Buat tombol dengan efek hover yang mengubah opacity menggunakan RGBA
  5. Buat palet warna monokromatik (satu hue, variasi saturation dan lightness)

Intisari Hari Ini

  • Named Colors → nama warna (red, blue) - mudah tapi terbatas
  • HEX → #RRGGBB - paling populer, kompak
  • RGB → rgb(red,green,blue) - nilai 0-255
  • RGBA → rgba(red,green,blue,alpha) - dengan transparansi
  • HSL → hsl(hue,saturation%,lightness%) - intuitif, mudah buat variasi
  • HSLA → hsla(hue,saturation%,lightness%,alpha) - HSL + transparansi
  • Pilih format sesuai kebutuhan: HEX/RGB untuk umum, RGBA/HSLA untuk transparansi, HSL untuk variasi warna
Tantangan: Buat sebuah Website Landing Page dengan palet warna yang konsisten menggunakan berbagai format warna! Persyaratan:
  • Pilih satu warna utama (primary color) dan buat variasinya (terang, gelap, transparan)
  • Gunakan HEX untuk warna utama website
  • Gunakan RGB untuk warna sekunder
  • Gunakan RGBA untuk efek overlay pada hero section
  • Gunakan HSL untuk membuat variasi warna yang lebih terang/gelap dari warna utama
  • Gunakan HSLA untuk tombol dengan efek hover transparan
  • Tambahkan kotak penjelasan yang menunjukkan format warna apa yang digunakan di setiap elemen

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #9 - Selektor Atribut (Attribute Selector)
Artikel Selanjutnya: CSS Dasar #11 - Background: background-color, background-image, background-repeat, background-position, background-size

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال