Какво прави този инструмент
Този инструмент приема цвят, зададен в цветовия модел HSL – тон (hue) в градуси от 0 до 360, наситеност (saturation) и светлост (lightness) като проценти – и моментално показва еквивалентния цвят в RGB (0–255), както и в пет други цветови модела: HEX, HSL (повторно), HSV, CMYK и LAB. Всички полета се обновяват едновременно при всяка промяна на входните данни. Преобразуването става директно в браузъра; нищо от въведеното не се качва на сървър.
Пример: въведете 243, 75%, 59% за HSL. Инструментът веднага показва RGB 79, 70, 229, HEX #4F46E5, HSV 243°, 69%, 90%, CMYK 66, 69, 0, 10 и LAB 33, 24, -67. Това ви позволява да преминете от модел, построен за човешкото мислене за цвета, към точните числа, които екранът използва, за да излъчва светлина.
Защо HSL е създаден за човешкото мислене – и какво прави тази страница различна
Разликата между HSL и RGB не е просто въпрос на представяне. HSL е проектиран така, че да отговаря на начина, по който хората възприемат цвета: промяната на светлостта запазва тона непроменен, докато при RGB една и съща промяна на стойностите може да изкриви оттенъка. Например ако вземете чист син (RGB: 0, 0, 255) и намалите всички канали с еднаква стойност, получавате по-тъмен син, но ако увеличите само зеления и червения, тонът се измества. В HSL, за да получите по-светъл син, просто намалявате светлостта – тонът остава 240°.
Точно затова HSL е стандартният избор за генериране на палитри и цветови теми. Дизайнерите и фронтенд разработчиците могат да мислят за „по-светъл вариант на същия цвят“ без да се налага да пресмятат сложни зависимости между каналите. Този инструмент премахва необходимостта от ръчни изчисления: вие работите в модела, който ви е удобен, а той връща точните стойности, които екранът разбира.
Това, което прави тази страница различна от обикновените конвертори, е нейната фокусирана цел: тя не е просто един от многото инструменти за преобразуване, а е проектирана специално за прехода от човешки-ориентиран модел към работното пространство на екрана. Докато други конвертори може да предлагат десетки модели без обяснение, тук акцентът е върху точността, беззагубността и липсата на изрязване на цветове извън гамата.
Преобразуването е беззагубно – нищо не се губи, нищо не се изкривява
Всяка валидна HSL стойност се преобразува в точно една RGB стойност в рамките на дисплейния диапазон (0–255 за всеки канал). Това е възможно, защото и двата модела са адитивни и обхващат една и съща гама (sRGB по подразбиране). За разлика от преобразувания от LAB или CMYK към RGB, тук няма цветове извън гамата, които да бъдат „изрязани“ или компресирани. Ако вземете полученото RGB и го обърнете обратно към HSL, ще получите същите стойности, от които сте тръгнали. Няма загуба на информация, няма цветови отмествания.
Това е важно, защото много практически сценарии изискват прецизно съответствие. Например при създаване на CSS променливи за тема – ако зададете HSL стойност в дизайнерския инструмент, а после я конвертирате към RGB за съвместимост с по-стари браузъри, трябва да сте сигурни, че крайният цвят на екрана е точно този, който сте замислили. Тук няма място за грешка.
Как да използвате инструмента – правила и ръбови случаи
Интерфейсът приема HSL в следния формат: тон (цяло число от 0 до 360), наситеност (процент), светлост (процент), разделени със запетая. Например 243, 75%, 59%. Важно е процентният знак да присъства – 75 без % ще бъде отхвърлено. Ако въведете невалидна стойност (например тон 400 или текст без проценти), инструментът показва съобщението: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." (на английски в съответствие с интерфейса).
Всички полета се обновяват мигновено, без да е нужно да натискате бутон за конвертиране. Това прави инструмента удобен за експериментиране: променяте светлостта с няколко процента и веднага виждате как се променя RGB.
Важно предупреждение относно CMYK: стойностите на CMYK, показани в инструмента, са приблизителна оценка за екранно представяне. Те може значително да се различават от стойностите, използвани в професионалния печат, поради разлики в хартията, мастилата и профилите на принтерите. Ако ви трябват точни CMYK стойности за печат, използвайте професионален софтуер с ICC профили.
Други ръбови случаи:
- HSL с нулева наситеност (0%) дава сиви нюанси, независимо от тона. Инструментът правилно показва RGB с равни стойности.
- HSL с максимална светлост (100%) винаги дава бяло (RGB 255, 255, 255) независимо от тона и наситеността.
- HSL с минимална светлост (0%) дава черно (RGB 0, 0, 0). Тези случаи са тривиални, но алгоритъмът ги обработва коректно.
Кой се нуждае от този инструмент и защо
Дизайнери, които изграждат цветови палитри или теми, често работят в HSL, защото могат да мислят за „по-тъмни и по-светли варианти на същия цвят“ без да помнят сложни зависимости между RGB каналите. След като палитрата е готова, те се нуждаят от RGB стойностите за имплементация в код.
Фронтенд разработчици пренасят цветове от дизайнерски инструменти (като Figma, Sketch или Adobe XD), които често използват HSL, в CSS, където могат да бъдат зададени като RGB, HEX или дори HSL. Инструментът спестява ръчни изчисления и риск от грешки.
Всеки, който предпочита да мисли за цвета в човешки термини (тон като „виолетово“, наситеност като „наситеност“, светлост като „тъмнина“), но се нуждае от точните екранни числа за програмиране, уеб разработка или графичен дизайн.
Тематични приложения: например при създаване на тъмна тема можете да вземете HSL стойностите на светлата тема и да намалите светлостта с 20-30%, като запазите тона и наситеността. Инструментът веднага ще ви даде RGB за новата тема, без да се налага да пресмятате нищо на ръка.
Технически детайли – алгоритъмът зад кулисите
Въпреки че инструментът е прост от потребителска гледна точка, преобразуването HSL ↔ RGB включва няколко стъпки. Стандартният алгоритъм (дефиниран в CSS Color Level 4 и повечето графични библиотеки) работи така:
- Нормализирайте тона до стойност между 0 и 1 (разделете на 360).
- Наситеността и светлостта ги делете на 100, за да получите стойности между 0 и 1.
- Изчислете междинни променливи:
- ако S = 0, цветът е сив: R = G = B = L.
- иначе:
- Ако L < 0.5, temp2 = L * (1 + S)
- Иначе temp2 = L + S – L * S
- temp1 = 2 * L – temp2
- За всеки от трите RGB канала (R, G, B) изчислете временен тон H' = H + 1/3 (за R), H (за G), H – 1/3 (за B). Коригирайте, ако излезе извън.
- За всеки канал:
- ако 6 * H' < 1: return temp1 + (temp2 – temp1) * 6 * H'
- ако 2 * H' < 1: return temp2
- ако 3 * H' < 2: return temp1 + (temp2 – temp1) * (2/3 – H') * 6
- иначе: return temp1
- Умножете резултатите по 255 и закръглете до цели числа.
Този алгоритъм гарантира обратимостта: ако вземете полученото RGB и го преобразувате обратно към HSL (по обратния алгоритъм), ще получите оригиналните стойности до грешка при закръгляне, която е незначителна (под 0.5 градуса за тона).
Често задавани въпроси
Въпрос: Мога ли да използвам инструмента офлайн?
Отговор: Да, всички преобразувания се извършват в браузъра ви. След като страницата се зареди, не е необходима интернет връзка.
Въпрос: Защо CMYK стойностите не са точни за печат?
Отговор: CMYK зависи от много фактори – тип хартия, мастило, профил на принтера, осветление. Екранът не може да предвиди тези параметри. Инструментът дава приблизителна стойност на базата на опростен модел, която е полезна за визуална справка, но не за професионална prepress подготовка.
Въпрос: Как да въведа HSL стойност с десетични градуси?
Отговор: Можете да използвате десетични числа за тона, например 243.5, 75%, 59%. Инструментът ги поддържа, въпреки че повечето дизайнерски инструменти закръглят тона до цяло число.
Въпрос: Каква е разликата между HSV и HSL?
Отговор: И двата модела използват тон и наситеност, но третият параметър – V (value) в HSV е различен от L (lightness) в HSL. HSV е по-подходящ за компютърна графика (напр. подбор на цвят в графични редактори), докато HSL е по-близък до човешкото възприятие на светлост. Инструментът показва и двата за удобство.
Въпрос: Мога ли да конвертирам обратно от RGB към HSL с този инструмент?
Отговор: Да, като поставите RGB стойността в полето за RGB (ако има такова) или чрез редактиране на HEX полето. Всички полета са двупосочни – промяната на едно обновява останалите.
Въпрос: Какво означава „беззагубно“ в контекста на това преобразуване?
Отговор: Означава, че за всяка валидна входна стойност съществува точно една изходна стойност и обратното преобразуване връща оригинала. Това не е така например при конвертиране от LAB към RGB, където много LAB цветове са извън sRGB гамата и трябва да бъдат изрязани (clipped), което води до загуба на информация. При HSL към RGB такова изрязване не се случва.