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

Што прави оваа страница?

Страницата прима хексадецимален код за боја — од шест цифри (на пример #1E90FF) или трицифрен стенографски запис (на пример #abc) — и веднаш го враќа еквивалентот во HSL формат. Hue (нијанса) се изразува во степени од 0 до 360, а saturation (заситеност) и lightness (светлина) како проценти. Истовремено, истата боја се прикажува во сите други поддржани формати: HEX, RGB, HSV, CMYK и LAB, и сите полиња се ажурираат додека уредувате.

Алатката е чисто клиентска – сите пресметки се извршуваат во вашиот прелистувач. Ништо од она што го внесувате не се испраќа или складира на сервер.

Зошто HEX и HSL се разликуваат?

HEX е сурова RGB нотација. Шестхексадецимални цифри (или три за скратениот запис) директно ги кодираат црвената, зелената и сината вредност во броен систем со основа 16. На пример, #4f46e5 се распаѓа на 4f (R = 79), 46 (G = 70), e5 (B = 229). Овој запис е компактен, широко се користи во CSS и во алатките за дизајн, но не е интуитивен кога треба да направите промени што имаат смисла за човечкото око.

HSL е изграден за човечко расудување. Hue е агол на тркалото со бои: 0° или 360° е црвена, 120° е зелена, 240° е сина. Saturation покажува колку е „чиста“ бојата – 0% е сива, 100% е максимална интензивност. Lightness се движи од 0% (црно) до 100% (бело). Клучната предност: ако ја смените само lightness-вредноста, hue останува ист. Затоа HSL е формат на избор за генерирање палети на бои, тематски системи и динамични варијации на hover или focus состојби.

HEX не вклучува алфа-канал (транспарентност). Стандардниот шестцифрен или трицифрен HEX запис претставува целосно непроѕирна боја. Истото важи и за HSL – конверзијата секогаш работи со 100% непроѕирност.

Како работи конверзијата?

Процесот има два чекора:

1. HEX → RGB
   Секој пар хексадецимални цифри се претвора во децимална вредност од 0 до 255. За трицифрениот запис се дуплира секоја цифра (#abc станува #aabbcc).

2. RGB → HSL
   Формулата е стандардна. Прво се нормализираат R, G, B во опсег 0–1. Се пресметуваат min, max и разликата Δ. Hue се добива на следниов начин:

   • Ако Δ = 0 → H = 0
   • Ако max = R → H = 60 × ((G – B) / Δ mod 6)
   • Ако max = G → H = 60 × ((B – R) / Δ + 2)
   • Ако max = B → H = 60 × ((R – G) / Δ + 4) Ако H < 0, се додава 360.

   Lightness (L) = (max + min) / 2.
   Saturation (S) = Δ / (1 – |2L – 1|), кога L не е 0 или 1.

   Резултатите се заокружуваат до цели броеви за H, а S и L до проценти со една децимала.

На пример, за #4f46e5 (popular primary боја од Tailwind):

• R=79, G=70, B=229
• Нормализирани: R≈0.310, G≈0.275, B≈0.898
• max=B=0.898, min=R=0.275, Δ=0.623
• L = (0.898+0.275)/2 = 0.5865 → 58.7%
• H = 60 × ((0.310 – 0.275)/0.623 + 4) = 60 × (0.035/0.623 + 4) = 60 × (0.0562 + 4) = 60 × 4.0562 = 243.37 → 243°
• S = 0.623 / (1 – |1.173 – 1|) = 0.623 / (1 – 0.173) = 0.623 / 0.827 ≈ 0.753 → 75.3% Резултат: hsl(243°, 75.3%, 58.7%).

Истиот алгоритам се применува за секој валиден внес.

Влезови и излези

Влез: хексадецимален код за боја. Дозволени се:

• Шест цифри (со или без #): #4f46e5 или 4f46e5
• Три цифри (стенографија): #abc или abc (се проширува на #aabbcc)

Не се прифаќаат осумцифрени HEX кодови (со алфа канал), имиња на бои (red, blue) или произволни низи.

Излез:

• HSL – hue (0–360), saturation (0–100%), lightness (0–100%)
• HEX (оригиналниот внес, нормализиран на 6 цифри)
• RGB (0–255)
• HSV (hue, saturation, value)
• CMYK (цијан, магента, жолта, црна – проценти)
• LAB (CIE Lab*)

Сите вредности се пресметуваат истовремено од истиот RGB посредник.

Правила и гранични случаи

Страницата прифаќа само валидни шестцифрени или трицифрени HEX кодови. Ако внесете нешто друго, се прикажува грешка: „Внесете хексадецимален код како #4f46e5 или #abc“.

Кога преминувате на друг простор на бои (на пример LAB или CMYK) и внесете вредност што е надвор од видливиот RGB гамут, бојата автоматски се прилагодува на најблиската видлива боја. Притоа, конвертирањето назад во HEX може да даде малку поинаква вредност. Ова е стандардна појава – не постои совршено еднозначно пресликување помеѓу гамутите на различни уреди.

CMYK вредностите се проценка на екран и не треба да се користат за професионален печат без калибрација. Лабораториската Lab* вредност е пресметана според D65 осветлувач и sRGB профил.

Ако внесете трицифрен код, страницата автоматски го проширува на шест цифри пред да ги пресмета останатите формати.

Кој има потреба од оваа алатка?

• Front-end програмери кои пишуваат CSS: од дизајнерски макет добиваат HEX боја, а сакаат да ја претворат во HSL за лесно да ја прилагодат lightness-вредноста за hover состојби или тематски варијации.
• UI/UX дизајнери кои размислуваат во hue, saturation и lightness и треба да усогласат бренд боја дадена во HEX.
• Секој што гради палета на бои: HSL ви овозможува едноставно да креирате комплементарни, аналогни или монохроматски шеми со менување само на hue или saturation.
• Аудитори за веб пристапност кои треба да проверат соодноси на контраст (WCAG) и сметаат дека HSL е полесен за разбирање отколку RAW HEX или RGB.

Често поставувани прашања

1. Зошто HSL е подобар од HEX за прилагодување на бои?
HEX директно ги кодира RGB компонентите – промена на една цифра влијае на неколку канали одеднаш. HSL го одвојува тонот (hue) од заситеноста и светлината, па можете да направите посветла верзија на истата боја само со намалување на L.

2. Дали трицифрениот HEX запис секогаш дава иста боја како шестцифрениот?
Да. #abc е стенографија за #aabbcc. Секоја хексадецимална цифра се дуплира. Затоа #abc дава помал сет на бои (4096 наспроти 16,7 милиони), но конверзијата е точна.

3. Што се случува ако внесам #12345678 (осум цифри)?
Осумцифрен HEX вклучува алфа канал (транспарентност). Страницата не го поддржува – ќе ја прикаже грешката за невалиден внес.

4. Зошто CMYK вредностите се само проценка?
CMYK е простор на бои за печат со пигменти (суптрактивен), додека RGB/HEX/HSL се за екран (адитивен). Конверзијата помеѓу нив не е точна без профил на боја на одреден печатач и хартија. Страницата користи стандардна формула за проценка.

5. Дали алатката работи офлајн?
Да. Целата пресметка се извршува во JavaScript на вашиот прелистувач. Нема потреба од интернет откако страницата е вчитана.