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