Property css yang digunakan untuk merubah warna text

Estimasi Waktu Baca: 6 menit

Artikel ini merupakan artikel ke #05 dari seri Tutorial CSS Dasar untuk Pemula. Untuk yang sekiranya sudah memahami tentang properti color CSS bisa lanjut ke materi Properti Background CSS.

Daftar Isi

- Pemanasan
- Properti Color CSS
- Format Penulisan Warna CSS
    - Menggunakan Nama Warna
    - Menggunakan RGB dan RGBA
    - Menggunakan HSL dan HSLA
    - Menggunakan Kode Hex
- Properti Color untuk Menentukan Warna Teks
- Pendinginan

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 sebagai nilainya. Salah satunya sesuai dengan namanya yaitu color.

Sintaks properti color:

color: nilai_warna;

Properti color bertugas untuk mewarnai teks dari suatu elemen.

Format Penulisan Nilai Properti Color

Maksud format penulisan di sini berarti aturan bagaimana nilai dari properti color di css akan kita definisikan.

Terdapat 4 format penulisan nilai warna berdasarkan:

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

Menggunakan Nama Warna

Kata kunci berupa nama warna bisa kita jadikan nilai untuk properti color. Dengan syarat, nama warna yang akan kita definisikan 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.

Menggunakan Ruang Warna 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 kita panggil dengan sebutan 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

Boleh juga bagi kita 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.

Menggunakan Ruang Warna HSL dan HSLA

HSL merupakan format penulisan warna lainnya sekaligus ruang warna selain RGB. Nilai warna ini 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.

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:

• Jika x < 50%, maka warna akan menjadi semakin gelap (hitam = 0%)
• Jika x = 50%, maka akan membuat warna menjadi apa adanya, tidak gelap dan tidak terang (normal)
• Sedangkan x > 50%, akan 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);
}

Menggunakan 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

Penerapan Properti Color

Jadi sekarang kita dapat merubah warna teks yang secara default berwarna hitam menjadi warna yang kita mau.

<h3 class="text-red">Ini Merah</h3>
<h3 class="text-green">Ini Hijau</h3>
<h3 class="text-blue">Ini Biru</h3>
<h3 class="text-yellow">Ini Kuning</h3>

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

Pendinginan

Hari ini kita sudah belajar mengenai properti color di CSS beserta format penulisan nilai warnanya.

Untuk selanjutnya kita akan membahas mengenai Properti Background di CSS.

Jadi, sampai jumpa!