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
- 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.
Przykład działania
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.
| Kolor | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |