Што прави оваа страница?
Оваа страница прима HSL боја – нијанса во степени (0–360), заситеност како процент и осветленост како процент – и веднаш го прикажува еквивалентниот хексадецимален (HEX) код на бојата. HEX-кодот е шестцифрена (или трицифрена скратена) нотација што се користи насекаде во CSS и алатките за дизајн, на пример #1E90FF. Додека пишувате или избирате боја, HEX вредноста се ажурира инстантно. Сите други полиња за боја (RGB, HSV, CMYK, LAB) исто така се ажурираат истовремено. Конверзијата е директна и без загуба во рамките на sRGB-гамутот, за разлика од конверзиите што вклучуваат LAB или CMYK, кои може да прилагодуваат бои надвор од гамутот.
Што ја прави оваа страница посебна?
Оваа страница е посветена исклучиво на конверзијата од HSL во HEX. HSL е колор-модел дизајниран за човечко размислување за бојата – менувањето на осветленоста ја задржува нијансата недопрена, поради што се користи за генерирање палети и теми. HEX, од друга страна, е шестцифрена (или трицифрена скратена) RGB нотација; не носи алфа-канал освен ако не се користи осумцифрената форма. Конверзијата е директна и без загуба во рамките на sRGB-гамутот – нема прилагодување на бои надвор од гамутот, за разлика од конверзиите што вклучуваат LAB или CMYK. Токму оваа насоченост кон една, јасна конверзија ја прави страницата уникатна: таа не нуди општи алатки за бои, туку прецизен, моментален претворач од HSL во HEX, со сите дополнителни полиња само за информација.
Влезни и излезни вредности
Влез: Корисникот внесува вредност за нијанса (H) помеѓу 0 и 360, заситеност (S) како процент (0–100%) и осветленост (L) како процент (0–100%). Пример: 243, 75%, 59%.
Излез: Примарен излез е HEX-кодот на бојата (на пр. #4f46e5). Ако секој од RGB-каналите може да се претстави со една хексадецимална цифра, алатката покажува и трицифрена скратена форма (на пр. #abc). Сите други полиња за боја (RGB, HSV, CMYK, LAB) се ажурираат истовремено. Важно е да се напомене дека CMYK-излезот е проценка на екранот и може да се разликува од професионалните вредности за печатење.
Правила и гранични случаи
- Уредувањето на кое било поле веднаш ги ажурира сите други полиња.
- Ако HSL-вредностите се надвор од валидните опсези (нијанса 0–360, заситеност 0–100%, осветленост 0–100%) или не се форматирани правилно, алатката ја прикажува пораката за грешка:
„Внесете HSL како нијанса 0–360 со два проценти, на пример 243, 75%, 59%.“ - Конверзијата од HSL во HEX секогаш останува во видливиот RGB опсег; не се врши прилагодување надвор од гамутот за оваа конверзија.
- CMYK-излезот (прикажан заедно со останатите) е проценка на екранот и може да се разликува од професионалните вредности за печатење.
- Целата обработка се одвива директно во вашиот прелистувач; ништо што внесувате не се испраќа на сервер.
Општи грешки и како да се избегнат
Најчеста грешка е внесување на процентите без знакот %. На пример, 243, 75, 59 ќе предизвика грешка бидејќи алатката очекува % по броевите за заситеност и осветленост. Исто така, внесување нијанса над 360 (на пр. 400) или под 0 ќе ја активира истата порака за грешка. Заситеноста и осветленоста мора да бидат помеѓу 0% и 100% – вредности како 150% не се дозволени. Форматот на внесување е флексибилен: можете да користите запирки или празни места, но секогаш со % по двата проценти. Препорачуваме да го следите точно примерот даден во пораката за грешка: 243, 75%, 59%.
Техничка позадина: Како работи конверзијата
HSL (Hue, Saturation, Lightness) е колор-модел заснован на цилиндрична координата. Нијансата е агол на тркалото со бои, заситеноста е растојание од центарот (сиво), а осветленоста е висина. HEX-кодот, пак, е директно претставување на RGB (црвено, зелено, сино) со 256 нивоа по канал, запишани во хексадецимален систем.
Чекор по чекор (за едукативни цели):
- HSL во RGB: Постои стандарден алгоритам. Прво, ако S = 0, сите RGB-канали се еднакви на L (сива нијанса). Инаку, се пресметуваат привремени вредности q и p:
- q = L * (1 + S) ако L < 0,5, инаку q = L + S - L*S
- p = 2*L - q
- За секој канал (R, G, B) се пресметува вредност користејќи ја нијансата поделена со 360 и приспособена со 1/3 и 2/3. Потоа се применува функција за да се добие финалниот RGB канал во опсег 0–1.
- RGB во HEX: Секоја RGB-вредност (0–1) се множи со 255 и се заокружува до најблискиот цел број. Потоа се претвора во две хексадецимални цифри (0–9, A–F). Ако сите три парови се со иста цифра (на пр. 0x44, 0xAA, 0xBB), може да се користи скратената трицифрена форма (#4AB).
На пример, за HSL 243, 75%, 59%:
- H=243, S=0.75, L=0.59
- Пресметката дава RGB приближно (79, 70, 229) → R=79 (0x4F), G=70 (0x46), B=229 (0xE5) → HEX
#4F46E5. Бидејќи 79, 70, 229 не се исти цифри, нема трицифрена форма.
Кому му треба ова?
- Дизајнери кои градат палети на бои во HSL и им требаат HEX-кодови за имплементација во код или алатки за дизајн.
- Фронт-енд развивачи кои добиваат HSL-вредности од датотеки за дизајн (на пр. Figma, Sketch) и мора да ги преведат во CSS HEX-својства.
- Секој што прилагодува теми или применува соодноси на контраст за пристапност (WCAG) со менување на осветленоста во HSL, а потоа го претвора резултатот во HEX-вредност за продукција.
Често поставувани прашања (FAQ)
1. Зошто да користам HSL наместо директно HEX?
HSL ви овозможува интуитивно да ја менувате осветленоста без да влијаете на нијансата – нешто што HEX не го нуди. Ова е клучно за создавање теми и приспособување на контраст.
2. Кога се прикажува трицифрената HEX-форма?
Кога секој од трите RGB-канали (по заокружување) може да се претстави со една хексадецимална цифра, односно кога двата хексацифри за секој канал се исти (на пр. 0x44, 0xAA, 0xBB). Тогаш се прикажува скратената форма #4AB заедно со шестцифрената #44AABB.
3. Дали конверзијата е прецизна?
Да, конверзијата од HSL во HEX е без загуба во рамките на sRGB-гамутот. Не се губи информација бидејќи RGB е основната репрезентација на HEX.
4. Што ако внесам вредности со децимали, на пример 243.5, 75%, 59%?
Алатката прифаќа децимални броеви за нијанса, но процентите мора да бидат цели броеви според спецификацијата. Внесувањето на 243.5 ќе се обработи, но заситеноста и осветленоста треба да се цели броеви со %.
5. Дали податоците се испраќаат на сервер?
Не. Целата обработка се одвива во вашиот прелистувач. Ништо што внесувате не се зачувува или испраќа.
6. Зошто CMYK-вредноста се разликува од мојот печатач?
CMYK-излезот на оваа страница е проценка на екранот заснована на стандардна конверзија. Професионалното печатење користи профили на бои (ICC) и хартија, што може да даде различни резултати. За прецизен CMYK, користете професионален софтвер.