Hilbijartina rengê di HSL de aram e, lê stylesheets, berdanên dizayn û belgeyên brand hîne li ser HEX dixebitin. Ev guherandin ew fûrsêt diafirîne û bo her komeleya hue, saturation û lightness hêman koda şeş-hejmarîyê dide.
Çawa guhertina ji HSL bo HEX dixebite
- Saturation û lightness biguherînin bo parçe: 60% bibe 0.6.
- Chroma C hesib bike C = (1 − |2L − 1|) × S — ev diyar dike reng çiqas ji gris (grey) dûr e.
- Bi kurt û hevahengiyê hue-ê vê chroma li ser kanalên sor, kesk û şîn bike, paşê hemû sê kanal bi L − C/2 biguherîne.
- Her kanal bi 255 pirrbike, girêdane bike û wê wek du hejmara hexadecimal nivîse.
Mînakî ku xebitî
Girdandin carek dike, di gavê paşîn de, dema ku her kanal hatî danîn êdî bo nirxek tevahî 0–255. Encama wî herî nêzîk koda HEX-ê ya ji bo HSL-a te ye û gelemperî heman e ku amûra dizaynê nîşan dide.
HSL û HEX vekirî
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
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
Tabela referansê ji HSL bo HEX
Renganên herî gelek di CSS de, guhertî ji HSL bo HEX.
| Reng | 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 |