Belajar CSS Bagian 5: Memberikan Warna Pada Text

Setelah kita mengetahui jenis-jenis selector pada CSS, dalam series belajar CSS bagian 5, kita akan belajar bagaimana caranya memberikan warna pada Text dalam script CSS.

Warna adalah komponen dasar dalam desain sebuah website. Tanpa warna, desain web akan terlihat tidak menarik. Pemilihan warna yang tepat akan mempengaruhi kualitas tampilan sebuah website.

Menggunakan warna CSS pada website dapat membuatnya lebih nyaman dan menarik untuk diakses. Menggunakan CSS untuk menambahkan warna adalah pilihan yang tepat karena mudah diterapkan dan menawarkan berbagai jenis warna. Dalam series belajar css bagian 5, kita akan belajar mengenai format warna, cara memberikan warna hingga tips pemilihan warna pada website. Simak informasi berikut ini.

Format Penulisan Warna dalam CSS

Format warna penulisan dalam CSS berguna untuk mendeskripsikan warna halaman website. Ada beberapa format penulisan mewarnai dengan CSS, diantaranya menggunakan nama, dengan kode RGB dan kode Hexadesimal.

Nama Warna

Warna dapat dipanggil langsung dengan namanya dalam bahasa inggris. HTML dan CSS sudah mendefinisikan 140 nama warna standar, selengkapnya dapat dilihat di halaman selanjutnya.

RGB

Warna juga dapat ditulis dengan menggunakan format rgb (red, green, blue). Format ini mendukung lebih banyak warna spesifik di luar yang sudah didefinisikan namanya. 

Setiap parameter (red, green, blue) menunjukkan intensitas warna, dengan nilai 0 – 255. Contohnya, rgb (0, 0, 255) akan menampilkan warna biru (blue), karena parameter red bernilai 0, green bernilai 0 dan blue bernilai maksimum 255. 

Nilai parameter juga dapat ditulis dengan menggunakan persentase (%). Misalnya rgb(0, 0, 50%) sama dengan rgb (0, 0, 128).

RGBA

Format penulisan warna ini sama dengan RGB, hanya saja ada penambahan parameter alpha di belakangnya.

Penggunaan nilai alpha dapat dimulai dari 0% sampai 100% atau 0.0~1.0. Jadi, semakin mendekati angka satu, warnanya akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin transparan.

Contohnya yaitu rgba (40, 23, 11, 0.7) akan memberikan memberikan pewarnaan makin terang, nilai alpha yang diberikan adalah 0.7, atau sama dengan 70%.

Hexadesimal

Mewarnai dengan CSS dapat menggunakan format penulisan warna yang ditulis lebih pendek yaitu menggunakan bilangan hexadesimal. 

Format penulisan warna hexadecimal adalah #RRGGBB, dimana RR (red), GG (green) dan BB (blue) adalah nilai untuk intensitas warna dengan rentang nilai 0 – FF dalam sistem bilangan hexadesimal. Contohnya, #00FF00 akan menampilkan warna green, atau setara dengan rgb (0, 255, 0).

HSL 

Mewarnai dengan CSS dapat juga menggunakan format HSL, yang merupakan kepanjangan dari hue, saturation, dan lightness. 

Hue adalah tingkatan warna dari 0 hingga 360, artinya 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru. Sedangkan, saturasi merupakan nilai persentase, artinya 0% berarti warna abu-abu, dan 100% berarti warna penuh. Lightness juga merupakan persentase.

Contohnya hsl (0, 100%, 50%) akan menampilkan warna merah. Dikarenakan hue menggunakan nilai 0.

BACA JUGA : Kode Warna HTML dan CSS

Memberikan warna dalam CSS

Berikut adalah cara memberikan warna pada text melalui CSS.

Warna pada Teks

Untuk memberikan warna pada teks, kita menggunakan properti color. Contoh kodenya sebagai berikut:

<h1 style="color: blue">Belajar Mewarnai CSS</h1>

Dari script diatas, akan tampil hasil seperti berikut:

Tak hanya menggunakan properti color, kita juga bisa menggunakan penulisan warna RGB.

<h1 style="color: rgb(250, 0, 0)">Belajar Mewarnai CSS</h1>

Maka, akan tampil hasil seperti berikut: 

Warna pada Background

Untuk memberikan warna latar pada suatu elemen, kita menggunakan properti background-color.

<h1 style="background-color: rgb(0, 0, 255)">Belajar Mewarnai CSS</h1>

Akan tampil hasil sebagai berikut:

Kita akan coba menggunakan format penulisan warna HSL, dapat menulis dengan script berikut:

<h1 style="background-color:hsl(0, 100%, 50%)">Belajar Mewarnai CSS</h1>

Dari kode diatas, maka akan tampil hasil berikut ini.

Warna pada Border

Untuk memberikan warna pada outline garis, kita menggunakan format border-color.

<html>
<head>
	<style>
		p.one {
  		border-style: solid;
  		border-color: blue;
		}
	</style>
</head>
	<body>
		<p class="one">Belajar Mewarnai CSS</p>
		<p>Rumahweb Indonesia</p>
	</body>
</html>

Maka akan tampil hasil berikut ini:

Tips menggunakan warna dalam CSS

Untuk mempercantik website, penggunaan warna yang sesuai sangat penting agar pengguna merasa nyaman saat mengunjungi website.

Namun, sebagai developer website, menghafal warna dan kombinasi warna yang tepat bisa terasa sulit. Berikut ini beberapa tips untuk mewarnai dengan CSS.

1. Tidak Perlu Menghafal

Dalam menggunakan CSS untuk mewarnai, Anda tidak perlu menghafal semua nama warna. Sebagai alternatif, cukup mencari website yang menyediakan palet warna atau nama-nama warna di CSS menggunakan mesin pencari. Salah satu website yang dapat Anda gunakan adalah W3school.

2. Gunakan Inspect Element

Inspect element dalam browser dapat mempermudah dalam menentukan warna CSS. Fitur inspect element memiliki color picker yang dapat digunakan untuk memilih warna.

Dengan demikian, fitur inspect element adalah alat terbaik untuk bereksperimen dengan warna dan kode CSS lainnya. Selengkapnya tentang inspect element pada browser dapat Anda pelajari pada artikel: Inspect Element

3. Konsisten Penggunaan Format Warna

Ada baiknya untuk konsisten menggunakan satu format penulisan warna dalam CSS. Misalnya, jika di awal Anda menggunakan nilai heksadesimal, maka gunakan nilai heksadesimal untuk seluruh penulisan warna dalam CSS.

Hal ini bertujuan agar kode CSS lebih mudah dibaca dan tidak tercampur dengan format penulisan lainnya, sehingga kode menjadi lebih rapi.

BACA JUGA : Tips Memilih Warna Pada Website

Kesimpulan

Penggunaan warna di dalam website dengan CSS sangat diperlukan. Disamping mempercantik atau memperindah website, CSS juga dapat memberikan rasa nyaman user ketika mengunjungi website yang kita bangun.

Ada beberapa format penulisan warna, mulai dari nama warna, RGB dan RGBA, Hexadecimal, sampai HSL. Format nilai penulisan CSS tersebut perlu diperhatikan agar warna dapat digunakan dengan sesuai.

Tips menggunakan warna dalam CSS juga perlu diperhatikan agar dapat mempermudah para developer website untuk menentukan dan memilih warna dengan baik dan indah.

Itulah sesi belajar CSS bagian 5 yang membahas tentang memberikan warna dengan CSS. Tunggu series belajar CSS bagian 6 yang akan kami publish dalam beberapa hari lagi! Semoga bermanfaat.