Warna dalam CSS

Warna dalam CSS 🌈

Warna adalah salah satu aspek paling fundamental dalam desain web. CSS menyediakan berbagai format untuk mendefinisikan warna — masing-masing punya kelebihan dan konteks penggunaan yang berbeda.

Property Warna di CSS

Dua property utama untuk mengatur warna:

p {
  color: red;              /* warna TEKS */
  background-color: white; /* warna LATAR BELAKANG */
}

1. Nama Warna (Color Names)

CSS mendukung 140+ nama warna standar yang bisa langsung dipakai:

h1 { color: red; }
p  { color: steelblue; }
div { background-color: lightgray; }
a  { color: royalblue; }

Mudah dibaca, tapi terbatas — tidak semua warna punya nama.

2. HEX (Hexadecimal)

Format paling umum digunakan dalam desain web. Ditulis dengan tanda # diikuti 6 digit heksadesimal:

h1 { color: #ff0000; }      /* merah */
p  { color: #3b82f6; }      /* biru */
div { background: #1f2937; } /* abu gelap */

Struktur: #RRGGBB — RR (merah), GG (hijau), BB (biru) masing-masing 00–ff.

Jika pasangan karakter sama, bisa dipersingkat menjadi 3 digit:

#ffffff  →  #fff   /* putih */
#000000  →  #000   /* hitam */
#ff0000  →  #f00   /* merah */
#3399cc  →  #39c

3. RGB

Menyatakan warna dengan nilai merah, hijau, biru — masing-masing antara 0–255:

color: rgb(255, 0, 0);     /* merah murni */
color: rgb(59, 130, 246);  /* biru */
color: rgb(31, 41, 55);    /* abu gelap */
color: rgb(0, 0, 0);       /* hitam */
color: rgb(255, 255, 255); /* putih */

4. RGBA — RGB dengan Transparansi

Sama seperti RGB, ditambah parameter keempat alpha untuk transparansi (0 = transparan penuh, 1 = tidak transparan):

background-color: rgba(0, 0, 0, 0.5);     /* hitam 50% transparan */
background-color: rgba(59, 130, 246, 0.2); /* biru sangat transparan */
border-color: rgba(255, 255, 255, 0.8);    /* putih hampir penuh */

Sangat berguna untuk overlay, bayangan, dan efek transparan:

.overlay {
  background: rgba(0, 0, 0, 0.6); /* overlay gelap di atas gambar */
}

5. HSL — Hue, Saturation, Lightness

Format yang lebih intuitif untuk memahami dan mengubah warna:

• Hue (0–360): posisi warna di roda warna (0=merah, 120=hijau, 240=biru)
• Saturation (0%–100%): kekuatan warna (0% = abu-abu, 100% = penuh warna)
• Lightness (0%–100%): kecerahan (0% = hitam, 50% = normal, 100% = putih)

color: hsl(0, 100%, 50%);    /* merah */
color: hsl(217, 91%, 60%);   /* biru */
color: hsl(142, 71%, 45%);   /* hijau */
color: hsl(0, 0%, 50%);      /* abu-abu */

Kelebihan HSL: mudah membuat variasi gelap-terang dari warna yang sama:

.warna-dasar   { color: hsl(217, 91%, 60%); }
.warna-gelap   { color: hsl(217, 91%, 40%); } /* lebih gelap */
.warna-terang  { color: hsl(217, 91%, 80%); } /* lebih terang */

6. HSLA — HSL dengan Transparansi

background: hsla(217, 91%, 60%, 0.3); /* biru transparan */

CSS Custom Properties (Variabel Warna)

Cara modern untuk mengelola warna secara konsisten di seluruh proyek:

:root {
  --warna-primer: #3b82f6;
  --warna-sekunder: #8b5cf6;
  --warna-teks: #1f2937;
  --warna-latar: #f9fafb;
}

h1 { color: var(--warna-primer); }
p  { color: var(--warna-teks); }
body { background-color: var(--warna-latar); }
.tombol { background: var(--warna-primer); }

Jika ingin mengganti warna tema, cukup ubah satu tempat di :root — semua elemen yang menggunakannya otomatis berubah.

Perbandingan Format Warna

💡 Tips: Gunakan HEX untuk warna solid, RGBA untuk warna transparan, dan CSS variables untuk tema warna yang konsisten di seluruh proyek. Tools seperti coolors.co sangat membantu untuk memilih palet warna yang serasi. 🎨