CSS hsl() Fungsi
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 */
Definisi dan Penggunaan
Fungsi hsl() mendefinisikan warna menggunakan model Hue-saturation-lightness (HSL).
HSL adalah singkatan dari Hue, Saturation, dan Lightness - dan mewakili representasi koordinat silinder dari warna.
| Versi: kapan: | CSS3 |
|---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi tersebut.
| Function | |||||
|---|---|---|---|---|---|
| hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
Sintaks CSS
hsl(hue, saturation, lightness)
| Value | Description |
|---|---|
| hue | Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue |
| saturation | Defines the saturation; 0% is a shade of gray and 100% is the full color (full saturation) |
| lightness | Defines the lightness; 0% is black, 50% is normal, and 100% is white |