HSL е пријателски начин за избор на боја, RGB е тоа што екраните, canvas API-то и кодот за слики всушност го користат. Овој конвертер го претвора секој тројка hue, saturation и lightness во точни канали 0–255.
Како работи претворањето од HSL во RGB
- Конвертирај S и L во фракции и пресметај го хромат C = (1 − |2L − 1|) × S.
- Подели го hue со 60 за да го најдеш сегментот на тркалото на бои и пресметај ја посредната вредност X = C × (1 − |(H/60 mod 2) − 1|).
- Додели C, X и 0 во слотовите R, G и B според тој сегмент.
- Додади го офсетот на светлина L − C/2 на сите три канали и помножи со 255.
Пример
Резултатот е точен до финалното заокружување на цели канали. Поддржани се дробни вредности за hue или saturation и едноставно ќе завршат на најблиската RGB тројка.
HSL и RGB објаснети
Што е HSL?
HSL ја дели бојата на hue (0–360° на колорот), saturation (колку е наситена, 0–100%) и lightness (колку е светла, 0–100%). Бидејќи секој дел одговара на начинот на кој луѓето ја опишуваат бојата, HSL е најлесниот формат за градење нијанси, затемнувања и консистентни палети — рачно или во код.
- Синтакса:
- hsl(H, S%, L%)
- Опсег:
- 0–360°, 0–100%, 0–100%
- Најдобро за:
- палети, нијанси и затемнувања, теми
Што е RGB?
RGB ја опишува бојата како три канали светлина — црвена, зелена и сина — секоја од 0 до 255. Тоа ја одразува реалната работа на екранот: сите три на 255 даваат бела, сите на 0 даваат црна. RGB е правилен избор секогаш кога треба да пресметуваш со боја, а rgba() додава транспарентност.
- Синтакса:
- rgb(R, G, B)
- Опсег:
- 0–255 по канал
- Најдобро за:
- код, canvas, транспарентност со rgba()
HSL во RGB табела за референца
Најчестите CSS бои, конвертирани од HSL во RGB.
| Бои | 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) |