Estimasi Waktu Baca: 7 menit
Daftar Isi

- Pemanasan โ˜•
- Properti Color CSS ๐ŸŽจ
- Format Penulisan Warna CSS ๐Ÿ“
    - Nama Warna ๐Ÿ“™
    - RGB dan RGBA ๐Ÿ“•
    - HSL dan HSLA ๐Ÿ“—
    - Kode Hex ๐Ÿ“˜
- Menentukan Warna Teks ๐Ÿ…ฐ
- Menentukan Warna Garis Batas ๐Ÿ”ฒ
- Menentukan Warna Background ๐Ÿ”ค
- Poin-Poin Penting โญ•
- Pendinginan ๐Ÿฆ

Artikel ini merupakan artikel ke-5 dari seri Tutorial Dasar Belajar CSS 3. Untuk yang belum membaca artikel sebelumnya bisa kunjungi link berikut Mengenal 5 Selektor Dasar di CSS 3.

Pemanasan โ˜•

Warna merupakan salah satu elemen terpenting untuk website. Karena dengan memilih warna yang tepat kita akan menciptakan identitas tersendiri untuk website kita.

Sebagai bahasa style sheet atau bahasa yang digunakan untuk mengatur gaya dari website. CSS, pastinya memiliki kapasitas untuk mengatur hal mendasar seperti warna.

Maka dari itu, pada pertemuan kali ini kita akan belajar bagaimana mendefinisikan warna di CSS dan bagaimana penerapannya pada elemen HTML.

Properti Color CSS ๐ŸŽจ

Dalam CSS ada beberapa properti yang mampu mendefinisikan warna. Salah satunya sesuai dengan namanya yaitu color.

Sintaks properti color:


color: nilai_warna;

Properti color digunakan untuk mewarnai teks dari suatu elemen.

Format Penulisan Warna CSS ๐Ÿ“

Format penulisan warna mengacu pada aturan bagaimana nilai dari properti warna akan didefinisikan.

Terdapat 4 format penulisan nilai warna berdasarkan:

  • Kata kunci berupa nama warna
  • RGB dan RGBA
  • HSL dan HSLA
  • Kode Hex

Keempatnya akan dijelaskan lebih lanjut di bawah ini.

Nama Warna ๐Ÿ“’

Kata kunci berupa nama warna bisa dijadikan nilai untuk properti color. Dengan catatan nama warna yang didefinisikan adalah nama-nama warna dalam bahasa inggris dan pastinya didukung oleh HTML dan CSS, seperti red, blue, green, yellow, dan lain-lain.


<span class="merah">Merah</span>
<span class="hijau">Hijau</span>
<span class="biru">Biru</span>

.merah {color: red;}
.hijau {color: green;}
.biru {color: blue;}

Hasil: Merah Hijau Biru

Terdapat total 140 standar nama warna yang didukung CSS dan HTML.

RGB dan RGBA ๐Ÿ“•

RGB merupakan sebuah ruang atau model warna yang mana:

  • R mewakili warna merah (Red)
  • G mewakili warna hijau (Green)
  • B mewakili warna biru (Blue)

Setiap ruang R, G, dan B umumnya juga bisa disebut dengan kanal (channel).

Sehingga sintaks dari ruang warna RGB adalah sebagai berikut:


color: rgb(red, green, blue);

Masing-masing parameter (red, green, blue) mendefinisikan intensitas warna atau tingkat kecerahan dan kemuraman warna yang diwakili dengan nilai 0 – 255.

Semakin kecil nilainya maka warnanya akan semakin gelap, semakin besar nilainya maka akan semakin terang.

Jadi jika nilai rgb(0, 0, 0) maka akan menghasilkan warna hitam. Sedangkan bila nilainya rgb(255, 255, 255) akan menghasilkan warna putih.


<span class="hitam">Hitam</span>
<span class="putih">Putih</span>

.hitam{color:rgb(0, 0, 0);}
.putih{
    /* tambah latar hitam agar teks berwarna putih terlihat */
    background-color: black;
    color: rgb(255, 255, 255);
}

Hasil: Hitam Putih

Untuk mendapatkan warna merah, hijau, dan biru maka isi nilai maksimum dari intensitas warna yaitu 255 pada salah satu parameter. Sedangkan sisanya atur dengan nilai 0.

  • rgb(255, 0, 0) – menghasilkan warna merah
  • rgb(0, 255, 0) – menghasilkan warna hijau
  • rgb(0, 0, 255) – menghasilkan warna biru

<span class="merah">Merah</span>
<span class="hijau">Hijau</span>
<span class="biru">Biru</span>

.merah{color: rgb(255, 0, 0);}
.hijau{color: rgb(0, 255, 0);}
.biru{color: rgb(0, 0, 255);}

Hasil: Merah Hijau Biru

Kita juga diperbolehkan untuk bereksperimen dengan berbagai paduan nilai RGB.


color: rgb(255, 96, 133);
color: rgb(240, 243, 45);
color: rgb(79, 146, 144);
color: rgb(129, 114, 178);

Sedangkan untuk RGBA sebenarnya sama saja. Bedanya ada penambahan kanal A yang merupakan singkatan dari alpha, yang mana hal ini mewakili tingkat opasitas (opacity) atau transparansi warna.

Sintaks dari nilai RGBA sebagai berikut:


color: rgba(red, green, blue, alpha);

Kanal alpha memiliki nilai yang berkisar antara 0 sampai 1.

Semakin kecil nilainya (mendekati nol) maka akan semakin tipis atau transparan warnanya. Sedangkan bila nilainya semakin besar (mendekati 1) maka warnanya akan terlihat semakin tebal atau tidak transparan.


<span class="alpha-0">alpha 0</span>
<span class="alpha-02">alpha 0.2</span>
<span class="alpha-04">alpha 0.4</span>
<span class="alpha-06">alpha 0.6</span>
<span class="alpha-08">alpha 0.8</span>
<span class="alpha-1">alpha 1</span>

.alpha-0{
    color:rgba(0, 0, 0, 0);
}
.alpha-02{
    color:rgba(0, 0, 0, 0.2);
}
.alpha-04{
    color:rgba(0, 0, 0, 0.4);
}
.alpha-06{
    color:rgba(0, 0, 0, 0.6);
}
.alpha-08{
    color:rgba(0, 0, 0, 0.8);
}
.alpha-1{
    color:rgba(0, 0, 0, 1);
}

Sehingga dalam hal ini kita bisa menentukan apakah warna ingin menutup objek di belakangnya atau tidak.

HSL dan HSLA ๐Ÿ“—

HSL merupakan format penulisan warna lainnya sekaligus ruang warna selain RGB. HSL terdiri dari tiga parameter yaitu

  • H mewakili Hue
  • S mewakili Saturation
  • L mewakili Lightness atau Luminance

Sintaks untuk nilai HSL pada properti color sebagai berikut:


color: hsl(hue, saturation, ligthness);

Parameter Hue merujuk pada warna asli atau utama. Prameter hue mewakili derajat warna dengan nilai kisaran antara 0o – 360o. Nilai ini berasal dari lingkaran warna (color wheel) yang tersusun dari warna pelangi.

HSL Color WheelsErin Sowards

Derajat warna yang pertama 0o dimulai dari warna merah dengan dilanjut warna oranye untuk 30o, kuning untuk 60o, dan seterusnya. Hingga kembali lagi pada warna merah untuk 360o.


<span class="merah">Merah</span>
<span class="oranye">Oranye</span>
<span class="kuning">Kuning</span>
<span class="hijau">Hijau</span>
<span class="cyan">Cyan</span>
<span class="biru">Biru</span>
<span class="ungu">Ungu</span>

.merah{
    color:hsl(0, 100%, 50%);
}
.oranye{
    color:hsl(30, 100%, 50%);
}
.kuning{
    color:hsl(60, 100%, 50%);
}
.hijau{
    color:hsl(120, 100%, 50%);
}
.cyan{
    color:hsl(180, 100%, 50%);
}
.biru{
    color:hsl(240, 100%, 50%);
}
.ungu{
    color:hsl(300, 100%, 50%);
}

Hasil: Merah Oranye Kuning Hijau Cyan Biru Ungu

Parameter kedua adalah Saturation mewakili intensitas dari kemurnian warna pada parameter Hue. Semakin rendah nilai saturation akan semakin menambah nuansa warna abu-abu pada warna aslinya. Saturation berkisar antara 0% – 100% yang mana:

  • x < 50% – membuat warna semakin pudar hingga menjadi abu-abu seutuhnya pada nilai 0% terlepas dari apapun warna pada parameter Hue.
  • x = 50% – membuat warna menjadi setengah abu-abu namun masih dapat terlihat warna aslinya.
  • x > 50% – membuat warna asli pada parameter Hue semakin murni.

<span class="sat-0">0%</span>
<span class="sat-20">20%</span>
<span class="sat-40">40%</span>
<span class="sat-60">60%</span>
<span class="sat-80">80%</span>
<span class="sat-100">100%</span>

.sat-0{
    color:hsl(0, 0%, 50%);
}
.sat-20{
    color:hsl(0, 20%, 50%);
}
.sat-40{
    color:hsl(0, 40%, 50%);
}
.sat-60{
    color:hsl(0, 60%, 50%);
}
.sat-80{
    color:hsl(0, 80%, 50%);
}
.sat-100{
    color:hsl(0, 100%, 50%);
}

Parameter ketiga adalah lightness atau beberapa sumber juga menyebutnya sebagai luminance yang mana dalam hal ini mewakili kecerahan suatu warna. Sama seperti saturation, lightness berkisar antara 0% – 100% yang mana:

  • x < 50% – menjadikan warna semakin gelap (hitam = 0%)
  • x = 50% – menjadikan warna apa adanya, tidak gelap dan tidak terang (normal)
  • x > 50% – menjadikan warna semakin terang (putih = 100%)

Contoh penerapan:


<span class="light-0">0%</span>
<span class="light-20">20%</span>
<span class="light-40">40%</span>
<span class="light-60">60%</span>
<span class="light-80">80%</span>
<span class="light-100">100%</span>

.light-0{
    color:hsl(0, 0%, 0%);
}
.light-20{
    color:hsl(0, 0%, 20%);
}
.light-40{
    color:hsl(0, 0%, 40%);
}
.light-60{
    color:hsl(0, 0%, 60%);
}
.light-80{
    color:hsl(0, 0%, 80%);
}
.light-100{
    /* tambahkan background hitam agar teks warna putihnya terlihat */
    background-color: black;
    color:hsl(0, 0%, 100%);
}

Untuk HSLA dapat diartikan sebagai ruang warna HSL dengan kanal alpha. Sama halnya dengan A pada RGBA yang mewakili opasitas atau tingkat transparansi suatu warna dengan kisaran nilai mulai dari 0 sampai 1.


<span class="alpha-0">Alpha 0</span>
<span class="alpha-02">Alpha 0.2</span>
<span class="alpha-04">Alpha 0.4</span>
<span class="alpha-06">Alpha 0.6</span>
<span class="alpha-08">Alpha 0.8</span>
<span class="alpha-1">Alpha 1</span>

.alpha-0{
    color:hsla(322, 100%, 50%, 0);
}
.alpha-02{
    color:hsla(322, 100%, 50%, 0.2);
}
.alpha-04{
    color:hsla(322, 100%, 50%, 0.4);
}
.alpha-06{
    color:hsla(322, 100%, 50%, 0.6);
}
.alpha-08{
    color:hsla(322, 100%, 50%, 0.8);
}
.alpha-1{
    color:hsla(322, 100%, 50%, 1);
}

Kode Hex ๐Ÿ“˜

Hex merupakan singkatan dari Hexadecimal, cara lain mendeskripsikan nilai warna melalui nilai heksadesimal. Format ini ditulis dengan diawali tanda pagar (#) dan diikuti dengan 6 digit nilai #RRGGBB. Setiap dua digit nilai melambangkan Red Green Blue.


color: #rrggbb

RR mewakili kanal merah, GG mewakili kanal hijau, BB mewakili kanal biru.

Sama halnya dengan format penulisan RGB, yang mana berkisar antara 0 – 255, bedanya untuk Hex sendiri nilai maksimalnya diganti dengan huruf f. Jadi karena memiliki 6 digit nilai Hex berkisar antara 00 – ff.

Jadi untuk mendapatkan warna putih maka kita perlu isikan semua kanal dengan nilai maksimalnya #ffffff. Sedangkan untuk nilai terendah yaitu hitam #000000.


<span class="hitam">Hitam</span>
<span class="putih">Putih</span>

.hitam{
    color:#000000;
}
.putih{
    /* tambahkan background hitam agar teks warna putihnya terlihat */
    background-color: black;
    color: #ffffff;
}

Hasilnya Hitam Putih

Jika ingin mendapatkan warna setiap kanal maka isikan ff pada salah satu kanal kemudian sisanya beri nilai 00. Contoh untuk Red maka nilainya #ff0000, karena warna merah memiliki nilai maksimal ff sedangkan kanal hijau dan biru memiliki nilai terendah 00.

Sama halnya untuk mendapatkan warna hijau #00ff00 dan biru #0000ff.


<span class="merah">Merah</span>
<span class="hijau">Hijau</span>
<span class="biru">Biru</span>

.merah{
    color:#ff0000;
}
.hijau{
    color: #00ff00;
}
.biru{
    color: #0000ff;
}

Hasilnya: Merah Hijau Biru

Bolehkah format Hex ditulis secara uppercase (huruf besar)?

Boleh, tidak jadi masalah yang penting jangan lupakan tanda pagar. Contoh merah (#FF0000), hijau (#00FF00), biru (#0000FF).


.merah{
    color:#FF0000;
}
.hijau{
    color: #00FF00;
}
.biru{
    color: #0000FF;
}

Hasilnya: Merah Hijau Biru

Beberapa kombinasi nilai yang lain.

#CE1212 #1597BB #29BB89 #F14668 #4A47A3 #F2A154 #1C1427

Format hex merupakan format yang paling sering digunakan dalam pembuatan website.

Nilai hex yang memiliki 6 digit bisa juga kita singkat menjadi hanya 3 digit. Formatnya hampir sama, yang awalnya #RRGGBB maka jika ditulis secara 3 digit menjadi #RGB.


color: #rgb

Jadi kisaran nilainya menjadi 0 – f.

Contoh untuk mendapatkan warna:

  • hitam – #000000 menjadi #000
  • merah – #ff0000 menjadi #f00
  • hijau – #00ff00 menjadi #0f0
  • biru – #0000ff menjadi #00f
  • putih – #ffffff menjadi #fff

<span class="hitam">Hitam</span>
<span class="putih">Putih</span>
<span class="merah">Merah</span>
<span class="hijau">Hijau</span>
<span class="biru">Biru</span>

.hitam{
    color:#000;
}
.putih{
    /* tambah latar hitam agar teks berwarna putih terlihat */
    background-color: black;
    color:#fff;
}
.merah{
    color:#f00;
}
.hijau{
    color: #0f0;
}
.biru{
    color: #00f;
}

Dapat juga ditulis secara uppercase.


.hitam{
    color:#000;
}
.putih{
    /* tambah latar hitam agar teks berwarna putih terlihat */
    background-color: #000;
    color:#FFF;
}
#merah{
    color:#F00;
}
#hijau{
    color: #0F0;
}
#biru{
    color: #00F;
}

Hasilnya: Hitam Putih Merah Hijau Biru

Menentukan Warna Teks ๐Ÿ…ฐ

Sudah disinggung di awal, bahwa properti color hanya diperuntukkan untuk mewarnai teks suatu elemen.

Sehingga kita dapat merubah warnanya yang secara default berwarna hitam menjadi warna yang kita mau.


<h2 class="red">Halo dunia</p>
<h2 class="green">Halo dunia</p>
<h2 class="blue">Halo dunia</p>
<h2 class="yellow">Halo dunia</p>

.red{
    color: rgb(255, 0, 0);
}
.green{
    color: hsl(120, 100%, 50%);
}
.blue{
    color: #0000ff;
}
.yellow{
    color: yellow;
}

Menentukan Warna Garis Batas ๐Ÿ”ฒ

Garis batas atau border merupakan garis yang mengelilingi suatu elemen.

Nilai default-nya adalah none, namun kita juga dapat memberikannya warna menggunakan properti border-color.


<h2 class="red">Halo dunia</p>
<h2 class="green">Halo dunia</p>
<h2 class="blue">Halo dunia</p>
<h2 class="yellow">Halo dunia</p>

.red{
    border-color: rgb(255, 0, 0);
}
.green{
    border-color: hsl(120, 100%, 50%);
}
.blue{
    border-color: #0000ff;
}
.yellow{
    border-color: yellow;
}

Menentukan Warna Background ๐Ÿ”ค

Sedangkan untuk memberikan warna pada latar belakang atau background dari suatu elemen, diperlukan properti background-color.

Properti ini sudah sedikit kita gunakan di pertengahan pembahasan tadi.


<h2 class="red">Halo dunia</p>
<h2 class="green">Halo dunia</p>
<h2 class="blue">Halo dunia</p>
<h2 class="yellow">Halo dunia</p>

.red{
    background-color: rgb(255, 0, 0);
}
.green{
    background-color: hsl(120, 100%, 50%);
}
.blue{
    background-color: #0000ff;
}
.yellow{
    background-color: yellow;
}

Poin-Poin Penting โญ•

Pada materi kali ini kita dapat mengambil beberapa poin penting diantaranya:

  • Pewarnaan pada CSS sangat penting karena dapat digunakan untuk memberi warna pada elemen HTML.
  • Ada tiga cara penulisan warna yaitu berdasarkan nama warnanya, RGB/RGBA, HSL/HSLA, dan Kode Hex.
  • RGB adalah format penulisan nilai warna dengan menggunakan 3 kanal yaitu red, green, dan blue. Sedangkan untuk alpha pada RGBA mewakili opasitas warna.
  • HSL adalah format penulisan nilai warna dengan menggunakan 3 parameter yaitu Hue, Saturation, dan Lightness. Sedangkan untuk alpha pada HSLA mewakili opasitas warna.
  • Hex adalah format penulisan nilai warna dengan menggunakan kode yang berupa kombinasi huruf dan angka.

Pendinginan ๐Ÿฆ

Hari ini kita sudah belajar mengenai warna di CSS dan saya harap kalian sudah paham tentang:

  • Berbagai cara menggunakan dan mengatur warna di CSS โœ…

Untuk selanjutnya kita akan membahas bagaimana Membuat Background di CSS. Sampai jumpa. ๐Ÿ™‹