O le filifilia o se lanu i le HSL e talafeagai, ae o faiga, tufatufaga sitaili ma pepa faʻailoga e tumau i le HEX. O lenei faaliliuga e tapuni le avanoa ma foa'i atu ia te oe le code senetaga e 6 mo soʻo se tuʻufaʻatasiga o hue, saturation ma lightness.
Auala e galue ai le faaliliuga mai HSL i le HEX
- Fa'aliliu le saturation ma le lightness i fa'asologa: 60% e avea ma 0.6.
- Fuafua le chroma C = (1 − |2L − 1|) × S — o le mea lea le mamao e tu ai le lanu mai le efuefu (grey).
- Fa'aoga le hue e tu'u ai lena chroma i luga o auala mumu, lanumeamata ma lanumoana, ona fesuiaʻi ai uma e tolu e le L − C/2.
- Fa'atupula'ia auala taʻitasi i le 255, fa'ataamilosaga, ma tusi i ai o ni digits hexadecimal se lua.
Faataitaʻiga aoga
O le 'rounding' e tutupu i le laasaga mulimuli, pe a fusiina auala taʻitasi i se tau atoa 0–255. O le i'uga o le code HEX lata mai i lau ulufale HSL ma masani lava e tutusa ma le mea o le a faʻaalia e se mea faigaluega tisaini.
HSL ma HEX faamatala
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
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
HSL i le HEX laulau referência
Lanu CSS sili ona masani, faaliliu mai HSL i le HEX.
| Lanu | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |