Hōʻike ʻo RGB i ka pale i ka nui o ka mālamalama e hoʻokuʻu ai; hōʻike ʻo HSL i ka mea e like maoli ka waihoʻoluʻu. Hoʻololi i nā ʻekolu mau ʻāpana i hue, saturation a me lightness e maʻalahi ai ka hoʻololi lima i ka kala.
Pehea e hana ai ka kahuli mai RGB i HSL
- Wehe i R, G a me B ma 255 no kēlā me kēia mea e noho ai i waena o 0 a 1.
- E lawe i ka nui loa a me ka liʻiliʻi o nā ʻekolu — ʻo ko lāua waena nō ka mālamalama L.
- Inā like ka nui loa a me ka liʻiliʻi, he ʻeleʻele (grey) ka kala: ʻo ka hue a me ka saturation he 0 lāua.
- A i ʻole, loaʻa ka S mai ka ʻokoʻa ma waena o ka nui loa a me ka liʻiliʻi, a helu ai i ka H mai ka ʻāpana i loaʻa ka nui loa.
Laʻana i hana
Pololei ma ka manaʻo. No ka mea hoʻomāhuahua ʻia maʻamau ʻo H, S a me L i nā helu piha, hiki i ka hoʻololi ʻaneʻi i hoʻihoʻi i kekahi ʻāpana i kekahi ʻanuʻu a ʻelua.
RGB a me HSL wehewehe
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()
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
RGB to HSL reference table
Nā waihoʻoluʻu CSS maʻamau loa, i kahuli ʻia mai RGB a i HSL.
| Waihoʻoluʻu | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |