RGB į HSL konverteris

Kas daro šį puslapį kitokį

Šis puslapis konvertuoja iš ekranui būdingo RGB modelio į HSL – modelį, sukurtą žmogaus spalvų samprotavimui. Skirtingai nuo RGB, kur pakeitus vieną kanalą dažnai pasikeičia suvokiamas atspalvis, HSL leidžia nepriklausomai reguliuoti šviesumą, išlaikant pastovų atspalvį. Dėl to HSL yra pageidautinas modelis kuriant spalvų paletes, temas ir prieinamo kontrasto variacijas. RGB reikšmės yra „žali“ 0–255 intensyvumo lygiai; HSL išreiškia atspalvį 0–360° apskritimu, o sodrumą ir šviesumą – procentais.

Įvedate RGB spalvą – tris skaičius nuo 0 iki 255, rodančius, kaip ekranas maišo raudoną, žalią ir mėlyną šviesą – ir iškart matote jos atitikmenį HSL formatu (atspalvis laipsniais, sodrumas ir šviesumas procentais). Įrankis taip pat rodo tą pačią spalvą kitais įprastais formatais (HEX, HSV, CMYK, LAB), kad galėtumėte nukopijuoti jūsų projektui reikalingą reikšmę. Redaguojant bet kurį lauką, akimirksniu atnaujinami visi kiti laukai. Visi konvertavimai vyksta jūsų naršyklėje; niekas, ką įvedate, nėra įkeliama į serverį.

Kaip RGB vaizduoja spalvas ekranuose

RGB modelis remiasi adityviu šviesos maišymu. Kiekvienas pikselis ekrane sudarytas iš trijų mažų šviesos šaltinių: raudono, žalio ir mėlyno. Kai jie šviečia kartu, mes matome baltą spalvą; kai visi išjungti – juodą. Kiekvieno kanalo intensyvumas užkoduojamas sveikuoju skaičiumi nuo 0 iki 255, o tai atitinka 8 bitus vienam kanalui. Kartu tai suteikia 256³ = 16,7 milijono galimų spalvų.

Šis puslapis veikia sRGB darbo erdvėje – standartiniame spalvų diapazone, kurį naudoja dauguma monitorių, žiniatinklio naršyklių ir skaitmeninių fotoaparatų. Kai įvedate RGB reikšmę, pvz., 79, 70, 229, puslapis šią reikšmę apdoroja kaip sRGB tašką. Šiame pavyzdyje raudona yra 79, žalia – 70, mėlyna – 229. Tai intensyvus mėlynai violetinis atspalvis. Norint suprasti, kokia tai spalva žmogaus akiai, reikia pereiti prie modelio, kuris geriau atspindi mūsų suvokimą.

HSL ir žmogaus spalvų suvokimas

HSL modelis spalvą aprašo trimis komponentais:

• Atspalvis (Hue, H) – kampas spalvų rate, 0–360°. 0° arba 360° – raudona, 120° – žalia, 240° – mėlyna. Mūsų pavyzdyje (79, 70, 229) atspalvis yra 243°.
• Sotumas (Saturation, S) – procentas nuo 0% (pilka) iki 100% (gryna spalva). Pavyzdyje – 75%.
• Šviesumas (Lightness, L) – procentas nuo 0% (juoda) iki 100% (balta). Pavyzdyje – 59%.

Skirtingai nuo RGB, kur pakeitus vieną kanalą gali visiškai pasikeisti spalva, HSL leidžia keisti šviesumą nekeičiant atspalvio. Tai reiškia, kad galite paimti pagrindinę prekės ženklo spalvą ir sukurti šviesesnį jos variantą (padidindami L) arba tamsesnį (sumažindami L), išlaikydami tą patį atspalvį. Tai neįkainojama kuriant spalvų paletes, temas ir prieinamo kontrasto variantus.

Matematika už konvertavimo

Konvertavimas iš RGB į HSL vyksta keliais žingsniais:

1. Normalizavimas – kiekviena RGB reikšmė (0–255) padalinama iš 255, kad gautume skaičius nuo 0 iki 1. Pavyzdyje: R = 79/255 ≈ 0,310; G = 70/255 ≈ 0,275; B = 229/255 ≈ 0,898.
2. Minimalios ir maksimalios reikšmės radimas – randame mažiausią ir didžiausią normalizuotą reikšmę. Čia min = G ≈ 0,275; max = B ≈ 0,898.
3. Šviesumo apskaičiavimas – L = (max + min) / 2 = (0,898 + 0,275) / 2 = 0,5865. Procentais: 58,65% ≈ 59%.
4. Sodrumo apskaičiavimas – jei max = min, spalva pilka, sotumas = 0%. Kitu atveju:
   • Jei L ≤ 0,5: S = (max – min) / (max + min)
   • Jei L > 0,5: S = (max – min) / (2 – max – min) Čia L ≈ 0,5865 > 0,5, todėl S = (0,898 – 0,275) / (2 – 0,898 – 0,275) = 0,623 / 0,827 ≈ 0,753. Procentais: 75,3% ≈ 75%.
5. Atspalvio apskaičiavimas – priklauso nuo to, kuris kanalas yra maksimalus:
   • Jei max = R: H = 60° × ((G – B) / (max – min) mod 6)
   • Jei max = G: H = 60° × ((B – R) / (max – min) + 2)
   • Jei max = B: H = 60° × ((R – G) / (max – min) + 4) Čia max = B, todėl H = 60° × ((0,310 – 0,275) / (0,898 – 0,275) + 4) = 60° × (0,035 / 0,623 + 4) = 60° × (0,0562 + 4) = 60° × 4,0562 = 243,37° ≈ 243°.

Atvirkštinis konvertavimas iš HSL į RGB taip pat įgyvendintas – jei tiesiogiai įvesite HSL reikšmę, pvz., 243°, 75%, 59%, puslapis perskaičiuos atgal į RGB.

HSL prieinamumui ir interneto kūrime

HSL modelis ypač vertingas kuriant prieinamas sąsajas. WCAG (Web Content Accessibility Guidelines) reikalauja tam tikrų kontrasto santykių tarp teksto ir fono: mažiausiai 4,5:1 normalaus teksto atveju ir 3:1 didelio teksto atveju. HSL leidžia lengvai reguliuoti šviesumą, kad pasiektumėte šiuos santykius, nekeisdami pagrindinės spalvos tapatybės.

Pavyzdžiui, jei jūsų firminė spalva yra 243°, 75%, 59% (šviesiai violetinė), o jums reikia tamsaus teksto ant šviesaus fono, galite sumažinti šviesumą iki 20% ir gauti tamsiai violetinį atspalvį, išlaikantį tą patį atspalvį. Tai suteikia harmoningą, nuoseklią išvaizdą visoje svetainėje.

Front-end kūrėjams šis puslapis yra naudingas verčiant dizaino sistemas iš RGB (pvz., iš Figma ar Sketch) į CSS hsl() funkcijas. CSS palaiko hsl(h, s%, l%) ir hsla(h, s%, l%, a), o tai leidžia dinamiškai manipuliuoti spalvomis per JavaScript. Pavyzdžiui, galite padidinti šviesumą 10%, kad sukurtumėte „pakeltą“ mygtuko būseną, neperskaičiuodami RGB reikšmių rankiniu būdu.

Temų kūrėjai gali naudoti HSL generuodami šviesius ir tamsius prekės ženklo spalvos variantus. Pavyzdžiui, tamsiam režimui sumažinkite šviesumą nuo 59% iki 40%, o šviesiam – padidinkite iki 80%. Atspalvis lieka 243°, todėl vartotojas vis dar atpažįsta tą pačią spalvą.

Duomenų vizualizacijos dizaineriai renkasi HSL, nes jo šviesumo kanalas yra intuityvus sekvencinėms skalėms. Jei norite sukurti spalvų gradientą nuo šviesios iki tamsios, galite tiesiog tolygiai keisti L reikšmę, pvz., nuo 10% iki 90%, išlaikydami pastovų atspalvį ir sodrumą.

HSL apribojimai ir klaidos, kurių reikia vengti

Nors HSL yra patogus, jis nėra percepciškai vienodas. Tai reiškia, kad du spalvų taškai su tuo pačiu šviesumu (L) gali atrodyti skirtingai ryškiai. Pavyzdžiui, geltona spalva (60°, 100%, 50%) atrodo daug šviesesnė nei mėlyna (240°, 100%, 50%), nors jų L reikšmė yra identiška. Taip nutinka, nes žmogaus akis skirtingai jautri skirtingiems bangų ilgiams. Alternatyvūs modeliai, pvz., LAB, buvo sukurti siekiant percepcinio vienodumo, tačiau jie yra sudėtingesni ir mažiau paplitę interneto kūrime.

Kita dažna klaida – painiojimas tarp HSL ir HSV (arba HSB). HSV naudoja vertę (Value) vietoj šviesumo. HSL šviesumas svyruoja nuo juodos (0%) iki baltos (100%) per gryną spalvą 50%. HSV vertė svyruoja nuo juodos (0%) iki grynos spalvos (100%). Tai reiškia, kad ta pati spalva duos skirtingus H, S skaičius abiejuose modeliuose.

Įvedimo taisyklės ir klaidų pranešimai:

Jei įvedate LAB ar CMYK reikšmę, kuri atitinka spalvą už matomo RGB diapazono, įrankis automatiškai pakoreguoja ją iki artimiausios ekrane rodomos spalvos. Konvertuojant tą spalvą atgal, gali atsirasti nedidelis poslinkis. CMYK išvestis yra ekrano įvertis; ji neturėtų būti naudojama profesionaliam spausdinimui nepatikrinus.

Dažniausiai užduodami klausimai

Kodėl HSL naudingesnis nei RGB kuriant spalvų paletes?

HSL leidžia keisti šviesumą nekeičiant atspalvio. RGB sistemoje, norint pašviesinti spalvą, reikia keisti visus tris kanalus, o tai dažnai netyčia pakeičia atspalvį. HSL šviesumo reguliavimas yra tiesioginis vienos ašies judesys, todėl lengva sukurti vientisas paletes.

Ar HSL ir HSB (HSV) yra tas pats?

Ne. HSL naudoja šviesumą (Lightness), o HSB/HSV – vertę (Value). HSL siekia modeliuoti žmogaus suvokimą, kai 50% šviesumo atitinka gryną spalvą, o 0% – juodą, 100% – baltą. HSV labiau tinka vaizdo apdorojimui, kur vertė atitinka šviesos intensyvumą. Šis puslapis rodo abu modelius, kad galėtumėte palyginti.

Kodėl CMYK išvestis yra tik ekrano įvertis?

CMYK yra atimtinis spausdinimo modelis, o RGB – adityvus ekrano modelis. Jie turi skirtingus spalvų diapazonus (gamas). Šis puslapis naudoja matematinį vertimą, bet tikras spausdinimo rezultatas priklauso nuo popieriaus, rašalo ir spausdintuvo kalibracijos. Spausdinimui visada reikia profilio valdymo ir fizinio patikrinimo.

Ką daryti, jei įvedu nepriimtiną reikšmę?

Jei įvedate RGB reikšmes, neatitinkančias formato „trys skaičiai 0–255“, puslapis parodys pranešimą: „Įveskite RGB kaip tris skaičius 0–255, pvz., 79, 70, 229.“ Panašiai ir HSL atveju: „Įveskite HSL kaip atspalvį 0–360 su dviem procentais, pvz., 243, 75%, 59%.“

Ar šis įrankis gali konvertuoti atgal iš HSL į RGB?

Taip. Tiesiog įveskite HSL reikšmę (atspalvis 0–360, po to du procentai, atskirti kableliais ar tarpais). Puslapis automatiškai perskaičiuos į RGB, HEX, HSV, CMYK ir LAB. Redaguojant bet kurį lauką, atnaujinami visi kiti.

Kuo skiriasi HSL ir LAB spalvų modeliai?

HSL yra patogus žmogui, bet nėra percepciškai vienodas. LAB buvo sukurtas remiantis žmogaus regėjimo tyrimais – atstumai LAB erdvėje atitinka suvokiamus spalvų skirtumus. Tačiau LAB yra sudėtingesnis, mažiau palaikomas CSS ir dažnai reikalauja papildomų konversijų, kad būtų rodomas ekrane. Šis puslapis pateikia LAB kaip papildomą informaciją, bet pagrindinis konvertavimas išlieka RGB ↔ HSL.