ʻO HSL ka ala aloha e koho i kahi waihoʻoluʻu, ʻo RGB ke ʻai ʻia e nā pale, canvas API a me ke kaila kiʻi. Hoʻololi kēia mālama i kēlā me kēia hue, saturation a me lightness i mau kanal 0–255 pololei.
Pehea e hana ai ka kahuli mai HSL i RGB
- E hoʻololi i S a me L i mau ʻāpana a helu i ka chroma C = (1 − |2L − 1|) × S.
- E hoʻokaʻawale i ka hue ma 60 e ʻike i kona segment ma ke huila waihoʻoluʻu a helu i ka waiwai pakati X = C × (1 − |(H/60 mod 2) − 1|).
- E kau i C, X a me 0 i nā wahi R, G a me B e like me kēlā segment.
- E hoʻohui i ka offset lightness L − C/2 i nā kanal āpau a hoʻonui i ka 255.
Laʻana i hana
Pololei ka hopena a hiki i ka rounding hope i nā kanal piha. Kōkua ʻia nā hue a me saturation he ʻāpana a pahu wale lākou i ka triple RGB kokoke loa.
HSL a me RGB wehewehe
He aha ka HSL?
Māhele ka HSL i kahi waihoʻoluʻu i ka hue (0–360° ma ke huila waihoʻoluʻu), saturation (pehea ka waihoʻoluʻu, 0–100%) a me ka lightness (pehea ka ʻālohilohi, 0–100%). No ka mea e hoʻopili ana kēlā me kēia ʻāpana i ke ʻano e wehewehe ai nā kānaka i ka waihoʻoluʻu, ʻo HSL ka ʻano maʻalahi no ka hana i nā tints, shades a me nā paʻi pūnāwai pono — ma lima a i ʻole ma ke code.
- Hana kikokiko:
- hsl(H, S%, L%)
- Awāwa:
- 0–360°, 0–100%, 0–100%
- Mākou kūpono no:
- nā paʻi pūnāwai, tints a me nā shades, theming
He aha ka RGB?
Hōʻike ka RGB i kahi waihoʻoluʻu ma mau kanaloku ʻekolu o ke kukui — ʻulaʻula, ʻōmaʻomaʻo a me ke kanaloku polū — kēlā me kēia mai 0 a 255. Hoʻohuli ia i ka hana o nā pale maoli: inā pau nā ʻekolu i 255, makaʻele ke keʻokeʻo; inā pau i 0, makaʻele ka ʻeleʻele. He kūpono ka RGB inā pono ʻoe e hoʻoluku me kahi waihoʻoluʻu, a hoʻohui ʻia ka rgba() no ka ʻolepili.
- Hana kikokiko:
- rgb(R, G, B)
- Awāwa:
- 0–255 per channel
- Mākou kūpono no:
- code, canvas, koʻikoʻi me rgba()
HSL to RGB reference table
Nā waihoʻoluʻu CSS maʻamau loa, i kahuli ʻia mai HSL a i RGB.
| Waihoʻoluʻu | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |