HSL е по-приятният начин да избираш цвят, RGB е това, което всъщност използват екрани, canvas API-та и код за изображения. Този конвертор превръща всяко тройно стойност на нюанс, насищане и светлота в точни канали 0–255.
Как работи преобразуването от HSL към RGB
- Преобразувай S и L в дробни стойности и изчисли хромата C = (1 − |2L − 1|) × S.
- Раздели нюанса на 60, за да намериш сегмента му на цветовото колело и изчисли междинната стойност X = C × (1 − |(H/60 mod 2) − 1|).
- Приеми C, X и 0 за слотовете R, G и B според съответния сегмент.
- Добави офсета на светлотата L − C/2 към трите канала и умножи по 255.
Работещ пример
Резултатът е точен до финалното закръгляне до цели канали. Поддържат се дробни стойности за нюанс или насищане и просто се закръгляват до най-близкото 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 описва цвета като три светлинни канала — red, green и blue — всеки от 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) |