4 Cara Mendefinisikan Warna di CSS

Poin Penting

• Menggunakan Nama Warna: CSS menyediakan 145 nama warna untuk pemilihan warna yang mudah dan ramah bagi pemula, namun pilihannya terbatas dan mungkin tidak memenuhi kebutuhan desain yang tepat.
• Kode Warna Heksadesimal: Kode heksadesimal menawarkan beragam pilihan warna dan penyesuaian yang tepat, meskipun kode tersebut mungkin kurang intuitif untuk digunakan dan diingat.
• Nilai Warna RGB dan RGBA: RGB memungkinkan kontrol warna yang akurat dengan nilai numerik, sementara RGBA menambahkan transparansi. Penting untuk memastikan kombinasi warna yang mudah diakses.

Warna adalah salah satu atribut CSS yang paling umum digunakan, memainkan peran penting dalam membentuk identitas visual, suasana hati, dan pengalaman pengguna situs web. CSS menawarkan serangkaian pilihan untuk menggunakan warna, masing-masing disesuaikan dengan kebutuhan dan preferensi desain tertentu.

Meskipun mudah untuk mengabaikan pentingnya definisi warna, pilihan Anda dapat memengaruhi tampilan dan nuansa situs web Anda secara signifikan. Menjelajahi perbedaan antara berbagai metode dan cara menerapkan serta menggabungkannya secara praktis akan meningkatkan kemampuan Anda untuk membuat situs web yang menarik secara visual.

1. Menggunakan Nama Warna

CSS menyediakan cara praktis untuk menentukan warna menggunakan nama, dan ada 145 opsi yang tersedia. Nama warna ini berkisar dari “merah”, “hijau”, dan “biru” hingga warna yang lebih spesifik seperti “karang” atau “lavender”.

Menggunakan warna bernama sangatlah mudah: Anda memilih nama warna seperti “merah” dan menggunakannya di properti CSS yang mendukung nilai warna. Seperti properti termasuk yang sudah jelas warna Dan warna latar belakang, tetapi juga warna batas, warna garis besar, Dan bayangan teks, diantara yang lain.

Nama warna berguna saat Anda memerlukan warna sementara untuk pembuatan prototipe atau ingin kode Anda mudah dibaca. Berikut sintaksnya:

color_property: color_name;

Dalam hal ini, ganti saja nama_warna dengan warna spesifik yang ingin Anda gunakan. Misalnya saja jika Anda ingin mengatur teks warna dari satu paragraf ke merah, menulis:

p {
color: red;
}

Ini akan memberi paragraf Anda warna teks merah:

Kelebihan: Mereka mudah dibaca dan dipahami dalam kode CSS Anda. Mereka ramah bagi pemula, bekerja dengan baik di seluruh browser, dan berguna untuk ide desain cepat.

Kontra: Mereka memiliki pilihan terbatas dan mungkin tidak menawarkan nuansa tepat yang Anda butuhkan, sehingga membatasi kreativitas desain. Selain itu, sistem tersebut mungkin tidak selalu memenuhi persyaratan aksesibilitas yang ketat, dan dukungan pada sistem lama dapat bervariasi.

2. Kode Warna Heksadesimal

Kode warna heksadesimal, sering disebut sebagai “kode hex”, adalah metode paling umum untuk menentukan warna dalam desain web. Kode-kode ini terdiri dari enam karakter kombinasi angka dan huruf (0-9, A-F), yang mewakili campuran komponen merah, hijau, dan biru (RGB) dalam suatu warna.

Meskipun mudah digunakan, memahami cara kerjanya bisa jadi menantang. Anda dapat mengambil mendalami kode hex untuk memahami lebih baik. Berikut adalah contoh dasar bagaimana Anda dapat menggunakan kode hex di CSS:

color: #RRGGBB;

Dalam format ini, RR, GG, dan BB masing-masing mewakili komponen merah, hijau, dan biru. Setiap komponen dapat berkisar dari 00 (tanpa intensitas) hingga FF (intensitas maksimum). Misalnya, jika Anda ingin menyetel warna latar belakang header situs web ke warna biru tertentu, Anda dapat menggunakan kode hex seperti ini:

header {
background-color: #336699;
}

Ini akan menghasilkan warna biru tua:

​​​​​

Anda juga dapat menggunakan singkatan jika masing-masing dari ketiga komponen tersebut mengulangi karakter yang sama dua kali. Anda dapat menulis contoh di atas sebagai:

header {
background-color: #369;
}

Kelebihan: Kode warna heksadesimal menyediakan beragam pilihan warna, memungkinkan Anda menghasilkan corak yang detail dan disesuaikan. Mereka menawarkan kontrol yang mulus atas pilihan warna, menjadikannya ideal untuk kebutuhan desain yang kompleks.

Kontra: Meskipun kode hex sangat berguna, namun kurang intuitif dibandingkan warna bernama. Anda mungkin juga menghadapi tantangan dalam mengingat nilai warna tertentu. Untung, alat untuk menemukan kode hex warna Anda temukan tersedia, membuat prosesnya lebih mudah dikelola.

3. Nilai Warna RGB dan RGBA

Seperti kode heksadesimal, format ini memungkinkan Anda menentukan warna berdasarkan komponen merah, hijau, dan biru. Namun kali ini, Anda dapat menggunakan bilangan bulat yang lebih ramah.

Nilai Warna RGB

Nilai warna RGB adalah metode kedua yang paling umum digunakan untuk mendefinisikan warna dalam CSS. “RGB” mewakili warna merah, hijau, dan biru, dinyatakan sebagai fungsi CSS dengan tanda kurung yang mengikutinya. Di dalam tanda kurung, Anda menetapkan nilai untuk setiap saluran warna, mulai dari 0 hingga 255. Ini memungkinkan Anda mengontrol intensitas merah, hijau, dan biru pada warna yang ingin Anda gunakan.

Berikut sintaksnya:

rgb(red_value, green_value, blue_value);

Mengganti nilai_merah, nilai_hijau, Dan nilai_biru dengan nilai numeriknya masing-masing. Misalnya, Anda bisa mendapatkan warna putih, hitam, dan merah seperti yang ditunjukkan pada gambar ini:

Saat Anda mengatur ketiga saluran warna (merah, hijau, dan biru) ke nilai maksimumnya sebesar 255, ini akan menghasilkan intensitas tertinggi untuk setiap saluran, sehingga menghasilkan warna putih:

.white-box {
 color: rgb(255, 255, 255);
}

Saat Anda mengatur ketiga saluran warna ke nilai minimumnya 0, ini menunjukkan tidak adanya warna di setiap saluran, sehingga menghasilkan warna hitam.

.black-box {
color: rgb(0, 0, 0);
}

Mengatur saluran merah ke nilai maksimumnya 255, sementara saluran lain tetap pada nilai minimum 0, menghasilkan warna merah:

.red-box {
color: rgb(255, 0, 0); 
}

Nilai Warna RGBA

RGBA berfungsi sama seperti RGB, perbedaannya hanya pada penyertaan nilai alpha. Huruf “A” dalam RGBA adalah singkatan dari alpha, yang menentukan tingkat transparansi atau opacity untuk warna yang dipilih. Nilai 0 mewakili transparansi penuh, membuat warna tidak terlihat sepenuhnya, sedangkan nilai 1 mewakili opasitas penuh, menjadikan warna terlihat sepenuhnya.

RGBA sangat berguna ketika Anda ingin membuat elemen dengan berbagai tingkat transparansi, seperti latar belakang transparan atau teks pudar. Sintaks lengkapnya adalah:

color: rgba(red_value, green_value, blue_value, alpha_value);

Di Sini, nilai_merah, nilai_hijau, Dan nilai_biru mewakili saluran warna seperti dalam RGB, dan nilai_alfa menentukan tingkat transparansi.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Dalam contoh ini, nilai alfa 0,5 memberikan transparansi 50% pada warna hijau, sehingga konten di bawahnya dapat terlihat:

Kelebihan: RGB dan RGBA memungkinkan Anda mengontrol warna secara akurat, sehingga memudahkan dalam memilih warna yang tepat dan membuat desain yang menarik secara visual. Mereka kompatibel dengan berbagai browser web, memastikan warna pilihan Anda terlihat konsisten.

Kontra: Tantangannya terletak pada memastikan kombinasi warna yang mudah diakses. Sangat penting untuk memperhatikan rasio kontras, terutama ketika bekerja dengan transparansi dalam RGBA. Pedoman WCAG dapat membantu Anda memastikan desain Anda dapat diakses.

4. Nilai Warna HSL dan HSLA

HSL—kependekan dari Hue, Saturation, dan Lightness—adalah fungsi CSS lain yang mendefinisikan warna. Sama seperti RGB, HSL menggunakan nilai numerik untuk merepresentasikan warna, namun cara kerjanya berbeda. Anda mungkin familiar dengan Nilai HSL dari komponen UI dalam aplikasi desain dan di tempat lain.

Warna: Ini mewakili warna itu sendiri menggunakan derajat pada roda warna, mulai dari 0 hingga 360. Bayangkan ini seperti memilih sebuah titik pada lingkaran, di mana setiap derajat berhubungan dengan warna berbeda. Misalnya, 0 dan 360 derajat untuk warna merah, 120 derajat untuk hijau, dan 240 derajat untuk biru.

Kejenuhan: Saturasi menentukan kejelasan atau intensitas warna. Ini mendefinisikan hubungan warna dengan abu-abu, dengan 0% menjadi skala abu-abu sepenuhnya (desaturasi) dan 100% menjadi saturasi penuh (cerah dan murni).

Keringanan: Lightness mewakili seberapa terang atau gelap warna yang muncul. Hal ini berkaitan dengan posisi warna pada spektrum antara hitam (0%) dan putih (100%). Nilai 50% mewakili warna normal, nilai di bawah 50% akan menggelapkan warna, dan nilai di atas 50% akan mencerahkan warna.

Selain HSL, ada HSLA, dimana “A” adalah singkatan dari “alpha”. Ini mirip dengan “A” di RGBA dan menandakan transparansi.

Berikut sintaksnya:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Menggunakan sintaks ini, ganti nilai_warna, saturasi_persentase, Dan keringanan_persentase dengan nilai spesifik yang Anda inginkan untuk setiap komponen. Misalnya:

div {
background-color: hsl(120, 100%, 50%);
}

Dalam contoh ini, warna latar belakang a div elemen disetel ke hijau cerah menggunakan nilai HSL. Angka 120 mewakili rona (hijau), 100% untuk saturasi penuh, dan 50% mengatur kecerahan ke tingkat seimbang.

Kelebihan: HSL dan HSLA menawarkan penghitungan warna serbaguna menggunakan properti khusus CSS. Mereka sangat kompatibel dengan browser modern dan memungkinkan penyesuaian yang mudah terhadap kecerahan warna.

Kontra: Belajar HSL melibatkan memahami ilmu warna, seperti rona dan saturasi, yang mungkin lebih menantang dibandingkan warna RGB biasa.

Merangkul Kekuatan Warna CSS

Ada lebih banyak metode yang dapat Anda periksa, dan saat Anda menjelajahi berbagai format untuk menentukan warna dalam CSS, perlu diingat bahwa Anda memiliki kekuatan untuk membentuk tampilan, suasana hati, dan pengalaman pengguna situs web Anda.

Pilihan format warna Anda—apakah itu nama warna sederhana, kode heksadesimal, RGB, atau HSL—dapat memengaruhi cara pemirsa memandang situs Anda. Jadi, bereksperimenlah, pelajari, dan temukan definisi warna yang paling sesuai dengan tujuan desain Anda.