Tutorial CSS: Cara Mewarnai Teks dengan CSS
Warna adalah properti yang paling sering digunakan dalam CSS.
Kamu bisa bayangkan..
Jika warna web cuma hitam putih saja, maka akan terasa hambar dan monoton.
Karena itu, warna pasti dipakai di dalam CSS. Supaya tampilan web semakin menarik dan berwarna.
Pada tutorial ini, kita akan belajar tentang properti color yang merupakan properti untuk memberikan warna.
Mari kita mulai..
Mengenal Properti Color
Properti color merupakan properti untuk memberikan warna pada teks.
Contoh penggunaan:
h1 {
color: orange;
}Artinya:
Berikan warna orange untuk teks pada elemen <h1>.
Maka hasilnya:
orange adalah nama warna yang sudah ada di CSS. Selain orange, masih banyak lagi warna lainnya.
Mari kita pelajari cara memberikan nilai warna yang benar:
Nilai yang Valid untuk Warna
Nilai warna pada properti `color dapat kita berikan dengan berbagai cara.
Salah satunya dengan menuliskan nama warna dalam bahasa inggris.
Misalnya, warna teks untuk paragraf adalah merah, maka kita bisa
berikan color:red.
Selain menggunakan nama warna, terdapat juga cara lain yang valid
seperti fungsi rgb(), kode heksadesimal, dsb.
Mari kita bahas semuanya…
1. Nama warna
Nama warna merupakan cara yang sering digunakan, karena lebih mudah diingat.
Misalnya, saya suka warna hijau (teal), maka nanti dalam CSS-nya bisa langsung kita tulis teal.
Contoh:
header {
color: teal;
}Nama-nama warna ini sudah ada secara default, jadi kita tinggal pakai aja dengan menuliskan nama warnanya.
Pastikan kamu menulis nama warnanya dengan bahasa inggris. jika pakai bahasa indonesia, maka tidak akan bisa.
Ini adalah sebagian dari nama-nama warna yang ada di CSS. Kalau ingin melihat daftar lengkap nama-nama warna di CSS, kamu bisa kunjungi: W3C.org (Color Keywords).
2. Kode Heksadesimal
Kode heksadesimal merupakan kode yang menggunakan bilangan heksadesimal,
memiliki nilai dari 0 sampai f (16 dalam desimal).
Kode heksadesimal diawali dengan tanda pagar (#),
kemudian diikuti kode heksa-nya. Kode ini dapat terdiri dari 3 digit
atau 6 digit bilangan.
Contoh:
#0011ff (6 digit)
#01f (3 digit)Setiap angka dalam kode heksadesimal menentukan nilai warna dalam RGB
(#RRGGBB atau #RGB).
Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah, dua angka berikutnya untuk warna hijau, dan dua angka terakhir untuk warna biru.
hijau (green), dan biru (blue).
Nilai yang diberikan pada parameter tersebut dimulai dari angka 0~255.
Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut.
Contoh penggunaan fungsi RGB.
h2 {
color: rgb(88, 255, 21);
}Pada contoh di atas, nilai parameter kedua (green) diberikan maksimal, maka nanti hasilnya warna hijau akan menjadi warna dominan.
Penulisan nama warna dengan kode heksadesimal bertujuan untuk membuat warna baru yang belum ada di daftar nama warna.
Selain menggunakan heksadesimal, ada juga cara lain seperti menggunakan fungsi rgb(), rgba(), hsl(), hsla().
4. Fungsi rgb() dan rgba()
Fungsi rgb() adalah fungsi yang menghasilkan warna berdasarkan konsep warna RGB pada komputer.
RGB merupakan singkatan dari Red, Green, Blue.
Contoh penggunaan fungsi rgb().
h1 {
color: rgb(0, 0, 255);
}Pada contoh ini, warna yang akan dihasilkan adalah warna biru, karena kita memberikan nilai 255 pada parameter terakhir (untuk warna biru).
Nilai parameter ini diberikan dari rentang angka 0 sampai 255.
Semakin besar angkanya, semakin banyak kandungan komposisi dari warna tersebut.
Contoh:
h1 {
color: rgb(255, 128, 255)
}Pada contoh ini, kita memberikan warna:
- hijau =
255 - merah =
128 - biru =
255
Maka hasilnya:
Hasilnya akan seperti warna ‘pink’, karena warna merah, hijau, dan biru digabungkan dengan nilai yang berbeda-beda.
Selain menggunakan fungsi rgb() ada juga fungsi rgba().
Fungsi ini sama seperti fungsi RGB, tapi ada penambahan parameter alpha di belakangnya.
Nilai alpha dapat diberikan dari 0% sampai 100% atau 0.0~1.0.
Semakin mendekati angka satu, warnanya akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin transparan.
Contoh penggunaan fungsi RGBA.
p {
color: rgba(40, 23, 11, 0.7);
}Pada contoh di atas, nilai alpha yang diberikan adalah 0.7, atau sama dengan 70%.
5. Fungsi hsl() dan hsla()
Fungsi hsl() merupakan fungsi yang menghasilkan warna berdasarkan konsep warna HSL. HSL merupakan singkatan dari Hue, Saturation, Lightness.
Nilai hue yang diberikan pada fungsi ini dimulai dari 0~360, karena model warna HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari lingkaran tutup tabungnya.
Sedangkan untuk nilai saturation dan lightness menggunakan persen, dari 0%~100%.
Contoh penggunaan fungsi HSL dalam CSS:
h1 {
color: hsl(324, 70%, 40%);
}Fungsi hsl() juga punya fungsi hsla() untuk memberikan nilai alpha atau transparan pada warna HSL.
Contoh:
h1 {
color: hsla(267, 80%, 45%, 0.6);
}6. Warna Gradasi
Warna gradasi adalah kumpulan dari beberapa warna yang digabungkan dengan membentuk transisi gradasi warna.
Warna gradasi di CSS biasanya dibuat dengan fungsi:
linear-gradient()untuk gradasi linear;radial-gradient()untuk gradasi lingkaran;conic-gradient()untuk gradasi memutar;
Tiap-tiap fungsi punya parameter yang hampir sama. Bedanya pada parameter awal saja.
Fungsi linear-gradient() akan menggunakan parameter arah di awalnya, lalu diikuti dengan warna-warna yang akan dicampurkan. Parameter arah pada linear-gradient() bisa berbentuk nama arah seperti left, right, top, bottom, dan juga derajat seperti 90deg.
Fungsi radial-gradient(), parameter awalnya berupa ukuran lingkaran dan fungsi conic-gradient() parameter awalnya berupa derajat lingkaran.
Nah, untuk membuat warna gradasi dengan mudah.. kita bisa memanfaatkan website cssgradient.io.
Setelah itu, kita akan dapat kode CSS untuk Gradasinya. Tinggal di-copas dan dipakai aja.
Contoh:
h1 {
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}O ya, properti color saat ini belum mendukung untuk menggunakan warna gradasi. Tapi kita bisa pakai properti background seperti di atas untuk menggunakan warna gradasi pada teks.
Maka hasilnya:
Mungkin penggunaan gradasi pada properti color nanti akan didukung pada CSS 4 😏.
Tips: Menggunakan Warna
Berikut ini beberapa tips yang ingin saya bagikan dalam menggunakan warna di CSS.
Tips #1: Tak perlu dihafal
Kamu tak perlu menghafal semua nama-nama warna. Saya juga gak menghafalnya.
Kalau lupa tinggal googling aja nama-nama warna di CSS.
Tips #2: Gunakan Inspect Elemen
Jika kamu bingung menentukan warna, coba gunakan inspect element. Di sana ada color picker yang bisa kamu gunakan untuk menentukan warna.
Inspect element adalah tempat terbaik untuk bereksperimen warna dan kode CSS lainnya.
Tips #3: Konsisten untuk Nilai Warna
Dalam memberikan nilai warna, ada baiknya kamu konsisten menggunakan salah satu metode di atas.
Misalnya CSS-mu cuma menggunakan kode heksadesimal aja, maka tetap konsisten seluruhnya menggunakan metode ini.
Tujuannya agar tidak campur aduk dan kode CSS-mu jadi lebih rapi.
Apa Selanjutnya?
Oke, kita sudah belajar tentang properti color di CSS serta gimana cara
memberikan nilai yang valid pada properti ini.
Nilai-nilai color yang kita bahas di tutorial ini, juga berlaku untuk beberapa
properti seperti border-color, background-color, dan sebagainya.
Ini nanti akan kita bahas di tutorial berikutnya.
Selanjutnya silakan pelajari tentang properti background di CSS.
Jika kamu masih bingung, coba tanyakan di kolom komentar.
Selamat belajar. 🙌