Dasar-dasar CSS: Bekerja dengan Warna

Ada banyak faktor yang perlu dipertimbangkan ketika merancang sebuah situs web; font, aliran UX, dan banyak lagi. Salah satu elemen desain yang sangat penting adalah warna. Bahkan keputusan sederhana seperti warna merek, warna batas, dan warna latar belakang memberikan dampak yang pasti dan nyata.

Dalam artikel ini, kita akan membahas dasar-dasar warna CSS dan mempelajari cara mengubah situs HTML menjadi situs web yang tampak sempurna.

Memulai Dengan Warna CSS

Ada cara tertentu untuk menggambarkan warna dalam CSS yang dapat dipahami oleh komputer. Ini biasanya dilakukan dengan memecah warna menjadi berbagai komponen, menghitung satu set campuran warna primer untuk membentuk warna yang diinginkan. Ada beberapa cara berbeda untuk mendeskripsikan warna dalam CSS.

Menggunakan nama warna sebagai Kata Kunci

Ada sekitar 140 nama warna CSS yang didukung oleh sebagian besar browser modern. Itu bisa sesederhana merah atau cyan untuk kata kunci warna. Meskipun membantu dengan rentang warna yang moderat, Anda terbatas pada beberapa set warna dengan nol kontrol pada corak dan rona. Di sinilah Anda harus melompat ke rentang opsi warna CSS yang lebih tinggi.

/*Syntax*/
warna merah;
warna: merah tua;
warna: biru tua;

Menggunakan Nilai RGB

Saat mendesain situs web atau aplikasi, skema warna sangat penting—itu pasti bukan hal terakhir yang Anda pertimbangkan. Di CSS, Anda dapat menggunakan tiga metode untuk mewakili warna RGB. Ini adalah notasi string heksadesimal, notasi fungsional RGB, dan notasi fungsional HSL. Berikut adalah melihat lebih dekat pada masing-masing.

Notasi String Heksadesimal

Notasi string heksadesimal selalu dimulai dengan karakter #. Mengikuti karakter ini, Anda menentukan warna menggunakan digit heksadesimal dari kode warna tertentu. String tidak peka huruf besar/kecil, tetapi menggunakan huruf kecil adalah hal yang biasa. Berikut adalah beberapa kasus penggunaan:

#rrggbb

Ini adalah cara paling umum untuk menggambarkan warna numerik. Ini adalah warna yang sepenuhnya buram dengan komponen merah, hijau, dan biru sebagai 0xrr, 0xgg, dan 0xbb masing-masing.

#rrggbbaa

Ini mengikuti kriteria RGB yang diuraikan di atas dengan saluran alfa yang menangani kemilau warna. Semakin rendah 0xaa nilainya adalah, semakin tembus warnanya.

#rgb

Jika Anda memiliki warna #556677, Anda cukup menuliskannya sebagai #567 karena mewakili 0xrr, 0xgg, dan 0xbb masing-masing. Contohnya, #000 (atau #000000) berwarna hitam sedangkan #fff (atau #ffffff) putih.

#rgba

Ini mengikuti kriteria di atas dengan saluran alfa yang ditentukan oleh 0xaa untuk mengontrol opasitas.

Notasi Fungsional RGB

Notasi fungsional RGB merepresentasikan warna menggunakan komponen merah, hijau, dan biru. Ini didefinisikan menggunakan rgb() fungsi yang menerima parameter input dalam bentuk komponen merah, hijau, dan biru primer (dan saluran alfa opsional). Nilai merah, hijau, dan biru harus berupa bilangan bulat antara 0 ke 255 (inklusif), atau persentase yang bervariasi dari 0% hingga 100%. Di sisi lain, saluran alfa menerima nilai dari 0,0 (benar-benar transparan) hingga 1,0 (benar-benar buram). Itu juga menerima nilai persentase dari 0% (sama dengan 0,0) dan 100% (sama dengan 1,0).

/*Syntax*/
warna: rgb (rr, gg, bb);
warna: rgba (rr, gg, bb, a);

Notasi Fungsional HSL

Notasi fungsional HSL merepresentasikan warna menggunakan hue, saturation, dan luminositas. Ini sangat mirip dengan rgb() fungsi dalam hal penggunaan. Anda bisa dengan mudah temukan nilai heksagonal warna apa pun di layar komputer Anda. Dalam metode warna ini, rona menentukan warna sebenarnya menurut posisi pada roda warna. Saturasi adalah persentase abu-abu dengan rona semaksimal mungkin. Luminositas mentransisikan warna dari tampilan yang paling gelap ke yang paling terang seiring bertambahnya warna.

Nilai rona (H) ditentukan oleh unit sudut yang didukung di CSS. Itu termasuk derajat, rad, lulusan, dan berbelok. Saturation (S) menentukan persentase warna akhir yang terdiri dari hue. Komponen luminositas (L) mendefinisikan tingkat keabuan.

/*Syntax*/
warna: hsl (XXdeg, XX%, XX%);
warna: hsl (XXturn, XX%, XX%);

Menerapkan Warna ke Elemen HTML

Dalam CSS, warna properti mendefinisikan warna latar depan konten, dan warna latar belakang mendefinisikan warna latar belakang konten yang terstruktur oleh HTML. Saat sebuah elemen dirender, Anda bisa menggunakan properti warna untuk menatanya.

Properti Warna untuk Teks

NS warna properti digunakan saat menggambar teks dan ketika Anda membutuhkan segala jenis dekorasi teks. Anda dapat menggunakan teks-dekorasi-warna properti untuk membuat garis bawah, garis luar, atau garis coret dengan warna berbeda. Anda dapat mengubah warna latar belakang teks menggunakan warna latar belakang Properti. Anda dapat menerapkan efek bayangan pada teks menggunakan bayangan teks Properti. Anda dapat memilih teks-penekanan-warna saat menggambar simbol penekanan di bidang teks.

Properti Warna untuk Kotak

Seperti yang Anda ketahui, semua yang ada di halaman web mengikuti model kotak. Jadi, setiap elemen adalah kotak dengan beberapa jenis konten dan padding opsional, batas, dan area margin. Anda dapat menggunakan warna latar belakang properti ketika tidak ada konten latar depan. Saat Anda menggambar garis untuk memisahkan kolom teks, Anda dapat menggunakan kolom-aturan-warna properti untuk itu. Ada sebuah garis-warna properti untuk mewarnai garis. Perhatikan bahwa kerangka berbeda dari batas—bertindak sebagai indikator fokus.

Properti Warna untuk Perbatasan

Setiap elemen HTML dapat memiliki batas. Anda dapat mengatur perbatasan-warna properti sebagai perbatasan-atas-warna, batas-kanan-warna, batas-bawah-warna, dan perbatasan-kiri-warna untuk mengatur warna batas sisi yang sesuai. Namun, menggunakan properti singkatan adalah praktik yang baik.

NS border-inline-start-color properti memungkinkan Anda mewarnai tepi perbatasan yang paling dekat dengan awal. Di sisi lain, border-inline-end-color properti memungkinkan Anda mewarnai akhir awal baris teks di dalam kotak. Meskipun itu bervariasi tergantung pada Anda mode penulisan, orientasi teks, dan arah.

Penutup: Warna dan Aksesibilitas

Meskipun situs web yang dirancang dengan indah sangat dipengaruhi oleh warna yang digunakan, Anda harus selalu memastikan bahwa itu dapat diakses. Penggunaan warna yang tidak tepat dapat mengakibatkan hilangnya lalu lintas yang signifikan di situs web Anda.

Menggunakan notasi string heksadesimal, nama warna, atau nilai RGB sepenuhnya terserah Anda. Pastikan Anda menggunakan warna untuk memperkuat teks yang ada, dan membuatnya mengikuti hierarki visual yang ditentukan. Mempelajari lebih lanjut tentang teori warna dan membuat palet Anda sendiri adalah ide yang luar biasa jika Anda seorang pengembang web pemula. Sampai saat itu, pengkodean yang bahagia dan penuh warna!

Cara Menggunakan Teori Warna untuk Meningkatkan Proyek Kreatif Anda

Dengan menggunakan warna yang tepat dengan cara yang benar, Anda dapat membawa proyek kreatif Anda ke tingkat yang sama sekali baru.

Baca Selanjutnya

Tentang Penulis