Конвертор от RGB в HSL

Връзката между екрана и окото: от RGB към HSL

RGB и HSL описват един и същи цвят, но го правят за различни цели. RGB е дисплейният език – три числа между 0 и 255 задават колко червена, зелена и синя светлина да излъчи мониторът. Това е адитивен модел, директно свързан с хардуера на всеки LCD, LED или OLED екран. HSL е модел, изграден върху начина, по който хората възприемат цвета: нюанс (hue), наситеност (saturation) и светлота (lightness). Докато при RGB промяната на един канал често води до неочаквана промяна на възприемания цвят, при HSL можете да промените светлотата, без да засегнете нюанса. Точно това прави HSL незаменим при създаване на цветови палитри, теми и достъпни контрастни варианти.

На страницата RGB to HSL въвеждате три числа между 0 и 255 (например 79, 70, 229) и веднага виждате еквивалента в HSL – нюанс в градуси (0–360), наситеност и светлота като проценти. Освен това получавате стойностите в HEX, HSV, CMYK (оценка за екран) и LAB. Всяко поле може да се редактира – промяната във всеки формат незабавно актуализира всички останали. Конверсиите се извършват изцяло в браузъра; нищо от въведеното не се изпраща никъде.

Какви входове приема инструментът и каква валидация се прилага

Въвеждането е гъвкаво, но строго валидирано. RGB трябва да са три цели числа от 0 до 255, разделени със запетая или интервал. Всякакъв друг формат (например rgb(79,70,229), или десетични числа) води до грешка: „Въведете RGB като три числа 0–255, например 79, 70, 229.“ Ако вместо това въведете HSL директно в полето за HSL, то трябва да следва формата: нюанс 0–360 и две проценти (например 243, 75%, 59%). Невалиден HSL показва: „Въведете HSL като нюанс 0–360 и две проценти, например 243, 75%, 59%.“

Същото важи и за останалите полета. При LAB или CMYK стойности, които попадат извън видимия RGB гамут (т.е. не могат да се възпроизведат на стандартен sRGB дисплей), инструментът автоматично ги приспособява до най-близкия възможен цвят. Обратното конвертиране на такъв коригиран цвят може да даде леко различен резултат – това е нормално поведение за всеки инструмент, работещ с ограничен гамут.

Важно предупреждение: CMYK стойностите са екранна оценка и не трябва да се използват за професионален печат без допълнителна верификация. При печат са необходими ICC профили и отделна проверка.

Математиката зад преобразуването: как RGB става HSL

Преобразуването следва добре познат алгоритъм, стандартизиран с появата на CSS Цветен модул ниво 3 (и HSL модела още от по-рано). Ето стъпките:

1. Нормализиране – всяко от трите R, G, B числа се дели на 255, за да се получат стойности в интервала.
2. Намиране на минимум и максимум – сред нормализираните стойности се откриват max и min.
3. Изчисляване на светлота (L) – L = (max + min) / 2.
4. Изчисляване на наситеност (S):
   • Ако max = min, наситеността е 0 (сив цвят, без нюанс).
   • Иначе: ако L ≤ 0.5, то S = (max - min) / (max + min); ако L > 0.5, то S = (max - min) / (2 - max - min).
5. Изчисляване на нюанс (H):
   • Ако max = min, нюансът е 0 (обикновено се приема).
   • Иначе, в зависимост от това кой канал е максимален:
     • Ако max = R: H = (G - B) / (max - min) + (0).
     • Ако max = G: H = (B - R) / (max - min) + 2.
     • Ако max = B: H = (R - G) / (max - min) + 4.
   • След това H се умножава по 60, за да се получи градусна стойност. Ако резултатът е отрицателен, се добавя 360.

Пример: за rgb(79, 70, 229) (данни от факт листа). Нормализирани: R = 79/255 ≈ 0.3098, G = 70/255 ≈ 0.2745, B = 229/255 ≈ 0.8980. max = 0.8980 (B), min = 0.2745 (G). L = (0.8980+0.2745)/2 = 0.5863 → 58.63% (закръглено до 59%). Тъй като L > 0.5, S = (0.8980-0.2745) / (2 - 0.8980 - 0.2745) = 0.6235 / (0.8275) ≈ 0.7535 → 75.35% (закръглено до 75%). H: max = B, затова H = (R - G)/(max-min) + 4 = (0.3098 - 0.2745)/(0.6235) + 4 = 0.0353/0.6235 + 4 ≈ 0.0566 + 4 = 4.0566. Умножаваме по 60: 243.4°. Закръглено до 243°. Получава се hsl(243, 75%, 59%) – точно каквото показва инструментът.

Този алгоритъм е в основата на CSS hsl() функцията и се използва във всички съвременни браузъри.

Защо HSL е любимецът на дизайнерите на палитри и теми

В RGB модела увеличаването на стойността на червеното с 10 (например от 79 на 89) засяга не само яркостта, но и възприемания нюанс – ако синият канал остане висок, цветът може да стане по-розов, отколкото по-червен. При HSL можете да промените само светлотата (L), като запазите нюанса (H) и наситеността (S) непроменени. Това е идеално за:

• Създаване на tints (по-светли варианти) – увеличавате L, като оставяте H и S същите.
• Създаване на shades (по-тъмни варианти) – намалявате L.
• Създаване на tones (по-приглушени варианти) – намалявате S.
• Генериране на контрастни цветове за текст върху фон – поддържате същия нюанс, но променяте L, докато не се постигне съотношение на контраст, отговарящо на WCAG AA (4.5:1 за нормален текст) или AAA (7:1).

Например, за основен цвят hsl(243, 75%, 59%) (както в примера), можете да създадете светла версия за фон: hsl(243, 75%, 95%) и тъмна за текст: hsl(243, 75%, 20%). И двете имат точно същия нюанс – визуално цветът остава „същият“, само че по-светъл или по-тъмен.

HSL в уеб разработката: CSS и JavaScript

CSS поддържа hsl() (и hsla() за алфа канал) от CSS Color Module Level 3. Пример:

.element {
  background-color: hsl(243, 75%, 59%);
  color: hsl(243, 75%, 95%);
}

Предимствата пред HEX или RGB:

• Четимост – hsl(0, 0%, 0%) веднага се разпознава като черно, докато #000000 изисква малко опит.
• Лесна промяна чрез JavaScript – можете да четете HSL компонентите от window.getComputedStyle, да ги модифицирате и да ги зададете обратно. Например за превключване между светла и тъмна тема:

let color = 'hsl(243, 75%, 59%)';
// Увеличаваме светлотата за светла тема
let lightColor = color.replace(/(\d+)%\)/, (match, p1) => (Number(p1) + 30) + '%)');

• Динамични генератори на палитри – много библиотеки (като Chroma.js или Color.js) използват HSL за създаване на градиенти и последователни скали.

Ограничения на HSL и кога да потърсите алтернативи

HSL не е съвършен. Неговият недостатък е, че не е перцептуално равномерен – два цвята с еднаква светлота (L) могат да изглеждат с различна яркост за човешкото око. Например жълто при L=50% изглежда много по-ярко от синьо при същата L. Това се дължи на нелинейната чувствителност на човешкото зрение към различните дължини на вълните.

За задачи, изискващи перцептуална равномерност (като последователни цветови скали за визуализация на данни), по-добър избор е LAB (CIELAB) или LCH (Lightness-Chroma-Hue). Инструментът предоставя и LAB стойности, които можете да използвате с библиотеки като d3.js (d3.lab()).

Друго ограничение: и RGB, и HSL са дисплейно-референтни – те описват цветове за sRGB гамута. Ако работите с широкогамутни дисплеи (P3, Rec. 2020) или с печатни цветове (CMYK), ще ви трябват модели като OKLCH или ICC-базирани трансформации. Цветовете, въведени в LAB извън sRGB, се приспособяват към най-близкия възможен, което води до загуба на информация.

Често задавани въпроси

1. Защо получавам грешка при въвеждане на rgb(79, 70, 229)?
Инструментът очаква само числа, разделени със запетая или интервал, без скоби и без ключовата дума rgb. Въведете 79, 70, 229.

2. Може ли да въведа проценти в RGB?
Не – RGB полето приема само цели числа 0–255. Ако разполагате с процентна стойност, първо я преобразувайте (например 50% → 128).

3. Защо HSL стойностите, които виждам, не съвпадат с тези от Photoshop?
Photoshop (и някои други програми) използват различна дефиниция на HSL – например наситеността се изчислява спрямо максималната възможна за дадения нюанс, а не спрямо текущата светлота. Инструментът следва CSS стандарта (както е описан в спецификацията на W3C), който е единен за уеб.

4. Мога ли да използвам CMYK стойностите за печат?
Не се препоръчва. CMYK стойностите са приблизителна екранна симулация, която не отчита специфичния цветови профил на печатарската машина или хартията. За професионален печат използвайте специализиран софтуер с ICC профили.

5. Какво означава, когато LAB или CMYK стойност „излезе извън гамута“?
Това означава, че въведеният цвят не може да бъде точно възпроизведен на стандартен sRGB екран. Инструментът го приспособява до най-близкия възможен цвят, но при обратно конвертиране може да има лека промяна.

6. Има ли разлика между hsl() и hsla() в CSS?
В съвременните браузъри и двете работят еднакво – hsla() добавя алфа канал (прозрачност). В CSS Color Module Level 4 вече можете да използвате hsl() с четвърти аргумент, така че hsla() е в процес на отпадане.