Abd. Asis

Kita baru saja selesai membahas cara browser menangani error CSS — diam-diam mengabaikan kode yang tidak valid tanpa menghentikan proses. Sekarang saatnya kita masuk ke salah satu aspek yang paling langsung terasa hasilnya: warna.

Warna bukan sekadar estetika. Warna adalah bahasa visual yang menyampaikan hierarki, emosi, dan konteks. Tapi sebelum bisa bermain dengan warna, kamu perlu memahami bagaimana CSS merepresentasikannya — karena ada lebih dari satu cara, dan masing-masing punya kelebihan dan konteks penggunaan tersendiri.

Nama Warna

Cara paling intuitif memberi warna di CSS adalah menggunakan nama. CSS mendukung 140 nama warna yang sudah terdefinisi — dari yang familiar seperti red, blue, green, hingga yang lebih deskriptif seperti tomato, cornflowerblue, dan mediumseagreen.

/* portofolio.css */

.judul-halaman {
  color: tomato;
  background-color: aliceblue;
}

.pesan-sukses {
  color: mediumseagreen;
  background-color: honeydew;
}

.label-peringatan {
  color: darkorange;
  background-color: lemonchiffon;
}

Nama warna mudah dibaca dan dipahami, tapi punya keterbatasan nyata: kamu tidak bisa membuat varian warna. Tidak ada light-tomato atau dark-cornflowerblue. Untuk fleksibilitas penuh, kita butuh format numerik.

black dan white adalah dua nama warna yang paling sering digunakan dalam CSS. black setara dengan rgb(0, 0, 0) dan white setara dengan rgb(255, 255, 255).

Format HEX

Format HEX adalah cara paling umum menulis warna di CSS. Kamu pasti pernah melihatnya: #1a2744, #ff6b35, #e2e8f0. Struktur lengkapnya adalah #RRGGBB, di mana setiap pasangan karakter adalah nilai heksadesimal untuk komponen merah, hijau, dan biru.

Heksadesimal bekerja dalam rentang 00 hingga ff — setara dengan angka 0 hingga 255 dalam sistem desimal biasa. Semakin tinggi nilainya, semakin intens komponen warna tersebut.

/* portofolio.css */

.header-situs {
  background-color: #1a2744;   /* biru gelap */
  color: #f8fafc;              /* putih agak kebiruan */
}

.tombol-utama {
  background-color: #2563eb;   /* biru cerah */
  color: #ffffff;
}

.teks-sekunder {
  color: #64748b;              /* abu-abu kebiruan */
}

Untuk memahami #1a2744: komponen merah-nya adalah 1a (26 desimal), hijau 27 (39 desimal), biru 44 (68 desimal). Hasilnya adalah warna biru tua yang gelap.

Shorthand Tiga Digit

Ketika setiap pasangan karakter terdiri dari dua digit yang sama — seperti #ff0000 atau #aabbcc — kamu bisa mempersingkatnya menjadi tiga karakter: #f00 dan #abc. Browser akan mengekspansinya kembali menjadi enam digit secara otomatis.

/* portofolio.css */

/* dua baris ini menghasilkan warna yang identik */
.aksen-merah       { color: #ff0000; }
.aksen-merah-pendek { color: #f00; }

/* dan dua ini juga */
.abu-muda       { background-color: #eeeeee; }
.abu-muda-pendek { background-color: #eee; }

Shorthand ini hanya berlaku ketika kedua digit dalam setiap pasangan identik. #1a2744 tidak bisa diperpendek.

Format RGB

Format RGB mengekspresikan warna dengan angka desimal biasa, bukan heksadesimal. Sintaksnya adalah rgb(merah, hijau, biru), dengan setiap nilai berkisar dari 0 hingga 255.

/* portofolio.css */

.kartu-artikel {
  background-color: rgb(248, 250, 252);   /* putih kebiruan */
  border: 1px solid rgb(226, 232, 240);   /* abu muda */
}

.judul-kartu {
  color: rgb(15, 23, 42);                 /* hampir hitam */
}

.tag-kategori {
  background-color: rgb(37, 99, 235);     /* biru */
  color: rgb(255, 255, 255);
}

RGB dan HEX merepresentasikan warna yang sama persis — hanya cara penulisannya yang berbeda. rgb(26, 39, 68) adalah #1a2744. Pilihan antara keduanya sering bergantung pada preferensi atau konteks penggunaan.

RGBA: Warna dengan Transparansi

Versi RGBA menambahkan satu parameter keempat: alpha, yang mengontrol tingkat transparansi elemen. Nilainya berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya padat).

/* portofolio.css */

.overlay-gambar {
  background-color: rgba(26, 39, 68, 0.7);  /* biru gelap, 70% padat */
}

.tooltip-konten {
  background-color: rgba(0, 0, 0, 0.85);   /* hitam, 85% padat */
  color: rgba(255, 255, 255, 0.9);
}

.bayangan-tipis {
  /* RGBA berguna untuk shadow yang tidak solid */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Perbedaan antara rgba(0, 0, 0, 0.5) dan properti opacity: 0.5 penting dipahami: RGBA hanya membuat warna transparan, sedangkan opacity membuat seluruh elemen beserta isinya transparan. Untuk overlay dan shadow, RGBA jauh lebih fleksibel.

Format HSL

HSL adalah cara berpikir tentang warna yang paling sesuai dengan cara manusia memahami warna. Alih-alih mencampurkan nilai merah, hijau, dan biru, HSL bekerja dengan tiga konsep yang lebih intuitif:

Hue — posisi warna di roda warna (color wheel), diukur dalam derajat dari 0 hingga 360
Saturation — seberapa "murni" warna tersebut, dari 0% (abu-abu) hingga 100% (warna penuh)
Lightness — seberapa terang warnanya, dari 0% (hitam) hingga 100% (putih), dengan 50% sebagai warna normal

Color Wheel — Nilai Hue

        60° (kuning)
        /
0°/360° (merah) --- 120° (hijau)
        \
        180° (cyan) --- 240° (biru) --- 300° (magenta)

Dengan model ini, untuk membuat varian gelap dan terang dari satu warna yang sama, kamu cukup mengubah nilai Lightness:

/* portofolio.css */

/* variasi biru — hue sama (217), hanya lightness berbeda */
.biru-sangat-gelap { color: hsl(217, 91%, 15%); }
.biru-gelap        { color: hsl(217, 91%, 30%); }
.biru-normal       { color: hsl(217, 91%, 50%); }
.biru-muda         { color: hsl(217, 91%, 70%); }
.biru-sangat-muda  { color: hsl(217, 91%, 90%); }

Ini adalah keunggulan HSL yang tidak dimiliki HEX atau RGB: mudah membuat palet warna yang harmonis karena semua variasi berasal dari satu hue yang sama.

Mengubah Saturasi untuk Efek Berbeda

Saturasi mengontrol seberapa "hidup" warna tersebut. Saturation 0% selalu menghasilkan abu-abu, apapun nilai hue-nya — karena tidak ada intensitas warna sama sekali.

/* portofolio.css */

/* warna yang sama, saturasi berbeda */
.hijau-hidup        { color: hsl(142, 76%, 36%); }   /* hijau cerah */
.hijau-redup        { color: hsl(142, 20%, 36%); }   /* hijau pucat */
.abu-dari-hijau     { color: hsl(142, 0%, 36%); }    /* abu-abu murni */

HSLA: Transparansi di HSL

Sama seperti RGBA, HSLA menambahkan parameter alpha di posisi keempat:

/* portofolio.css */

.panel-samping {
  background-color: hsla(217, 91%, 50%, 0.15);  /* biru transparan */
  border: 1px solid hsla(217, 91%, 50%, 0.3);
}

.backdrop-modal {
  background-color: hsla(0, 0%, 0%, 0.6);  /* hitam, 60% padat */
}

Memilih Format yang Tepat

Keempat format ini menghasilkan warna yang sama — perbedaannya ada di keterbacaan dan kemudahan modifikasi.

Format	Kelebihan	Kapan Digunakan
Nama warna	Paling mudah dibaca	Prototyping cepat, warna solid standar
HEX	Ringkas, umum di tools desain	Copy-paste dari Figma/Sketch, color palette
RGB/RGBA	Familiar bagi programmer	Ketika perlu transparansi atau kalkulasi dinamis
HSL/HSLA	Mudah dimodifikasi secara intuitif	Membangun design system, membuat varian warna

Dalam proyek nyata, kombinasi HEX dan HSL adalah pilihan yang paling produktif: HEX untuk warna solid yang diambil dari tools desain, HSL untuk membangun palet dan variasi warna secara programatik.

Variabel CSS sangat cocok dikombinasikan dengan HSL. Dengan mendefinisikan hue dan saturation sebagai variabel, kamu bisa mengubah keseluruhan palet hanya dengan mengubah satu nilai. Teknik ini akan kita eksplorasi lebih dalam di bab tentang CSS Custom Properties.

Latihan

Buat file palet-warna.css dan terapkan tiga section berikut:

Buat kelas .kartu-profil dengan background menggunakan nama warna, warna teks menggunakan HEX, dan border menggunakan RGB. Pastikan kontras antara teks dan background cukup untuk mudah dibaca.
Buat lima kelas .biru-1 sampai .biru-5 menggunakan HSL dengan hue yang sama tetapi lightness berbeda — dari yang paling gelap (20%) hingga paling terang (80%). Ini simulasi bagaimana design system membangun palet warna.
Buat kelas .overlay yang menggunakan RGBA atau HSLA untuk menciptakan warna semi-transparan. Coba tumpangkan kelas ini di atas elemen dengan background berwarna dan amati hasilnya di browser.

Eksperimen dengan nilai-nilai tersebut — CSS adalah media interaktif, dan pemahaman terbaik datang dari mencoba sendiri.

Warna adalah fondasi visual, tapi ia jarang berdiri sendiri. Di bab berikutnya, kita akan melihat bagaimana warna bekerja dalam konteks background — properti yang mengontrol latar belakang elemen, mulai dari warna solid hingga gambar dan gradien.

BAB 8: Warna CSS

Nama Warna

Format HEX

Shorthand Tiga Digit

Format RGB

RGBA: Warna dengan Transparansi

Format HSL

Mengubah Saturasi untuk Efek Berbeda

HSLA: Transparansi di HSL

Memilih Format yang Tepat

Latihan

Referensi