RGB казва на екрана колко светлина да излъчва; HSL ти показва как всъщност изглежда цветът. Превръщането на трите канала в нюанс, наситеност и светлинност прави цвета лесен за ръчна редакция.
Как работи преобразуването от RGB към HSL
- Раздели R, G и B на 255, така че всяка стойност да е между 0 и 1.
- Вземи максимума и минимума от трите — тяхната средна стойност е светлинността L.
- Ако максимумът и минимумът са равни, цветът е сив: нюансът и наситеността са и двете 0.
- В противен случай изведи S от разликата между максимума и минимума и прочети H от канала, който е максимум.
Работещ пример
Точно по принцип. Тъй като H, S и L обикновено се показват като закръглени цели числа, връщането обратно може да промени някой канал с една или две стъпки.
RGB и HSL обяснени
Какво е RGB?
RGB описва цвета като три светлинни канала — red, green и blue — всеки от 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%) |