Berbagai warna CSS
Ada banyak cara memberi nilai warna di CSS, seperti kode RGB, HEX, HSL, RGBA, HSLA atau dengan nama unik langsung
Untuk memberi nilai pada properti color
atau background-color
, kita bisa memberi dengan berbagai jenis cara seperti melalui namanya langsung atau kode warna (RGB, HEX, HSL, RGBA, HSLA).
😲 Info sampingan
Ada banyak properti lain selain `color` dan `background-color` yang bisa diberi warna. Nanti kita intip ya..Warna CSS dengan namanya
Dikutip dari situs w3school, ada 140 warna bernama yang bisa kita pakai langsung! akan kita lihat daftarnya di bagian lain.
Berikut contoh populer:
black
white
blue
blueviolet
crimson
orange
pink
green
indigo
Warna CSS dengan kode RGB
Kita juga bisa memberi warna dengan kode RGB.
RGB adalah singkatan dari (red , green dan blue), di mana pada teori warna di dunia nyata, kita bisa mengkombinasikan tiga warna ini, untuk mendapatkan berbagai jenis warna lain!.
Cara
- Setelah properti, beri nilai rgb(kode warna merah, kode warna hijau, kode warna biru)
- range kode warna bisa dari 0 sampai 255
Contoh
<p style="background-color:rgb(100, 25, 25);">Saya diwarnai dengan RGB</p>
Saya diwarnai dengan RGB
Klik untuk melihat warna RGB
Warna CSS denga kode hex
Selain RGB, ada juga pengkodean warna populer yaitu hex
. Dimana menggunakan angka hexadesimal untuk membuat warna.
Strukturnya: tanda pagar - diikuti dengan 6 angka hex
Contoh nilai warna (bukan kode CSS)
hitam = `#000000`
putih = `#ffffff`
Contoh kode CSS
<p style="background-color:#32a852;">Saya diwarnai dengan RGB</p>
Saya diwarnai dengan Kode HEX
Link slider warna di google, untuk melihat warna dan kodenya.
Cara mana yang harus saya gunakan?
Mana saja boleh! kalau kamu mau spesifik bisa pakai kode warna seperti RGB atau HEX, jika ingin mudah diingat, bisa gunakan warna yang bernama
.
Ketika kerja nanti normalnya seorang desainer sudah menentukan warnanya dan kamu harus menggunakan persis warna tersebut berdasarkan kodenya.