HSL huwa l-mod faċli biex tagħżel kulur, RGB huwa dak li l-iskrins, l-APIs tal-canvas u l-kodiċi tal-immaġni verament jieklu. Dan il-konvertitur jikkonverti kull tripletta ta' hue, saturazzjoni u lightness f'kanali eżatti 0–255.
Kif taħdem il-konverżjoni HSL għal RGB
- Konverti S u L f'frazzjonijiet u kalkula l-chroma C = (1 − |2L − 1|) × S.
- Divide l-hue b'60 biex issib is-segment tiegħu fuq ir-rota tal-kulur u ikkalkula l-valur intermedjarju X = C × (1 − |(H/60 mod 2) − 1|).
- Assenja C, X u 0 lis-slots R, G u B skont dak l-segment.
- Żid l-offst tal-lightness L − C/2 mal-kannali kollha tliet u immultiplika b'255.
Eżempju mwettaq
Ir-riżultat huwa eżatt sakemm tiġi rrotundjata finalment għal kanali sħaħ. Valuri frazjonarji ta' hue jew saturazzjoni huma appoġġjati u jispiċċaw fuq il‑tripletta RGB l-aktar viċin.
HSL u RGB spjegati
X'inhu HSL?
HSL jaqsmu kulur f'ċpar nagħta: hue (0–360° fuq ir-rota tal-kulur), saturation (kemm huwa kulurit, 0–100%) u lightness (kemm hu jiddi, 0–100%). Peress li kull parti tirrifletti kif in-nies jiddeskrivu l-kulur, HSL huwa l-iktar format faċli biex tibni tints, shades u palettes konsistenti — permezz ta' idejn jew fil-kodiċi.
- Sintassi:
- hsl(H, S%, L%)
- Firxa:
- 0–360°, 0–100%, 0–100%
- L-aħjar għal:
- palettes, tints u shades, theming
X'inhu RGB?
RGB jiddeskrivi kulur bħala tliet kanali tad-dawl — aħmar, aħdar u blu — kull wieħed minn 0 sa 255. Jipproġetta kif l-iskrins jaħdmu: l-ismija kollha f'255 jagħtu l-abjad, kollha f'0 jagħtu l-iswed. RGB huwa għażla tajba meta għandek bżonn tagħmel kalkoli fuq kulur, u rgba() iżid trasparenza fuq dan.
- Sintassi:
- rgb(R, G, B)
- Firxa:
- 0–255 kull kanal
- L-aħjar għal:
- kodiċi, canvas, trasparenza bi rgba()
HSL to RGB reference table
L-aktar kuluri CSS komuni, konvertiti minn HSL għal RGB.
| Kulur | 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) |