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

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

Оваа алатка зема RGB боја – три броеви од 0 до 255 кои опишуваат како дисплејот меша црвена, зелена и сина светлина – и веднаш ја претвора во HSL (нијанса во степени, заситеност и осветленост во проценти). Покрај тоа, покажува истата боја во HEX, HSV, CMYK и LAB, за да можете да ја копирате вредноста што ви треба за вашиот проект.

Она што ја издвојува оваа страница е конверзијата од моделот кој е природен за дисплеите (RGB) во моделот изграден за човечкото размислување за боите (HSL). За разлика од RGB, каде промената на еден канал често ја менува перципираната нијанса, HSL ви овозможува да ја прилагодувате осветленоста независно додека нијансата останува константна. Ова го прави префериран модел за генерирање палети на бои, теми и пристапни контрастни варијации. RGB вредностите се сурови нивоа на интензитет од 0 до 255; HSL ја изразува нијансата на круг од 0–360°, со заситеност и осветленост како проценти.

Што е RGB и како го претставува колорот на екраните

RGB (Red, Green, Blue) е адитивен модел на боја. Секој пиксел на вашиот монитор се состои од три подпиксели кои емитуваат црвена, зелена и сина светлина. Кога сите три се на максимален интензитет (255, 255, 255), добивате бела боја. Кога сите се на нула (0, 0, 0), добивате црна. Секој друг интензитет помеѓу 0 и 255 претставува специфична мешавина на овие три основни бои.

Работниот простор за овој модел е стандардно sRGB (standard Red Green Blue), кој го дефинира опсегот на бои што може да ги прикаже типичен компјутерски монитор. Ова значи дека кога внесувате RGB вредности, тие се автоматски во sRGB просторот. Ако внесете LAB или CMYK вредност што паѓа надвор од видливиот RGB опсег, алатката ја прилагодува до најблиската прикажлива боја, што може да предизвика мало поместување при повторна конверзија.

RGB е одличен за дисплеи, но лош за човечкото размислување. Ако сакате да направите „посветла“ верзија на одредена боја, во RGB треба да ги зголемите сите три канали, но точниот однос зависи од бојата. Ако сакате само да ја промените заситеноста, треба да ги прилагодувате сите три канали на комплициран начин. Тука доаѓа HSL.

Што е HSL и како го моделира човечкото восприемање на боја

HSL (Hue, Saturation, Lightness) е модел кој ги организира боите на начин што е поинтуитивен за луѓето:

• Нијанса (Hue): Претставена како агол на тркалото на бои од 0° до 360°. 0°/360° е црвена, 120° е зелена, 240° е сина. Ова го одредува основниот тип на боја – дали е црвена, жолта или виолетова, на пример.
• Заситеност (Saturation): Процент од 0% до 100%. 0% значи сива нијанса (без боја), 100% е целосно чиста, жива боја.
• Осветленост (Lightness): Процент од 0% до 100%. 0% е секогаш црно, 100% е секогаш бело. 50% е „нормалната“ осветленост на чистата боја.

Оваа структура ви овозможува да размислувате за бојата како: „Сакам сина боја (нијанса 240°), но малку посива (50% заситеност) и доста светла (80% осветленост).“ Во RGB, истата боја би барала пресметување на три броја кои немаат јасна врска со перцепцијата.

Зошто дизајнерите претпочитаат HSL за палети и теми

Главната предност е независноста на димензиите. Кога генерирате палета на бои, често сакате да земете една основна боја и да креирате нејзини нијанси (tints), сенки (shades) и тонови (tones):

• Нијанса (tint): Додавање бело – во HSL, го зголемувате параметарот Lightness додека Hue и Saturation остануваат исти.
• Сенка (shade): Додавање црно – во HSL, го намалувате Lightness.
• Тон (tone): Додавање сиво – во HSL, ја намалувате Saturation.

Ова е речиси невозможно да се направи интуитивно во RGB. Ако сакате да ја направите бојата rgb(79, 70, 229) посветла, треба да ги зголемите сите три броја, но со различен сооднос. Со HSL, истата боја како hsl(243°, 75%, 59%) – зголемувањето на осветленоста на 70% веднаш дава полесна варијанта без да ја промени нијансата или заситеноста.

Ова е клучно за пристапност (accessibility). За да ги исполните WCAG (Web Content Accessibility Guidelines) стандардите за контраст, треба да обезбедите минимален однос на контраст помеѓу текстот и позадината. Со HSL, можете да ја прилагодите осветленоста на позадината додека го одржувате идентитетот на бојата на вашата марка. На пример, ако вашата марка боја е премногу светла за бел текст, можете да го намалите Lightness за 10% и да го постигнете потребниот контраст без да изгледа како друга боја.

Како функционира конверзијата помеѓу RGB и HSL

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

1. Нормализација: RGB вредностите од 0–255 се делат со 255 за да се добијат вредности помеѓу 0 и 1. На пример, rgb(79, 70, 229) станува R=0.310, G=0.275, B=0.898.

2. Наоѓање min и max: Се пресметуваат минималната и максималната вредност од трите нормализирани канали. За нашиот пример, min = 0.275, max = 0.898.

3. Пресметување на Lightness (L): L = (min + max) / 2. Тука L = (0.275 + 0.898) / 2 = 0.5865 → 58.65%, заокружено на 59%.

4. Пресметување на Saturation (S): Ако min и max се еднакви (сива боја), S = 0. Инаку, S = (max - min) / (1 - |2L - 1|). Тука, max – min = 0.623, 1 - |2*0.5865 - 1| = 1 - |0.173| = 0.827, па S = 0.623 / 0.827 = 0.753 → 75.3%, заокружено на 75%.

5. Пресметување на Hue (H): Ова е најсложениот дел. Зависи од тоа кој канал е максимален:

   • Ако max = R: H = 60° × ((G - B) / (max - min) + 0) mod 360
   • Ако max = G: H = 60° × ((B - R) / (max - min) + 2)
   • Ако max = B: H = 60° × ((R - G) / (max - min) + 4)

   Во нашиот пример, max = B (0.898), па H = 60° × ((0.310 - 0.275) / 0.623 + 4) = 60° × (0.035 / 0.623 + 4) = 60° × 4.056 ≈ 243.4°. Заокружено, тоа е 243°.

Така, rgb(79, 70, 229) станува hsl(243°, 75%, 59%).

Конверзијата од HSL назад во RGB го следи обратниот пат и е вградена во алатката. Кога ќе внесете HSL вредност, таа веднаш ги пресметува RGB броевите.

Ограничувања на HSL: кога да се потпреме на LAB

Иако HSL е одличен за генерирање палети, тој не е перцепционо униформен (perceptually uniform). Ова значи дека истиот чекор во Lightness не се чувствува исто за сите бои. На пример, жолтата на hsl(60°, 100%, 50%) изгледа многу посветла од сината на hsl(240°, 100%, 50%), иако и двете имаат Lightness од 50%. Човечкото око е поосетливо на жолта светлина отколку на сина.

Ова е проблем кога сакате да креирате бои што изгледаат дека имаат иста визуелна тежина, на пример за дијаграми со повеќе категории. Ако едноставно земете шест бои со иста Lightness, некои ќе изгледаат посветли од другите.

Тука доаѓа LAB моделот. LAB, кој исто така го прикажува алатката, е дизајниран да биде перцепционо униформен – истиот чекор во кој било дел од просторот создава иста перципирана промена на бојата. Ако работите на визуелизација на податоци каде перцепционо правилното подредување на боите е критично (на пример, секвенцијални шеми за топлински карти), LAB или неговиот дериват LCH (Lightness, Chroma, Hue) се подобри избори.

Сепак, HSL е поедноставен за рачно пресметување и за интеграција во CSS, и затоа останува стандарден избор за повеќето веб-дизајнерски задачи засновани на нијанси и сенки.

Практична употреба во веб развој: CSS hsl() и JavaScript

CSS директно поддржува HSL со функциите hsl() и hsla() (каде a е алфа-канал за проѕирност, од 0 до 1). На пример:

.my-element {
  background-color: hsl(243, 75%, 59%);
  color: hsl(243, 75%, 20%); /* Темна верзија за текст */
}

Ова овозможува динамичко манипулирање на стилови преку JavaScript. На пример, можете да го промените само Lightness за да креирате hover ефект:

const baseHue = 243;
const baseSaturation = 75;
let lightness = 59;

element.style.backgroundColor = `hsl(${baseHue}, ${baseSaturation}%, ${lightness}%)`;

element.addEventListener('mouseenter', () => {
  lightness = 70;
  element.style.backgroundColor = `hsl(${baseHue}, ${baseSaturation}%, ${lightness}%)`;
});

Ова е многу почисто отколку да се пресметува нова RGB вредност со промена на три канали. Исто така, со HSL можете да креирате цела палета програмски со еден циклус:

const hues =;
const palette = hues.map(h => `hsl(${h}, 75%, 59%)`);

Ова дава шест бои кои се подеднакво распоредени околу тркалото, со иста заситеност и осветленост.

Влезови, излези и правила за користење на алатката

Алатката прифаќа RGB внес како три цели броеви од 0 до 255, одделени со запирки или празни места. На пример: 79, 70, 229 или 79 70 229. Ако внесете неважечки формат, се прикажува пораката: “Enter RGB as three numbers 0–255, like 79, 70, 229.”

Исто така, можете да внесете HSL директно за да ја конвертирате назад во RGB. Форматот е нијанса (0–360) и два проценти, на пример 243, 75%, 59%. Неважечки внес покажува: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

Алатката прикажува пет излези:

Уредувањето на кое било поле веднаш ги ажурира сите други полиња. Важно е да се напомене дека CMYK излезот е проценка за екранот и не треба да се користи за професионално печатење без верификација. Ако внесете LAB или CMYK вредност што е надвор од видливиот RGB опсег, алатката ја прилагодува до најблиската прикажлива боја, што може да предизвика мало поместување при повторна конверзија.

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

Зошто мојата боја изгледа различно во HSL отколку во RGB? Бојата е иста – само претставена на различен начин. Ако внесете rgb(79, 70, 229), алатката покажува целосно иста боја како hsl(243°, 75%, 59%). Разликата е само во тоа како ги опишувате димензиите на бојата.

Која е разликата помеѓу HSL и HSV? HSV (Hue, Saturation, Value) е сличен, но го користи параметарот Value (максималната вредност на R, G или B) наместо Lightness. Во HSL, 100% Lightness е секогаш бело; во HSV, 100% Value е чиста боја со максимален интензитет. За исти RGB вредности, HSL и HSV даваат различни бројки.

Може ли да копирам HSL вредност директно во CSS? Да. Форматот hsl(243, 75%, 59%) или hsl(243deg 75% 59%) е валиден CSS. Само додајте го во вашето правило за боја.

Дали алатката работи офлајн? Сите конверзии се случуваат во вашиот прелистувач, но самата страница бара интернет за да се вчита. Откако е вчитана, конверзиите се локални.

Зошто HSL е подобар за палети на бои од RGB? Затоа што можете да ја промените осветленоста без да влијаете на нијансата или заситеноста. Во RGB, промената на еден канал ја менува целокупната боја на непредвидлив начин.

Што значи пораката за CMYK дека е „on‑screen estimate“? Процесот на печатење користи различен модел (CMYK) и различен опсег на бои (gamut) од екранот. Конверзијата од RGB во CMYK вклучува приближувања и зависи од профилот на печатачот. За прецизни резултати во печатење, треба да користите инструменти за профилирање на бои.