RGB seit in skerm hoefolle ljocht it útstjoert; HSL seit wat de kleur eins liket. De trije kanaals omsette nei hue, saturation en lightness makket in kleur maklik te passen mei de hân.
Hoe konversje fan RGB nei HSL wurket
- Dield R, G en B troch 255 sadat elke wearde tusken 0 en 1 lizze.
- Neem it maksimum en it minimum fan de trije — har gemiddelde is de helderheid L.
- As maksimum en minimum gelyk binne, is de kleur griis: hue en saturation binne beide 0.
- Oars ôflaat S út de fersprieding tusken maksimum en minimum, en lêze H ôf fan hokker kanaal it maksimum is.
Wurkend foarbyld
Yn prinsipe presys. Om't H, S en L gewoonlik as rûnte heule wearden werjûn wurde, kin werom konvertearjen in kanaal ien of twa stappen feroarje.
RGB en HSL útlis
Wat is RGB?
RGB beskriuwt in kleur as trije ljochtkanalen — reade, griene en blauwe — elk fan 0 oant 255. It spiegelt hoe skermen eins wurkje: alle trije op 255 jouwe wyt, alle trije op 0 jouwe swart. RGB is de juste kar asst mei de nummers wurkje moat, en rgba() foeget transparânsje derboppe ta.
- Syntaks:
- rgb(R, G, B)
- Berik:
- 0–255 per kanaal
- Bêst foar:
- koade, canvas, transparânsje mei rgba()
Wat is HSL?
HSL splitst in kleur yn hue (0–360° op it kleurfiel), saturation (hoe kleurryk, 0–100%) en lightness (hoe ljocht, 0–100%). Omdat elk diel past by hoe minsken kleuren beskriuwe, is HSL it maklikste formaat foar it bouen fan tinten, shades en konsistente paletten — hânmjittich of yn koade.
- Syntaks:
- hsl(H, S%, L%)
- Berik:
- 0–360°, 0–100%, 0–100%
- Bêst foar:
- paletten, tinten en shades, theming
RGB nei HSL referinsjetabel
De meast foarkommende CSS-kleuren, konvertearre fan RGB nei HSL.
| Kleur | 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%) |