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

Какво представлява този инструмент?

Този инструмент е специализиран конвертор, който приема стойности на цвят в HSL модела (Hue – нюанс, Saturation – наситеност, Lightness – светлост) и мигновено показва съответния шестнадесетичен (HEX) код. Въвеждате три числа – нюанс от 0 до 360 градуса, наситеност като процент (0–100%) и светлост като процент (0–100%) – и HEX стойността се обновява веднага, без да натискате бутон. Например при вход 243, 75%, 59% получавате #4f46e5. Освен основния HEX код, инструментът извежда и всички останали цветови представяния – RGB, HSV, CMYK и LAB – като всяко от тях може да се редактира и всички останали се преизчисляват автоматично.

Какво го прави различен?

За разлика от универсалните цветови конвертори, тази страница е посветена изцяло на прехода от HSL към HEX. HSL е модел, проектиран за човешкото възприемане на цвета – промяната на светлостта запазва нюанса, което го прави предпочитан за създаване на палитри и теми. HEX, от друга страна, е шестцифрено (или трицифрено съкратено) означение на RGB стойностите в шестнадесетична бройна система; той не носи алфа канал, освен ако не се използва осемцифрената форма.

Преобразуването от HSL в HEX е директно и без загуби в рамките на sRGB цветовото пространство. При HSL‑to‑HEX няма нужда от корекция на извънгамитови цветове, както например при конверсии с LAB или CMYK, които могат да променят цвета, за да го вместят в печатен гамит. Това прави този инструмент особено полезен за цифров дизайн, където точността е критична.

Самият процес се извършва изцяло във вашия браузър – нито една стойност не се изпраща към сървър. Личният ви проект остава поверителен.

Входове и изходи

Входове

Инструментът очаква три стойности:

• Нюанс (Hue): цяло число между 0 и 360. Това е позицията на цветовия кръг. Например 0 е червено, 120 е зелено, 240 е синьо.
• Наситеност (Saturation): процент между 0% и 100%. 0% означава сиво, 100% – напълно наситен цвят.
• Светлост (Lightness): процент между 0% и 100%. 0% е черно, 100% е бяло, 50% е „нормалният“ цвят.

Форматът на въвеждане е свободен – можете да пишете 243, 75%, 59% или 243 75% 59%. Важно е наситеността и светлостта да включват знака за процент %. Ако го пропуснете, или ако стойностите са извън допустимите диапазони, инструментът показва следното съобщение за грешка (на български):

Въведете HSL като нюанс 0–360 с два процента, например 243, 75%, 59%.

Изходи

• HEX код: шестцифрено шестнадесетично представяне, например #4f46e5. Ако всеки от RGB каналите може да се изрази с една шестнадесетична цифра (т.е. R, G и B са кратни на 17), инструментът показва и трицифрената съкратена форма, например #abc.
• RGB: стойности в диапазон 0–255 за червено, зелено и синьо.
• HSV: нюанс, наситеност и стойност (value).
• CMYK: циан, магента, жълто, черно (на екрана е приблизително, не за професионален печат).
• LAB: светлост, a и b компоненти по CIE Lab*.

Всички полета се актуализират едновременно при промяна на което и да е от тях. Редактирането на HEX кода, например, незабавно преизчислява HSL и всички останали представяния.

Правила и особени случаи

• Моментална реакция: всяка промяна в което и да е поле води до обновяване на всички останали. Няма бутон „Конвертирай“.
• Грешки при въвеждане: ако HSL стойностите са невалидни (няма процент, число извън диапазон, неразпознаваем разделител), се показва гореспоменатото съобщение за грешка. Изключение: празно поле не предизвиква грешка, но и не дава изход.
• Гамит: тъй като и HSL, и HEX работят в sRGB, преобразуването никога не напуска видимия RGB диапазон. Няма нужда от никаква корекция за извънгамитови цветове – за разлика от CMYK, който може да излезе извън печатния гамит.
• Трицифрен HEX: когато всеки от трите RGB компонента може да се представи с една шестнадесетична цифра (например #11aa22 става #1a2), инструментът показва и съкратената форма. Това е стандартът на CSS.
• Без алфа: шестцифреният HEX не поддържа прозрачност. Ако се нуждаете от алфа канал, трябва да използвате осемцифрена форма (напр. #4f46e5ff) или CSS функцията rgba(), която не е предмет на този инструмент.
• CMYK е само приблизителен: изчисленията за CMYK са направени с опростен алгоритъм за екранно показване. Реалните печатни стойности зависят от типа хартия, мастило и ICC профил и може да се различават.

За кого е предназначен?

• Дизайнери, които изграждат цветови палитри в HSL и се нуждаят от HEX кодове за имплементация в код или в графични програми (Figma, Sketch, Adobe XD).
• Фронтенд разработчици, които получават HSL стойности от дизайн файлове и трябва да ги превърнат в CSS свойства като color: #4f46e5; или background-color: #4f46e5;.
• Всеки, който настройва теми или прилага контрастни съотношения за достъпност (WCAG) чрез промяна на светлостта в HSL и после конвертира резултата в HEX за продукционна употреба.

Бързината и прецизността на този инструмент го правят предпочитан пред ръчно изчисление или използване на общи конвертори, които може да не показват всички цветови модели едновременно.

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

1. Защо понякога виждам трицифрен HEX код, а не шестцифрен?

Когато всеки от трите RGB канала е число като 0, 17, 34, 51 и т.н. (кратни на 17), тогава двете шестнадесетични цифри за всеки канал са еднакви – напр. #11aa22. В такъв случай CSS допуска запис #1a2, който е еквивалентен. Инструментът го показва, за да ви спести няколко символа, без да губи точност.

2. Какво става, ако въведа наситеност без знак „%“?

Ще получите грешка. Форматът изисква стойностите за наситеност и светлост да бъдат последвани от %. Дори да напишете 50 вместо 50%, инструментът няма да го приеме. Това е умишлено – в HSL процентите са задължителни, за да се различават от други числови цветови модели.

3. Загубва ли се информация при конвертиране от HSL в HEX?

Не. Преобразуването е двупосочно и обратимо в рамките на sRGB. Ако вземете един HEX цвят и го превърнете в HSL, после обратно в HEX, ще получите същия код, стига да закръгляте правилно при междинните стъпки. Този инструмент използва стандартните алгоритми (HSL -> RGB -> HEX) без закръгляния, освен в последната стъпка при запис в шестнадесетична форма, което не води до загуба.

4. Мога ли да получа HEX код с алфа канал (прозрачност) от този инструмент?

Не. Представените HEX кодове са само шестцифрени (или трицифрени). Алфа каналът не е част от стандартния HSL модел. Ако ви трябва прозрачност, използвайте получения HEX с добавяне на две допълнителни цифри (напр. #4f46e5cc) или CSS функцията rgba(), където можете да зададете алфа стойност отделно.

5. Защо цветът на екрана изглежда различно от CMYK стойността?

CMYK на вашия монитор е само симулация. Реалният печатен цвят зависи от цветовото пространство на принтера, хартията и мастилото. За точни CMYK стойности използвайте ICC профили и софтуер за цветоотделяне. Тук CMYK е показан само като ориентир.

6. Мога ли да копирам HEX кода с едно кликване?

Повечето браузъри позволяват маркиране и копиране; няма специален бутон за копиране на страницата, но полето с HEX е лесно за избор. Можете да го маркирате и да копирате с Ctrl+C (Cmd+C на Mac).