O le HSL e fa'amatalaina se lanu talu ai o auala e talanoa ai tagata: po'o le afea le hue, le malosi o le lanu (saturation), ma le susulu (lightness). O le faaliliuina mai le HEX i le HSL o le auala vave e maua ai se lanu i se foafoaga e mafai ona e fetuunaʻi — faʻamalamalama, faʻaitiitia le malosi, poʻo le fausia o se fua atoa mai ai.
Auala e galue ai le faaliliuga mai HEX i le HSL
- Fa'aliliu le code HEX i le RGB ma vaevae ai auala taʻitasi i le 255, ina ia uma e tolu maua i le va o le 0 ma le 1.
- Saili le taua sili ona maualuga ma le laʻititi o foliga e tolu. O latou averesi o le lightness L.
- O le vaevaega i le va o i latou e faʻaosoina le saturation S: vaevaeina i le (2 − max − min) mo lanu malamalama, pe i le (max + min) mo lanu pogisa.
- O le auala o loo i le tulaga maualuga e filifilia le hue H — mumu i le 0°, lanumeamata i le 120°, lanumoana i le 240° — ma o isi auala e lua e tulaga ai le hue i totonu o lena vaega.
Faataitaʻiga aoga
O le numera e saʻo, ae o tau HSL e masani ona fa'ataamilosaga i tikeri atoa ma pasene. O le toe faaliliuina i tua e mafai ona tu'u ai i se vaega RGB tasi po'o ni nai sitepu ese mai le amataga — e le iloa i le mata, ae talafeagai ona e iloa pe a e faia se 'round-trip' i lanu soo.
HEX ma HSL faamatala
O le ā le HEX?
O le HEX o se numera hexadecimal e ono-numera e teu ai le auala mumu, lanumeamata ma lanumoana o se lanu i tua atu o se # i luma. O pa i numera taitasi e ufiufi se chanel, mai le 00 (leai) i le FF (atoatoa), lea e maua ai le tutusa 16.7 miliona lanu e pei o RGB i se faaliliuga puupuu. HEX o le faatulagaga masani i le CSS, meafaigaluega mamanu ma taiala faailoga.
- Syntax:
- #RRGGBB
- Vaega:
- 00–FF i le chanel
- Sili ona talafeagai mo:
- CSS, handoff mamanu, taiala faailoga
O le ā le HSL?
O le HSL e vaevaeina se lanu i le hue (0–360° i le uili lanu), saturation (faatatau i le lanu, 0–100%) ma le lightness (fiafia pe mālamalama, 0–100%). Talu ai e fetaui vaega taʻitasi ma le auala e faamatala ai e tagata lanu, HSL o le faatulagaga sili ona faigofie mo le fausiaina o tints, shades ma paleti tumau — i lima poʻo le code.
- Syntax:
- hsl(H, S%, L%)
- Vaega:
- 0–360°, 0–100%, 0–100%
- Sili ona talafeagai mo:
- paleti, tints ma shades, theming
HEX i le HSL laulau referência
Lanu CSS sili ona masani, faaliliu mai HEX i le HSL.
| Lanu | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |