W tym artykule
Formaty kolorów — wyjaśnienie
Kolory w projektowaniu cyfrowym i tworzeniu stron internetowych są reprezentowane w wielu formatach dostosowanych do różnych kontekstów. HEX (#ff5733) jest zwięzły i uniwersalny dla internetu. RGB (255, 87, 51) jest intuicyjny do mieszania kolorów. HSL (14°, 100%, 60%) jest najbardziej czytelny dla człowieka przy dostosowywaniu odcienia, nasycenia i jasności.
Różne narzędzia używają różnych formatów kolorów — oprogramowanie do projektowania często preferuje HSL, HTML/CSS używa HEX i RGB, biblioteki kolorów JavaScript mogą używać różnych formatów, a projektowanie druku używa CMYK. Dokładna konwersja między nimi wymaga wzorów matematycznych.
Jak działa konwersja kolorów
Konwerter stosuje precyzyjne transformacje matematyczne między przestrzeniami kolorów.
- Parsowanie HEX — dekoduje 3-cyfrowe i 6-cyfrowe kody szesnastkowe, z kanałem alfa lub bez
- Normalizacja RGB — obsługuje wartości całkowite 0-255 i reprezentacje zmiennoprzecinkowe 0-1
- Obliczanie HSL — konwertuje do/z odcienia (0-360°), nasycenia (0-100%) i jasności (0-100%)
Wypróbuj za darmo — bez rejestracji
Konwertuj kolor →Kiedy stosować konwersję kolorów
Konwersja kolorów jest potrzebna zawsze, gdy kolory przemieszczają się między różnymi narzędziami, formatami lub kontekstami.
- Projekt na kod — konwertuj wartości kolorów HSL z Figma/Sketch na HEX do implementacji CSS
- Spójność marki — weryfikuj, czy wartości kolorów są zgodne w różnych narzędziach projektowych i implementacjach kodu
- Dostępność — obliczaj współczynniki kontrastu (które używają względnej luminancji z wartości RGB) dla zgodności z WCAG
Najczęściej zadawane pytania
Jaka jest różnica między RGB a RGBA?
RGBA dodaje kanał alfa do RGB, reprezentujący przezroczystość od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty) lub 0-255 w niektórych kontekstach. Podobnie HEXA dodaje dwie cyfry szesnastkowe dla alfa (np. #FF5733FF dla całkowicie nieprzezroczystego lub #FF573380 dla 50% przezroczystości). Wartości alfa umożliwiają tworzenie kolorów przezroczystych i półprzezroczystych.
Dlaczego konwersja koloru i z powrotem nie zawsze zwraca dokładnie tę samą wartość?
Konwersja przestrzeni kolorów wymaga arytmetyki zmiennoprzecinkowej i zaokrąglania. Konwersje tam i z powrotem (RGB → HSL → RGB) mogą mieć małe błędy zaokrąglenia na ostatniej cyfrze. Jest to normalne, a różnica jest niezauważalna dla ludzkiego oka. W pracy wymagającej precyzji zawsze przechowuj kolory w jednym kanonicznym formacie.
Jaka jest różnica między HSL a HSV/HSB?
HSL (Odcień, Nasycenie, Jasność) i HSV/HSB (Odcień, Nasycenie, Wartość/Jasność) to różne cylindryczne modele kolorów. W HSL pełna biel to L=100% niezależnie od nasycenia; w HSV pełna biel to S=0%, V=100%. HSL jest bardziej intuicyjny dla projektowania stron internetowych; HSV jest powszechnie używany w kontrolkach UI selektora kolorów.