ImageColorPicker.com

HSL → HEX konverter

Alakíts át bármilyen HSL színt HEX-ra — azonnal és ingyen

#3398DB

Illessz be bármilyen színértéket — mi felismerjük a formátumot.

H
S
L
HEX eredmény

Ez a szín minden formátumban

CMYK-profil: Coated FOGRA39 (a Photoshop európai alapértelmezése)

HSL-ben színt választani kényelmes, de a stylesheet-ek, design átadások és márkaanyagok továbbra is HEX-et használnak. Ez az átalakító bezárja a rést és megadja a hatjegyű kódot bármilyen tónus-telítettség-világosság kombinációhoz.

Hogyan működik a HSL → HEX átalakítás

  1. Alakítsd százalékból törté: a 60% legyen 0.6.
  2. Számítsd ki a kromát C = (1 − |2L − 1|) × S — ez mutatja, mennyire távol áll a szín a szürkétől.
  3. Használd a tónust (hue), hogy elhelyezd a kromát a vörös, zöld és kék csatornákon, majd eltolod mindhárom értéket L − C/2-vel.
  4. Szorzod meg mindhárom csatornát 255-tel, kerekítsd és írd le két hexadecimális számjegyként.

Példa a gyakorlatban

HSL hsl(204, 70%, 53%)=HEX #3398DB

A kerekítés egyszer történik, az utolsó lépésben, amikor minden csatornát egész 0–255 értékre kerekítünk. Az eredmény a legközelebbi HEX kód az HSL bemenethez, és általában megegyezik azzal, amit egy design eszköz mutat.

HSL és HEX magyarázata

Mi az a HSL?

A HSL a színt három részre bontja: hue (0–360° a színségen), saturation (mennyire színes, 0–100%) és lightness (mennyire világos, 0–100%). Mivel minden rész megfelel annak, ahogy az emberek a színt leírják, a HSL a legegyszerűbb formátum árnyalatok, tónusok és egységes paletták kézi vagy kód alapú létrehozásához.

Szin­taxis:
hsl(H, S%, L%)
Tartomány:
0–360°, 0–100%, 0–100%
Legjobb erre:
paletták, tónusok és árnyalatok, témázás

Mi az a HEX?

A HEX kód egy hat számjegyű hexadecimális szám, amely a szín vörös, zöld és kék csatornáját tárolja egy vezető # mögött. Minden kétjegyű pár egy csatornát fed le 00-tól (nincs) FF-ig (teljes), így ugyanazt a 16,7 millió színt adja, mint az RGB, jóval tömörebb jelölésben. A HEX alapértelmezett a CSS-ben, design eszközökben és márkaelvekben.

Szin­taxis:
#RRGGBB
Tartomány:
00–FF csatornánként
Legjobb erre:
CSS, design átadás, márkaelvek

HSL → HEX referencia táblázat

A leggyakoribb CSS-színek, átalakítva HSL-ról HEX-ra.

SzínHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

További színkonverterek

Gyakran ismételt kérdések

Alakítsd százalékból törté: a 60% legyen 0.6. Számítsd ki a kromát C = (1 − |2L − 1|) × S — ez mutatja, mennyire távol áll a szín a szürkétől. Használd a tónust (hue), hogy elhelyezd a kromát a vörös, zöld és kék csatornákon, majd eltolod mindhárom értéket L − C/2-vel. Szorzod meg mindhárom csatornát 255-tel, kerekítsd és írd le két hexadecimális számjegyként.

A kerekítés egyszer történik, az utolsó lépésben, amikor minden csatornát egész 0–255 értékre kerekítünk. Az eredmény a legközelebbi HEX kód az HSL bemenethez, és általában megegyezik azzal, amit egy design eszköz mutat.

A HEX kód egy hat számjegyű hexadecimális szám, amely a szín vörös, zöld és kék csatornáját tárolja egy vezető # mögött. Minden kétjegyű pár egy csatornát fed le 00-tól (nincs) FF-ig (teljes), így ugyanazt a 16,7 millió színt adja, mint az RGB, jóval tömörebb jelölésben. A HEX alapértelmezett a CSS-ben, design eszközökben és márkaelvekben.

Igen. A beviteli mező melletti csere gomb átvált a HEX → HSL konverterre, ami pontosan ugyanígy működik. Mindkét irány ugyanazt a képletet használja, csak fordítva alkalmazva.

Építsd a palettát HSL-ben, majd exportáld HEX-be. A paletta megőrzi a logikát — ugyanaz a tónus, lépcsőzött világosság — miközben a kapott kód a fejlesztők által elvárt formátumban marad.