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

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

Страницата hsl-to-rgb овозможува моментална конверзија на боја зададена во HSL (Hue, Saturation, Lightness — Нијанса, Заситеност, Осветленост) во RGB (Red, Green, Blue — Црвено, Зелено, Сино), како и во уште неколку други бои модели. Внесувате вредност за нијансата (0–360 степени), заситеноста (процент) и осветленоста (процент), и алатката веднаш го прикажува еквивалентниот RGB триплет (0–255). На пример, ако внесете 243, 75%, 59% како HSL, добивате rgb(79, 70, 229).

Оваа конверзија ви овозможува да преминете од модел изграден за човечко размислување за бојата (каде што промената на осветленоста ја задржува нијансата непроменета) до точните броеви што ги користи екранот за да емитува светлина. Во позадина, страницата користи стандарден алгоритам за претворање на HSL во RGB (опишан во CSS спецификациите и W3C препораките), кој работи директно во вашиот прелистувач.

Што ја прави оваа страница различна

Клучната предност на HSL во однос на другите бои модели е тоа што таа не го одвојува интуитивниот концепт на „светло“ од „чиста боја“ само заради човечкото сфаќање. Кога ја менувате осветленоста (L) во HSL, нијансата (H) останува идентична. Ова е причината зошто HSL е толку популарна за генерирање палети и теми — лесно можете да создадете низа од посветли или потемни варијации на истата нијанса.

За разлика од конверзиите од LAB или CMYK во RGB, конверзијата од HSL во RGB е беззагубна — секоја валидна HSL вредност се мапира на единствен RGB триплет кој е прикажлив на екран. Нема отсекување на бои надвор од гамутот, затоа нема промена на бојата кога се враќате назад. Оваа особина ја прави алатката сигурна за работни текови каде што точноста е критична, на пример при пренесување на бои од дизајнерски алат во CSS.

Влезни и излезни вредности

Влезни полиња:

• H (нијанса): цел број од 0 до 360 степени (на пр. 243)
• S (заситеност): процент (на пр. 75%)
• L (осветленост): процент (на пр. 59%)

Се очекува форматот H, S%, L% — на пример 243, 75%, 59%. Ако внесете неправилен формат, страницата прикажува порака:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“

Излезни вредности (сите се ажурираат веднаш по промена на HSL):

Особено важно: CMYK вредностите прикажани на екранот се проценка и може да се разликуваат од вистинските вредности што би ги добиле во професионален печат, поради разлики во хартијата, мастилата и профилите на печатарот. Не користете ги за критични печатени проекти без проверка со соодветен профил.

Сите конверзии се вршат исклучиво во вашиот прелистувач. Ниту една вредност што ја внесувате не се испраќа на интернет.

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

1. Погрешен формат на внес: ако вредноста не одговара на шаблонот H, S%, L%, се прикажува опишаната грешка. Пример: внесување само два броја или заборавање на процентите предизвикува порака.
2. Невалидни опсези: ако H не е 0–360, S или L не се 0–100%, конверзијата нема да се изврши. Алатката не прави автоматско скратување (clamping), туку бара корисникот да внесе валидни вредности.
3. Празни полиња: ако некое поле е празно, сите излезни полиња остануваат празни сè додека не се внесе комплетен HSL.
4. Децимални вредности: H се очекува како цел број, но ако внесете децимален број (на пр. 243.5), алатката најверојатно ќе го третира како реален број, иако стандардно H е цел број. Сепак, за максимална компатибилност со CSS, препорачливо е да се користат цели броеви.
5. Нестандардни записи: запирки и проценти мора да бидат според прикажаниот пример. Разлики во белини (празни места) генерално се толерирани, но не и отсуство на запирки.

Кому му е потребна оваа страница

• Дизајнери кои создаваат палети или теми често размислуваат во HSL (на пр. сакаат да добијат полесна верзија на одредена нијанса). Треба да ги претворат тие HSL вредности во RGB за да ги кодираат во CSS или во софтвер за уредување слики.
• Front-end програмери кои примаат бои од дизајнери (често изразени во HSL од алатки како Figma или Sketch) и треба да ги претворат во rgb() или #hex за да ги користат во CSS, HTML Canvas или SVG.
• Секој кој сака да размислува за бојата на човечки прифатлив начин (нијанса, заситеност, осветленост) и потоа да ги добие точните екрански броеви — на пр. за прилагодување на контрастот при дизајнирање пристапни интерфејси.

Разбирање на различните бои модели

Конверзијата на оваа страница не е само HSL→RGB; таа ви овозможува да ја видите истата боја во шест различни модели. Еве кратко објаснување на секој од нив и кога се користи:

• HEX (хексадецимален): најчест формат во веб-развојот. Претставува RGB вредности како шест хексадецимални цифри (#RRGGBB). Лесно се копира во CSS.
• RGB (адитивен модел): основниот модел на екраните. Секоја боја се добива со мешање на црвена, зелена и сина светлина во опсег 0–255. Ова е „машинскиот јазик“ за боите на мониторите.
• HSL (модел за човечко размислување): Нијансата е агол на тркалото со бои (0°=црвена, 120°=зелена, 240°=сина). Заситеноста го опишува интензитетот (0% = сива, 100% = чиста боја). Осветленоста одредува колку бојата е светла/темна (0% = црна, 100% = бела). За разлика од RGB, промената на осветленоста не ја менува нијансата — ова е клучно за генерирање на хармонични палети.
• HSV (Hue, Saturation, Value): сличен на HSL, но осветленоста е заменета со вредност (Value) која го опишува максималниот интензитет на бојата. HSV често се користи во графички едитори (на пр. Photoshop) за бирање бои.
• CMYK (субтрактивен модел): се користи во печатење (Cyan, Magenta, Yellow, Key/black). Бидејќи екраните се адитивни (додаваат светлина), а печатењето е субтрактивно (одзема светлина преку мастило), конверзијата од RGB во CMYK е приближна и зависи од профилот на печатарот. Затоа страницата предупредува дека вредностите се само проценка.
• LAB (CIELAB): модел дизајниран да биде перцепциски униформен, т.е. истата разлика во броеви одговара на иста визуелна разлика. L* е осветленост, a* и b* се хроматични оски. LAB е корисен за напредна анализа на боја, но не може директно да се прикаже на екран без конверзија во RGB.

Гамутот на RGB е ограничен — не сите бои што ги гледа човек може да се прикажат на екран. Кога конвертирате од LAB во RGB, може да дојде до отсекување (out-of-gamut clipping). Но конверзијата од HSL во RGB е беззагубна бидејќи HSL работи во истиот гамут како RGB. Затоа нема изненадувања при враќање назад.

Чести прашања (FAQ)

1. Дали конверзијата од HSL во RGB е точна?
Да. Секоја валидна HSL вредност се претвора во единствен RGB триплет со помош на стандардниот алгоритам дефиниран во CSS. Бидејќи и двата модела работат во ист гамут (sRGB), конверзијата е прецизна и без загуби.

2. Може ли да конвертирам назад од RGB во HSL?
Оваа страница е наменета за HSL→RGB, но обратната конверзија е исто така стандардна (исто така беззагубна). Постојат многу алатки за RGB→HSL, но оваа алатка се фокусира на претворање од човечки разбирлив модел во екрански броеви.

3. Зошто CMYK вредностите се само проценка?
CMYK е субтрактивен модел кој зависи од многу фактори: тип на хартија, мастило, профил на печатач. Екранот ги прикажува вредностите според стандардна конверзија (на пр. с помош на профилот sRGB→CMYK), но реалниот резултат при печатење може да отстапува. За професионален печат, користете профилирани алатки и пробни отпечатоци.

4. Дали моите податоци се испраќаат некаде?
Не. Сите пресметки се вршат во вашиот прелистувач со JavaScript. Ниту една вредност не ја напушта вашата машина. Страницата не снима историја на конверзии.

5. Што да направам ако внесам вредност што не одговара на примерот?
Ако не го следите форматот H, S%, L% (на пр. заборавите запирка или ставите повеќе од три броеви), страницата прикажува јасна порака за грешка. Поправете го внесот според примерот и сите полиња повторно ќе се ажурираат.

6. Зошто не се прикажува вредност за некои модели кога внесувам HSL?
Сите излезни полиња (HEX, RGB, HSL, HSV, CMYK, LAB) треба да се ажурираат истовремено. Ако некое поле остане празно, проверете дали внесот е точен и дали сите проценти се внесени со симболот %. Во ретки случаи, прелистувачот може да блокира JavaScript — обновете ја страницата.