HSL is de freonlike manier om in kleur te kiezen; RGB is wat skermen, canvas-API's en ôfbyldingskoade echt brûke. Dizze konverter set hokker hue, saturation en lightness-triple dan ek om yn presize 0–255-kanalen.
Hoe konversje fan HSL nei RGB wurket
- Set S en L om nei brekken (fractions) en berekkenje de chroma C = (1 − |2L − 1|) × S.
- Diele de hue troch 60 om it segmint op it kleurwiel te finen en berekkenje it yntermidiale X = C × (1 − |(H/60 mod 2) − 1|).
- Wize C, X en 0 ta oan de R-, G- en B-plekken neffens dat segmint.
- Foegje de lightness-offset L − C/2 ta oan alle trije kanalen en fermeitsje mei 255.
Wurkend foarbyld
It resultaat is krekt oant de lêste afrûning nei heule kanalen. Fractionele hue of saturationwearden wurde stipe en lizze gewoan op it tichtstby lizzen RGB-tripel.
HSL en RGB útlis
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
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()
HSL nei RGB referinsjetabel
De meast foarkommende CSS-kleuren, konvertearre fan HSL nei RGB.
| Kleur | 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) |