RGB ekranê re dibêje çiqas ronahî bixire; HSL jî dibêje reng çawa dîtî ye. Guherandina sê kanal bo hue, saturation û lightness rengê bi destan zû tê guhertin.
Çawa guhertina ji RGB bo HSL dixebite
- R, G û B bi 255 ve biceribîne da ku her nirx di navbera 0 û 1 de bin.
- Mezintrîn û biçûktrîn ji wan sê bigire — navîn wan ronahî L e.
- Heger mezintrîn û biçûktrîn wekhev bin, reng gris e: hue û saturation herdu 0 in.
- Dîsa S ji vejîna navbera mezintrîn û biçûktrîn derxîne, û H ji kanalê ku herî mezin e xwendin.
Mînakî ku xebitî
Bi bingeh rast e. Lê ji ber ku H, S û L gelemperî wek hejmarên tevahî têne nîşandan, vegerandin dikare kanalek an du qadam biguherîne.
RGB û HSL vekirî
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()
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 RGB bo HSL
Renganên herî gelek di CSS de, guhertî ji RGB bo HSL.
| Reng | 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%) |