ImageColorPicker.com

HSL na RGB omskakelaar

Skakel enige HSL-kleur na RGB om — onmiddellik en gratis

#F39C12

Plak enige kleurwaarde — ons herken die formaat vir jou.

H
S
L
RGB resultaat
Rooi
243
Groen
156
Blou
18

Hierdie kleur in elke formaat

CMYK-profiel: Coated FOGRA39 (Photoshop se standaard vir Europa)

HSL is die vriendelike manier om ’n kleur te kies; RGB is wat skerms, canvas-API’s en beeldkode werklik verbruik. Hierdie omskakelaar sit enige tint, versadiging en ligtheidsdrieklank om in presiese 0–255-kanale.

Hoe HSL na RGB omskakeling werk

  1. Skakel S en L om na breuke en bereken die chroma C = (1 − |2L − 1|) × S.
  2. Deel die tint deur 60 om sy segment op die kleurwiel te vind en bereken die intermedière waarde X = C × (1 − |(H/60 mod 2) − 1|).
  3. Ken C, X en 0 toe aan die R-, G- en B-gleuwe volgens daardie segment.
  4. Voeg die ligtheidsverskuiwing L − C/2 by al drie kanale en vermenigvuldig met 255.

Werkende voorbeeld

HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)

Die resultaat is presies tot by die finale afronding na heelkanale. Breukwaardes vir tint of versadiging word ondersteun en land eenvoudig op die naaste RGB-drieklank.

HSL en RGB verduidelik

Wat is HSL?

HSL verdeel ’n kleur in hue (0–360° op die kleurwiel), versadiging (hoe kleurvol, 0–100%) en ligtheid (hoe helder, 0–100%). Omdat elk van hierdie dele ooreenstem met hoe mense kleur beskryf, is HSL die maklikste formaat om tint-, skadu- en konsekwente palette te bou — met die hand of in kode.

Sintaks:
hsl(H, S%, L%)
Reeks:
0–360°, 0–100%, 0–100%
Beste vir:
palette, tint- en skaduwerk, theming

Wat is RGB?

RGB beskryf ’n kleur as drie ligkanale — rooi, groen en blou — elk van 0 tot 255. Dit weerspieël hoe skerms werklik werk: almal by 255 gee wit, almal by 0 gee swart. RGB is die regte keuse wanneer jy met die nommers moet reken, en rgba() voeg deursigtigheid bo-op.

Sintaks:
rgb(R, G, B)
Reeks:
0–255 per kanaal
Beste vir:
kode, canvas, deursigtigheid met rgba()

HSL na RGB verwysingstabel

Die mees algemene CSS-kleure, omgeskakel van HSL na RGB.

KleurHSLRGB
blackhsl(0, 0%, 0%)rgb(0, 0, 0)
whitehsl(0, 0%, 100%)rgb(255, 255, 255)
redhsl(0, 100%, 50%)rgb(255, 0, 0)
limehsl(120, 100%, 50%)rgb(0, 255, 0)
bluehsl(240, 100%, 50%)rgb(0, 0, 255)
yellowhsl(60, 100%, 50%)rgb(255, 255, 0)
orangehsl(39, 100%, 50%)rgb(255, 166, 0)
tealhsl(180, 100%, 25%)rgb(0, 127, 128)
purplehsl(300, 100%, 25%)rgb(128, 0, 127)
grayhsl(0, 0%, 50%)rgb(128, 128, 128)

Meer kleuromskakelaars

Gereelde vrae

Skakel S en L om na breuke en bereken die chroma C = (1 − |2L − 1|) × S. Deel die tint deur 60 om sy segment op die kleurwiel te vind en bereken die intermedière waarde X = C × (1 − |(H/60 mod 2) − 1|). Ken C, X en 0 toe aan die R-, G- en B-gleuwe volgens daardie segment. Voeg die ligtheidsverskuiwing L − C/2 by al drie kanale en vermenigvuldig met 255.

Die resultaat is presies tot by die finale afronding na heelkanale. Breukwaardes vir tint of versadiging word ondersteun en land eenvoudig op die naaste RGB-drieklank.

RGB beskryf ’n kleur as drie ligkanale — rooi, groen en blou — elk van 0 tot 255. Dit weerspieël hoe skerms werklik werk: almal by 255 gee wit, almal by 0 gee swart. RGB is die regte keuse wanneer jy met die nommers moet reken, en rgba() voeg deursigtigheid bo-op.

Ja. Die ruilknoppie langs die invoer neem jou na die RGB na HSL omsetter, wat presies op dieselfde manier werk. Albei rigtings gebruik dieselfde formule, net omgekeerd toegepas.

Genereer jy ’n palet in kode? Loop oor die tint in HSL en skakel elke stap na RGB om — jy kry ewe gespaseerde kleure wat geen handmatige RGB-fyninstelling kan ewenaar nie.