Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

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).

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.

Artikel detail, kode warna pada HTML dan CSS

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.

👈🏼 Warna background CSS
Background Gambar 👉🏼