ImageColorPicker.com

Konwerter z HSL na HEX

Konwertuj dowolny kolor z HSL na HEX — natychmiast i za darmo

#3398DB

Wklej dowolną wartość koloru — wykryjemy format za ciebie.

H
S
L
Wynik HEX

Ten kolor we wszystkich formatach

Profil CMYK: Coated FOGRA39 (domyślny w Photoshopie dla Europy)

Wybieranie koloru w HSL jest wygodne, ale arkusze stylów, przekazy projektowe i dokumenty marki wciąż używają HEX. Ten konwerter wypełnia lukę i daje sześciocyfrowy kod dla dowolnej kombinacji odcienia, nasycenia i jasności.

Jak działa konwersja z HSL na HEX

  1. Zamień nasycenie i jasność na ułamki: 60% staje się 0.6.
  2. Oblicz chromę C = (1 − |2L − 1|) × S — to określa, jak daleko kolor jest od szarości.
  3. Użyj odcienia, aby rozmieścić tę chromę na kanałach czerwonym, zielonym i niebieskim, następnie przesuń wszystkie trzy o L − C/2.
  4. Pomnóż każdy kanał przez 255, zaokrąglij, a potem zapisz jako dwie cyfry szesnastkowe.

Przykład działania

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

Zaokrąglanie następuje jednorazowo, w ostatnim kroku, gdy każdy kanał jest dopasowywany do całkowitej wartości 0–255. Wynik to najbliższy kod HEX do podanego HSL i zazwyczaj identyczny z tym, co pokazuje narzędzie projektowe.

Wyjaśnienie HSL i HEX

Czym jest HSL?

HSL dzieli kolor na odcień (0–360° na kole barw), nasycenie (jak intensywny, 0–100%) i jasność (jak jasny, 0–100%). Ponieważ każdy element odpowiada temu, jak ludzie opisują kolor, HSL jest najłatwiejszym formatem do tworzenia tonów, cieni i spójnych palet — ręcznie lub w kodzie.

Składnia:
hsl(H, S%, L%)
Zakres:
0–360°, 0–100%, 0–100%
Najlepsze do:
palety, tony i cienie, theming

Czym jest HEX?

Kod HEX to sześciocyfrowa liczba szesnastkowa, która przechowuje kanały czerwony, zielony i niebieski koloru po znaku #. Każda para cyfr odpowiada jednemu kanałowi, od 00 (brak) do FF (pełny), co daje te same ~16,7 miliona kolorów co RGB, ale w krótszej notacji. HEX jest domyślny w CSS, narzędziach projektowych i wytycznych marki.

Składnia:
#RRGGBB
Zakres:
00–FF na kanał
Najlepsze do:
CSS, przekaz projektowy, wytyczne marki

Tabela odniesienia z HSL na HEX

Najczęściej używane kolory CSS, skonwertowane z HSL na HEX.

KolorHSLHEX
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

Więcej konwerterów kolorów

Najczęściej zadawane pytania

Zamień nasycenie i jasność na ułamki: 60% staje się 0.6. Oblicz chromę C = (1 − |2L − 1|) × S — to określa, jak daleko kolor jest od szarości. Użyj odcienia, aby rozmieścić tę chromę na kanałach czerwonym, zielonym i niebieskim, następnie przesuń wszystkie trzy o L − C/2. Pomnóż każdy kanał przez 255, zaokrąglij, a potem zapisz jako dwie cyfry szesnastkowe.

Zaokrąglanie następuje jednorazowo, w ostatnim kroku, gdy każdy kanał jest dopasowywany do całkowitej wartości 0–255. Wynik to najbliższy kod HEX do podanego HSL i zazwyczaj identyczny z tym, co pokazuje narzędzie projektowe.

Kod HEX to sześciocyfrowa liczba szesnastkowa, która przechowuje kanały czerwony, zielony i niebieski koloru po znaku #. Każda para cyfr odpowiada jednemu kanałowi, od 00 (brak) do FF (pełny), co daje te same ~16,7 miliona kolorów co RGB, ale w krótszej notacji. HEX jest domyślny w CSS, narzędziach projektowych i wytycznych marki.

Tak. Przyciski zamiany obok pola wejściowego przenoszą cię do konwertera HEX na HSL, który działa dokładnie tak samo. Obie strony używają tej samej formuły, tylko zastosowanej odwrotnie.

Buduj paletę w HSL, a następnie eksportuj do HEX. Paleta zachowuje logikę — ten sam odcień, schodkowana jasność — a kod, który oddajesz, jest w formacie, którego oczekują deweloperzy.