Mengenal Warna di CSS

Halo teman-teman!

Setelah sebelumnya kita membahas cara menambahkan komentar di CSS, sekarang kita masuk ke bagian yang lebih seru, yaitu belajar tentang warna di CSS. Warna itu nggak cuma soal tampilan, tapi juga soal kesan dan kenyamanan saat kita membaca atau menggunakan website.

Dengan warna, kita bisa membuat halaman web jadi lebih menarik, lebih mudah dibaca, bahkan bisa membangun suasana tertentu. Dan kabar baiknya — CSS menyediakan beberapa cara berbeda untuk menuliskan warna. Yuk, kita pelajari satu per satu!

Format Penulisan Warna dalam CSS

CSS mendukung beberapa format penulisan warna, di antaranya:

• Nama warna (misalnya: red, skyblue, black)

• Kode HEX (seperti #ff0000)

• RGB (Red, Green, Blue)

• HSL (Hue, Saturation, Lightness)

Setiap format punya karakteristik sendiri dan bisa digunakan sesuai kebutuhan desain.

1. Nama Warna

CSS sudah mengenali lebih dari 140 nama warna standar.

Contoh:

color: red;
background-color: skyblue;

Cara ini cocok kalau kamu ingin cepat dan menggunakan warna umum.

2. Warna dengan Kode HEX

Kode HEX biasanya diawali dengan tanda pagar (#) dan terdiri dari kombinasi angka dan huruf.

Contoh:

color: #ff0000;   /* merah */
color: #00ff00;   /* hijau */
color: #0000ff;   /* biru */

HEX sering digunakan karena singkat dan didukung luas oleh semua browser.

3. Format RGB

RGB menunjukkan campuran tiga warna utama (merah, hijau, biru) dalam angka dari 0 sampai 255.

Contoh:

color: rgb(255, 0, 0);     /* merah */
color: rgb(0, 255, 0);     /* hijau */
color: rgb(0, 0, 255);     /* biru */

4. Format HSL

HSL lebih deskriptif secara visual karena kita bisa mengatur:

• Hue (nada warna) dalam derajat

• Saturation (kejenuhan warna)

• Lightness (tingkat terang)

Contoh:

color: hsl(0, 100%, 50%);   /* merah */
color: hsl(120, 100%, 50%); /* hijau */
color: hsl(240, 100%, 50%); /* biru */

Kapan Harus Menggunakan Format Tertentu?

• Gunakan nama warna untuk proyek cepat atau prototipe

• Gunakan HEX kalau kamu pakai tools desain seperti Figma atau Photoshop

• Gunakan RGB atau HSL saat kamu butuh fleksibilitas atau efek visual (misalnya transparansi atau animasi warna)

Tips Menggunakan Warna dengan Baik

• Pastikan kontras warna cukup agar teks mudah dibaca

• Hindari penggunaan terlalu banyak warna berbeda dalam satu halaman

• Gunakan warna yang selaras dengan identitas brand

• Simpan palet warna utama dalam satu tempat agar konsisten

Yuk Coba Sendiri!

Sekarang coba buka editor kamu, dan mulai ganti warna teks, background, atau elemen lainnya menggunakan format yang berbeda. Coba eksplorasi warna favoritmu dan rasakan pengaruhnya terhadap tampilan keseluruhan halaman.

Di materi selanjutnya, kita akan belajar lebih dalam tentang format RGB dan RGBA, termasuk bagaimana cara menambahkan transparansi pada warna!

Baca juga