HSL rengê wekî ku mirov dibêje têxistine: ka çi hue, çiqas rengdarî, çiqas ronahî. Guherandina koda HEX bo HSL rêyeke zû ye da ku rengê biçî formek ku tu dikarî rast bikin — ronîyê zêde bikî, tûjî bikî an jî tevgerên tevgeran çêkî.
Çawa guhertina ji HEX bo HSL dixebite
- Koda HEX biguherîne bo RGB û her kanal bi 255 ve biceribîne, da ku hemû sê di navbera 0 û 1 de bin.
- Mezintrîn û biçûktrîn ji wan sê nirxan bibîne. Navîn (average) wan ronahî L e.
- Vejîn (spread) di navbera wan de tê xuyang kirin ku saturation Sê rêk xistin: ji bo renkên ron divê wê bi (2 − max − min) parçe bikin, an jî ji bo rengên tarî bi (max + min).
- Kanalê ku nirxê herî mezin digire hue H diyar dike — sor li 0°, kesk li 120°, şîn li 240° — û du kanalên din hue di nav vî segmentê de pozîsyon dide.
Mînakî ku xebitî
Matematik rast e, lê nirxên HSL normalî wek pîvanên tevahî ya derece û sedeyên têkildar têne girdandin. Vegerandinê dîsa dikare herdu an yek qadam ji RGB-ê ya orjînal dûr bibe — di pratîkê de nêrastî ye, lê heke tu rengan dûr vegere gelek caran hewce ye bizanî.
HEX û HSL vekirî
HEX çi ye?
Kodê HEX hejmarê hexdîsimal a şeş-hedî ye ku kanalan sor, kesk û şîn a rengê di piştê #ê de têne tomar kirin. Her hevok ji du hewlîdan xwe kanalek dide, ji 00 (neheş) heta FF (temam), ku wê heman 16.7 milyon rengên wek RGB di notasyona kurtir de peyda dike. HEX di CSS, amûrên dizayn û rêbazên brandê de nirxeke bingehîn e.
- Sintaks:
- #RRGGBB
- Range:
- 00–FF per channel
- Baştirîn ji bo:
- CSS, vegerandina dizaynê, rêbazên brand
HSL çi ye?
HSL rengek di sê beşan de dikeve: hue (0–360° li ser çarçoveya rengan), saturation (çawa rengdar, 0–100%) û lightness (çawa ronahî, 0–100%). Ji ber ku her beş wek awayê mirovan reng îzah dikin têkildar e, HSL hêsantirîn format e bo avakirinê tint, shade û paletên pêwist — bi dest an di kodê de.
- Sintaks:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Baştirîn ji bo:
- palet, tint û shade, theming
Tabela referansê ji HEX bo HSL
Renganên herî gelek di CSS de, guhertî ji HEX bo HSL.
| Reng | 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%) |