RGB í HSL breytir

RGB-til-HSL: frá rauntölum yfir í mannlega litaheild

RGB stendur fyrir additive ljósblöndun á skjáum, þar sem hver litur er gefinn upp sem þrjú heiltölugildi á bilinu 0 til 255. HSL breytir þessu yfir í líkan sem vinstri heili notenda skilur betur: litblær (hue) sem gráða á hring, mettun (saturation) sem hlutfall af hreinleika litarins og ljósleiki (lightness) sem hlutfall af birta. Þegar þú slærð inn RGB-gildi eins og 79, 70, 229 færðu strax HSL-úttakið 243°, 75%, 59% ásamt HEX, HSV, CMYK og LAB. Allar breytingar á einu sviði uppfæra hin samstundis, og allur útreikningurinn fer fram í vafranum þínum — ekkert af því sem þú setur inn er sent upp á netþjón.

Hvernig RGB virkar á skjáum

RGB byggir á additive ljósblöndun. Skjárinn þinn notar rauða, græna og bláa ljósgjafa sem blanda saman til að mynda alla liti. Hver litur er táknaður með heiltölu milli 0 (engin birta) og 255 (full birta). Þannig getur dæmigerður RGB-litur verið (255, 0, 0) fyrir hreinan rauðan, (0, 255, 0) fyrir grænan og (0, 0, 255) fyrir bláan. Skjárinn vinnur í sRGB-litrými, sem er staðall fyrir flestar vef- og myndvinnslur.

Þegar allir þrír kanalar eru stilltir á 0 færðu svart. Þegar þeir eru allir 255 færðu hvítt. Þetta virkar því skjárinn bætir ljósi saman — ólíkt prenti, þar sem blek dregur ljós frá og notar CMYK-líkanið. RGB er nákvæmasta leiðin til að stýra skjáum, en hún er ekki leiðandi fyrir fólk. Þegar þú vilt gera lit dekkri án þess að breyta litblænum þarftu að lækka öll þrjú RGB-gildin í sömu hlutföllum, sem er flókin handavinna. HSL einfaldar þetta.

HSL-líkanið byggt á mannlegri skynjun

HSL skiptir lit í þrjár víddir:

• Litblær (Hue): Gefinn upp í gráðum 0–360 á litahring. 0° er rauður, 120° grænn og 240° blár.
• Mettun (Saturation): Hlutfall 0%–100% sem segir til um hversu hreinn liturinn er. 0% er gráskala, 100% er fullur mettun.
• Ljósleiki (Lightness): Hlutfall 0%–100% þar sem 0% er svart, 50% er „hreinn“ litur og 100% er hvítt.

Þetta líkan er byggt á því hvernig fólk hugsar um liti. Þú getur stillt ljósleika án þess að snerta litblæinn, sem er nákvæmlega það sem þú þarft þegar þú býrð til ljósari eða dekkri afbrigði af fyrirtækjalit. Til dæmis, ef grunnliturinn þinn er (79, 70, 229) (blár með smá fjólubláum blæ), færðu HSL-gildið 243°, 75%, 59%. Viljirðu ljósari útgáfu geturðu hækkað ljósleikann í 70% án þess að breyta litblænum — RGB-gildin breytast sjálfkrafa í (133, 126, 240).

Hvers vegna HSL er notað fyrir litaspjöld og aðgengi

HSL er ómissandi tæki fyrir UI/UX-hönnuði og framendaforritara. RGB er tæknilegt og óþjált fyrir hugmyndavinnu, en HSL lætur þig vinna beint með eiginleika sem skipta máli fyrir notendur.

Litaspjöld: Þú getur búið til samræmt litaspjald með því að halda litblæ fastum og breyta mettun og ljósleika. Til dæmis, fyrir 243° geturðu búið til:

• Tint (ljósari): hækka ljósleika, lækka mettun
• Shade (dekkri): lækka ljósleika, halda mettun
• Tone (daufari): lækka mettun, halda ljósleika

Aðgengi: WCAG-staðallinn krefst ákveðins ljósleikamuns milli texta og bakgrunns. Með HSL geturðu stillt ljósleika beint til að ná 4.5:1 hlutföllum (fyrir venjulegan texta) eða 3:1 (fyrir stóran texta) án þess að breyta litblæ. Þetta er einfaldara en að reikna með RGB-línuleika.

CSS-vinnsla: Framendaforritarar nota hsl() fallið í CSS til að stjórna litum í vafra. Það er auðveldara að gera kvikar breytingar á lögunum með JavaScript. Til dæmis, til að búa til ljósari útgáfu af lit í notandaviðmóti, nægir að auka ljósleikagildið um 10%.

Stærðfræðin á bak við RGB-til-HSL umreikninginn

Umreikningurinn frá RGB yfir í HSL fer fram í vafranum með venjulegum reikniritum. Ferlið gengur út á að normalísera RGB-gildin yfir á bil 0–1, finna lægsta og hæsta gildi, og reikna ljósleika sem meðaltal þeirra. Mettunin ræðst af muninum á hámarki og lággildi miðað við ljósleikann. Litblær er fastsettur út frá því hvaða kanal er hæstur og staðsetningu hinna kanalanna.

Fyrir (79, 70, 229):

1. Normalísera: R=0.310, G=0.275, B=0.898
2. Hæsta gildi: 0.898 (B), lægsta: 0.275 (G)
3. Ljósleiki: (0.898 + 0.275) / 2 = 0.5865 (≈59%)
4. Mettun: munur / (1 - |2*L - 1|) = 0.623 / 0.827 = 0.753 (≈75%)
5. Litblær: blár kanal er hæstur → (6 + (R - G) / munur) * 60 = 243°

Þessi útreikningur er staðlaður og samræmist alþjóðlegum reglum fyrir sRGB-litrými.

Takmarkanir HSL og hvað ber að varast

HSL er ekki skynjunarlega einsleitt. Það þýðir að tveir litir með sama ljósleikagildi geta litið misbjört út fyrir mannsaugað. Til dæmis er gult (60°, 100%, 50%) mun bjartara við sama ljósleika og blátt (240°, 100%, 50%). Þetta stafar af línulegri eðli mannssjónarinnar. Fyrir verkefni sem krefjast skynjunarlega jafnrar litaskiptingar, eins og gagnamyndir, er LAB-líkanið betra.

CMYK-úttakið á þessari síðu er áætlað og ætti ekki að nota til prentunar án sérstakrar sannprófunar. Ef þú setur inn LAB- eða CMYK-gildi sem falla utan skjásviðs RGB, aðlagar tólið þau að næsta sýnilega lit. Þegar þú breytir aftur til baka getur lítil breyting átt sér stað. Þetta er eðlilegt afleiðing af sRGB-gamútinu.

Hagnýtar leiðbeiningar fyrir inntak

Aðeins rétt sniðin inntök virka. Fylgdu þessum reglum:

RGB:

• Sláðu inn þrjár heiltölur 0–255, aðskildar með kommu eða bili.
• Dæmi: 79, 70, 229 eða 79 70 229
• Ef inntakið er ógilt færðu: „Sláðu inn RGB sem þrjár tölur 0–255, til dæmis 79, 70, 229.”

HSL:

• Sláðu inn litblæ 0–360, mettun í prósentum og ljósleika í prósentum.
• Dæmi: 243, 75%, 59%
• Ógilt inntak leiðir til: „Sláðu inn HSL sem litblæ 0–360 og tvö prósentugildi, til dæmis 243, 75%, 59%.”

HEX, HSV, LAB, CMYK:

• Þeirra eigin sniðreglur gilda. Tólið uppfærir öll svið samtímis.

Algengar spurningar (FAQ)

1. Hvers vegna fæ ég aðra litblæ í HSL en ég bjóst við? Litblær er reiknaður út frá hæsta og lægsta RGB-kanal. Ef RGB-gildin eru ekki nákvæmlega í réttum hlutföllum fyrir tiltekinn lit, getur blærinn verið frábrugðinn mati þínu.

2. Get ég notað HSL-úttakið beint í CSS? Já. CSS styður hsl(H, S%, L%) og hsla(H, S%, L%, A). Til dæmis: hsl(243, 75%, 59%). Þetta virkar í öllum nútímavöfrum.

3. Er HSL nákvæmara en RGB fyrir aðgengi? HSL gerir það einfaldara að vinna með ljósleika, en WCAG-staðallinn reiknar ljósleika út frá línulegum RGB-gildum. HSL getur hjálpað við að finna viðeigandi gildi, en endanleg staðfesting krefst reiknings á ljósleikahlutföllum.

4. Hvers vegna er CMYK-úttakið aðeins áætlað? CMYK-líkanið er prentmiðað og nær yfir annað litrými en RGB. Umreikningurinn frá RGB yfir í CMYK á skjá er umbreyting sem krefst sérhæfðra sniðs (ICC-prófíla) til nákvæmni. Þessi síða notar staðlaða formúlu til mats.

5. Get ég sláð inn neikvæðar tölur fyrir RGB? Nei. RGB-gildi verða að vera á bilinu 0–255. Neikvæðar tölur eða tölur yfir 255 eru ógildar.

6. Hvað gerist ef ég slæ inn HSL með mettun yfir 100%? Mettun yfir 100% er sjálfkrafa takmörkuð við 100% við umreikning. Sama á við um ljósleika yfir 100%. Fyrir nákvæma litaheild er best að halda sig innan bilsins 0–100%.