HSL dekri yon koulè jan moun pale de li: ki hue, ki jan koulò li, ki jan klere li ye. Konvèti yon kòd HEX an HSL se fason ki pi rapid pou jwenn koulè a nan yon fòma ou ka modifye fasil — limen li, fè li pi dous, oswa konstwi yon echèl antye soti ladan li.
Ki jan konvèsyon HEX an HSL mache
- Konvèti kòd HEX la an RGB epi divize chak chanèl pa 255, pou yo tout ant 0 ak 1.
- Jwenn pi gwo ak pi piti nan twa valè yo. Mwayèn yo se limyè L.
- Ecart ant yo detèmine saturasyon S: divize li pa (2 − max − min) pou koulè ki klere, oswa pa (max + min) pou koulè ki fonse.
- Chanèl ki gen valè maksimòm lan deside hue H — wouj nan 0°, vèt nan 120°, ble nan 240° — epi de lòt chanèl yo pozisyone hue a andedan segman sa a.
Egzanp ki mache
Matematik la egzak, men valè HSL yo nòmalman awondi nan degre antye ak pousantaj. Konvèsyon retou ka fè li deplase youn oswa de etap RGB lwen orijinal la — envizib an pratik, men vo konnen si w ap vire koulè yo souvan.
HEX ak HSL esplike
Kisa HEX ye?
Yon kòd HEX se yon nimewo egzadesimal sis chif ki estoke chanèl wouj, vèt ak ble yon koulè devan yon # kòmanse. Chak pè chif reprezante yon chanèl, soti nan 00 (pa gen okenn) rive FF (konplè), sa ki bay menm 16.7 milyon koulè RGB yo nan yon notasyon pi kout. HEX se defo nan CSS, zouti konsepsyon ak gid mak.
- Sentaks:
- #RRGGBB
- Ranje:
- 00–FF pou chak chanèl
- Pi bon pou:
- CSS, remèt travay konsepsyon, gid mak
Kisa HSL ye?
HSL separe yon koulè an hue (0–360° sou wou koulè a), saturation (ki jan koulè a vivan, 0–100%) ak lightness (ki jan li klere, 0–100%). Paske chak pati matche ak fason moun dekri koulè, HSL se fòma ki pi fasil pou konstwi tints, shades ak palèt konsistan — manyèlman oswa nan kòd.
- Sentaks:
- hsl(H, S%, L%)
- Ranje:
- 0–360°, 0–100%, 0–100%
- Pi bon pou:
- palèt, tints ak shades, theming
Tab referans HEX an HSL
Koulè CSS ki pi komen yo, konvèti soti nan HEX an HSL.
| Koulè | 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%) |