HSL rêyeke hevalperest e bo hilbijartina rengê, lê RGB ew e ku ekranan, canvas API'yan û koda wêne rastî dixwazin. Ev veguherîner her hue, saturation û lightnessê di rêzeya rast 0–255 kanalên de dikeve.
Çawa guhertina ji HSL bo RGB dixebite
- S û L biguherîne bo parçe û chroma C = (1 − |2L − 1|) × S hesab bike.
- Hê (hue) bi 60 beş bike da ku segmenta wê li ser çarçoveya rengan bibîne û nirxa navîn X = C × (1 − |(H/60 mod 2) − 1|) hesab bike.
- Li gorî wê segmentê C, X û 0 bi rêza R, G û B ve binivîse.
- Offset-a lightness L − C/2 zêde bike ser hemî sê kanal û bi 255 multipliyê bike.
Mînakî ku xebitî
Encam heta dawî li gorî girêdanê bo hejmara temamî rast e. Nirxên hue an saturationê ku parçeyên ne-tamam in jî destûr in û bi tenê li ser nirxê RGB ya herî nêzîk dê rawestin.
HSL û RGB 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
RGB çi ye?
RGB rengek wek sê kanalên ronahiyê tê dîyar kirin — sor, kesk û şîn — her yek ji 0 heta 255. Ew rifeya çawa ekranan rastî xebitînin nîşan dide: hemû sê bi 255 spî dikin, hemû bi 0 re reş. Heke tu divê bi hejmaran hesab bike, RGB bijarteke rast e, û rgba() jî serî transparansê zêde dike.
- Sintaks:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Baştirîn ji bo:
- kod, canvas, transparans bi rgba()
Tabela referansê ji HSL bo RGB
Renganên herî gelek di CSS de, guhertî ji HSL bo RGB.
| Reng | 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) |