Nilai CSS Color Hukum

Warna CSS

Warna dalam CSS dapat ditentukan dengan metode berikut:

warna heksadesimal
warna RGB
warna RGBA
warna HSL
warna HSLA
Nama-nama warna standar / Cross-browser

Warna heksadesimal

nilai warna heksadesimal didukung di semua browser utama.

Sebuah warna heksadesimal ditentukan dengan: #RRGGBB, dimana RR (red) , GG (green) dan BB (blue) integer heksadesimal menentukan komponen warna. Semua nilai harus antara 00 dan FF.

Sebagai contoh, # nilai 0000ff diterjemahkan sebagai biru, karena komponen biru diatur ke nilai tertinggi (ff) dan yang lainnya ditetapkan untuk 00.

Contoh

Tentukan warna HEX yang berbeda:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Cobalah sendiri "

Warna RGB

RGB nilai warna yang didukung di semua browser utama.

Nilai warna RGB ditentukan dengan: rgb(red, green, blue) . Setiap parameter (merah, hijau, dan biru) mendefinisikan intensitas warna dan dapat menjadi integer antara 0 dan 255 atau nilai persentase (from 0% to 100%) .

Sebagai contoh, rgb(0,0,255) nilai yang diberikan sebagai biru, karena parameter biru diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.

Juga, nilai berikut menentukan warna yang sama: rgb(0,0,255) dan rgb(0%,0%,100%) .

Contoh

Menentukan warna RGB yang berbeda:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Cobalah sendiri "

Warna RGBA

RGBA nilai warna yang didukung di IE9 +, Firefox 3+, Chrome, Safari, dan Opera 10 +.

RGBA nilai warna merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity dari objek.

Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha) . Parameter alpha adalah angka antara 0,0 (fully transparent) dan 1,0 (fully opaque) .

Contoh

Menentukan warna RGB yang berbeda dengan opacity:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Cobalah sendiri "

Warna HSL

nilai warna HSL didukung dalam IE9 +, Firefox, Chrome, Safari, dan Opera 10 +.

HSL singkatan hue, saturation, dan ringan - dan merupakan representasi silinder-koordinat warna.

Nilai warna HSL ditentukan dengan: hsl(hue, saturation, lightness) .

Hue adalah gelar pada roda warna (from 0 to 360) - 0 (or 360) berwarna merah, 120 hijau, 240 biru. Saturasi adalah nilai persentase; 0% berarti warna abu-abu dan 100% adalah penuh warna. Lightness juga persentase; 0% hitam, 100% adalah putih.

Contoh

Tentukan warna HSL yang berbeda:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

Cobalah sendiri "

Warna HSLA

HSLA nilai warna yang didukung di IE9 +, Firefox 3+, Chrome, Safari, dan Opera 10 +.

HSLA nilai warna merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity dari objek.

Nilai warna HSLA ditentukan dengan: hsla(hue, saturation, lightness, alpha) , dimana parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0,0 (fully transparent) dan 1,0 (fully opaque) .

Contoh

Tentukan warna HSL berbeda dengan opacity:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Cobalah sendiri "