HEX í HSL breytir

HEX til HSL – Umbreyting litakóða

Hvað gerir þessi síða

Þú slærð inn HEX-litakóða – annað hvort fulla sex stafa formið eins og #1E90FF eða þriggja stafa styttu útgáfuna eins og #abc – og síðan skilar strax samsvarandi HSL-gildi (blæ í gráðum, mettun og ljósleiki sem prósentur). HSL-framsetningin er hönnuð fyrir mannlega rökhugsun, sem gerir það beinskeytt að stilla ljósleika eða mettun á meðan blærinn helst sá sami. Á sama tíma sýnir síðan litinn í öllum öðrum studdu sniðum (RGB, HSV, CMYK, LAB) svo þú getir afritað það snið sem þú þarft.

HEX er hrá RGB-táknun – sex sextölustafir (eða þriggja stafa stytting) sem kóða beint rauð, græn og blá gildi. Það er þétt og mikið notað í CSS og hönnunarverkfærum, en það er ekki leiðandi fyrir mannlega skiljanlegar breytingar. HSL er byggt fyrir mannlega rökhugsun – blær er mældur í gráðum (0–360), en mettun og ljósleiki eru prósentur. Að breyta ljósleika einum saman heldur blænum óbreyttum, sem er ástæðan fyrir því að HSL er uppáhaldssniðið fyrir að búa til litapallettur og þemu.

Hvernig HEX-litakóðar virka

HEX-litakóði er grunnurinn að því hvernig tölvur birta liti á skjá. Hann notar sextölukerfi (base‑16) til að tákna þrjá þætti: rautt (R), grænt (G) og blátt (B). Hver þáttur er tveir sextölustafir, sem gefur gildi frá 00 til FF (0 til 255 í tugakerfi). Full sex stafa kóði lítur út eins og #RRGGBB, þar sem fyrstu tveir stafirnir eru rauði hluti, næstu tveir græni og síðustu tveir blái.

Þriggja stafa styttingin, eins og #abc, er stytt útgáfa þar sem hver stafur er tvöfaldaður. #abc verður því #aabbcc. Þetta virkar aðeins fyrir liti þar sem hver þáttur hefur sama staf tvisvar – til dæmis #fff fyrir hvítt eða #000 fyrir svart. Ef liturinn krefst mismunandi gilda, eins og #1E90FF, er ekki hægt að nota styttinguna.

Sextölustafirnir tákna gildi á bilinu 0 til 255. Til dæmis:

• #FF0000 er hreint rautt (255 rautt, 0 grænt, 0 blátt)
• #00FF00 er hreint grænt
• #0000FF er hreint blátt
• #FFFFFF er hvítt (allir þættir á hámarki)
• #000000 er svart (allir þættir á lágmarki)

HEX er mjög þétt og skilvirkt fyrir tölvur, en það er ekki leiðandi fyrir menn. Þegar þú sérð #4f46e5 geturðu ekki strax sagt hversu ljós eða dökkur liturinn er, né hvaða blæ hann hefur. Þess vegna er HSL betra fyrir mannlega notkun.

Uppbygging HSL

HSL stendur fyrir Hue (blær), Saturation (mettun) og Lightness (ljósleiki). Þetta er lýsandi líkan sem passar betur við hvernig menn skynja liti.

Blær (Hue) er mældur í gráðum á litahring, frá 0 til 360:

• 0° er rautt
• 120° er grænt
• 240° er blátt
• 360° er aftur rautt (sama og 0°)

Mettun (Saturation) er prósenta sem segir til um hversu sterkur liturinn er:

• 0% er gráskala (engar litatónar)
• 100% er fullmettun (hreinn, ríkulegur litur)

Ljósleiki (Lightness) er prósenta sem segir til um hversu ljós eða dökkur liturinn er:

• 0% er svart (algjörlega dökkt)
• 50% er venjulegur ljósleiki
• 100% er hvítt (algjörlega ljóst)

Til dæmis, liturinn hsl(240, 100%, 50%) er hreint blátt: blær 240°, fullmettun, og miðlungs ljósleiki. Ef þú minnkar ljósleikann í 25% færðu dökkbláan lit, en blærinn helst sá sami. Þetta er ótrúlega gagnlegt fyrir að búa til litabreytingar – þú getur haldið blænum stöðugum og bara stillt ljósleika eða mettun.

HSL gerir það einnig auðvelt að búa til samhverfa liti. Til dæmis, fyrir hsl(240, 100%, 50%) er andstæði liturinn hsl(60, 100%, 50%) (240 + 180 = 420, sem er 60° eftir að draga 360). Þetta er beinskeyttara en að reikna út úr HEX eða RGB.

Af hverju HSL er leiðandi fyrir menn

HEX og RGB eru tæknilegar framsetningar sem tölvur skilja vel. Þær kóða liti sem blöndu af þremur ljósgjöfum – rauðu, grænu og bláu – sem er ekki leiðandi fyrir mannlega skynjun. Þegar þú sérð rgb(79, 70, 229) veistu að það er bláleitur litur, en þú getur ekki auðveldlega sagt hversu ljós hann er eða hversu mettaður.

HSL breytir þessu. Með HSL geturðu:

• Stilla ljósleika án þess að breyta blæ – fullkomið fyrir hover-ástand eða mismunandi þemu
• Stilla mettun til að gera lit mildari eða sterkari – gott fyrir að draga úr litum í bakgrunnum
• Finna andstæða liti með því að bæta 180° við blæinn – einfalt fyrir litapallettur
• Finna samhverfa liti – til dæmis, að bæta 30° við blæinn gefur þér næsta lit í hringnum

Þetta gerir HSL að kjörsniði fyrir:

• Að búa til CSS breytur fyrir þemu
• Að búa til ljós/dökk þemu með sömu litum
• Að breyta litum fyrir aðgengi – til dæmis að auka ljósleika til að ná WCAG-skilyrðum fyrir litaskerpu
• Að gera litavalkosti sjálfvirka í hönnunarverkfærum

Umbreytingin milli HEX og HSL

Umbreytingin milli HEX og HSL byggir á stærðfræðilegu sambandi milli RGB og HSL. Hér er skref-fyrir-skref lýsing:

1. HEX til RGB: Sex stafa HEX-kóði er umbreyttur í þrjú tugakerfisgildi (0–255). Til dæmis, #4f46e5:

   • 4f = 79 (rautt)
   • 46 = 70 (grænt)
   • e5 = 229 (blátt)

2. RGB í normaliseruð gildi: Hvert RGB-gildi er deilt með 255 til að fá gildi á bilinu 0 til 1.

   • R = 79 / 255 ≈ 0,310
   • G = 70 / 255 ≈ 0,275
   • B = 229 / 255 ≈ 0,898

3. Finna hámark og lágmark:

   • max = 0,898 (blátt)
   • min = 0,275 (grænt)
   • delta = max - min = 0,623

4. Reikna ljósleika (Lightness): L = (max + min) / 2 = (0,898 + 0,275) / 2 ≈ 0,586 = 58,6%

5. Reikna mettun (Saturation): Ef delta er 0, er mettun 0%. Annars:

   • Ef L ≤ 0,5: S = delta / (max + min) = 0,623 / (0,898 + 0,275) ≈ 0,531 = 53,1%
   • Ef L > 0,5: S = delta / (2 - max - min) = 0,623 / (2 - 0,898 - 0,275) ≈ 0,753 = 75,3%

6. Reikna blæ (Hue):

   • Ef delta er 0, er blær 0°
   • Annars, ef max er rautt: H = 60° × ((G - B) / delta + 0) – en ekki í þessu tilfelli
   • Ef max er grænt: H = 60° × ((B - R) / delta + 2)
   • Ef max er blátt: H = 60° × ((R - G) / delta + 4)

   Hér er max blátt, svo: H = 60° × ((0,310 – 0,275) / 0,623 + 4) = 60° × (0,035 / 0,623 + 4) ≈ 60° × 4,056 ≈ 243,4°

Niðurstaðan fyrir #4f46e5 er hsl(243°, 75%, 59%) (ávalt). Þetta sýnir bláan lit með mikilli mettun og miðlungs ljósleika.

Villur og jaðartilvik

Síðan tekur aðeins við gildum HEX-kóðum – sex stafa eða þriggja stafa, með eða án # framan við. Ef þú slærð inn ógilt gildi, eins og #xyz eða 12345, birtist villuskilaboðin: “Enter a hex color like #4f46e5 or #abc.” Þetta kemur í veg fyrir rugling.

Þriggja stafa kóði er aðeins leyfður þegar hver stafur er tvöfaldaður. #abc virkar (verður #aabbcc), en #abc1 er ógilt. Fjögurra stafa HEX (með gegnsæi) er ekki studd, þar sem hvorki HEX né HSL innihalda alpha-rás.

Önnur jaðartilvik:

• Ef RGB-gildið er utan sRGB-sviðs (til dæmis úr CMYK eða LAB), er litnum stillt á næsta sjáanlega lit. Þegar þú umbreytir aftur í HEX getur liturinn verið örlítið breyttur.
• CMYK-gildi sem sýnd eru á síðunni eru áætlaðar tölur fyrir skjá og ætti ekki að nota fyrir prentun án kvörðunar.
• Allar umbreytingar eiga sér stað inni í vafranum þínum – ekkert sem þú slærð inn er sent eða vistað.

Hver þarf á þessu að halda

Þessi síða er gagnleg fyrir:

• Framendaþróunaraðila sem skrifa CSS og vilja breyta HEX-lit úr hönnunarsniðmáti í HSL til að geta auðveldlega stillt ljósleika fyrir hover-ástand eða þemabreytingar.
• UI/UX-hönnuði sem hugsa í blæ, mettun og ljósleika og þurfa að passa við vörumerkislit sem er gefinn í HEX.
• Þá sem búa til litapallettur – HSL gerir það einfalt að búa til samhverfa, andstæða eða einlita mynstur með því að breyta aðeins blæ eða mettun.
• Aðgengissérfræðinga sem þurfa að sannreyna litaskerpu og finna HSL auðveldara í meðförum en hrátt HEX eða RGB.

Algengar spurningar

1. Hvernig umbreyti ég HEX í HSL án þessarar síðu? Þú getur umbreytt HEX í RGB (með því að breyta sextölustöfum í tugakerfi) og síðan beitt stærðfræðilegum formúlum fyrir HSL. Formúlurnar byggja á hámarks- og lágmarksgildi RGB, sem og delta þeirra á milli. Síðan hér gerir þetta sjálfkrafa.

2. Hvað gerist ef ég slæ inn #fff? #fff er þriggja stafa HEX-kóði sem síðan tvöfaldar hvern staf: #ffffff. Þetta er hvítt – RGB (255, 255, 255). HSL-gildið verður hsl(0°, 0%, 100%) – enginn blær (þar sem enginn litur er til staðar), engin mettun og fullur ljósleiki.

3. Er hægt að nota fjögurra stafa HEX? Nei, síðan styður aðeins sex stafa og þriggja stafa HEX. Fjögurra stafa HEX (eins og #ff00) er með alpha-rás og er ekki studd þar hvorki HEX né HSL innihalda gegnsæi.

4. Hvað er munurinn á HSL og HSB? HSL (Hue, Saturation, Lightness) og HSB (Hue, Saturation, Brightness) nota bæði blæ og mettun, en þriðji þátturinn er mismunandi. HSL notar ljósleika (miðja á milli svarts og hvíts), en HSB notar birtu (hversu mikið ljós liturinn sendir frá sér). HSL er betra fyrir að búa til ljós/dökk þemu, en HSB er betra fyrir að stilla birtu litanna.

5. Get ég notað HSL beint í CSS? Já, CSS styður hsl() fallið. Til dæmis: color: hsl(240, 100%, 50%). Þetta er mjög gagnlegt fyrir CSS-breytur eins og --primary-hue: 240; og svo color: hsl(var(--primary-hue), 100%, 50%).

6. Hvað gerist ef liturinn er utan sRGB-sviðs? Ef þú slærð inn gildi úr CMYK eða LAB sem er utan sRGB-sviðs, er litnum stillt á næsta sjáanlega lit. Þetta þýðir að þegar þú umbreytir aftur í HEX getur liturinn verið örlítið breyttur. Síðan birtir viðvörun um þetta.