Konwerter kolorów

Czym jest przelicznik kolorów?

Przelicznik kolorów tłumaczy wartości kolorów między różnymi modelami barw — HEX, RGB, HSL, HSV i CMYK. Projektanci i deweloperzy często muszą przełączać się między formatami: CSS używa HEX i RGB, narzędzia do projektowania często korzystają z HSL do intuicyjnego wyboru kolorów, a przepływy pracy drukarskiej wymagają CMYK. Narzędzie obsługuje wszystkie konwersje natychmiastowo.

Każdy model barw reprezentuje kolory inaczej. RGB (czerwony, zielony, niebieski) miesza światło — używany jest dla ekranów. CMYK (cyjan, magenta, żółty, czarny) miesza tusz — używany jest w druku. HSL (barwa, nasycenie, jasność) opisuje kolory tak, jak myślą o nich ludzie — czysty kolor, wyrazistość i jasność. HEX to po prostu RGB zapisany szesnastkowo.

Modele kolorów — wyjaśnienie

• HEX — sześciocyfrowy kod szesnastkowy (#FF5733). Zwięzły i powszechnie stosowany w tworzeniu stron internetowych.
• RGB — trzy wartości (0–255) dla czerwonego, zielonego i niebieskiego. Natywny model barw ekranów.
• HSL — barwa (0–360 stopni), nasycenie (0–100%) i jasność (0–100%). Intuicyjny do tworzenia palet kolorów.
• HSV/HSB — podobny do HSL, ale używa wartości/jasności zamiast lightness. Powszechny w narzędziach do projektowania graficznego.
• CMYK — cztery wartości (0–100%) dla cyjanowego, magenta, żółtego i czarnego. Stosowany w produkcji drukowanej.

Jak korzystać z tego narzędzia

Wpisz wartość koloru w dowolnym obsługiwanym formacie, a wszystkie inne reprezentacje zostaną obliczone natychmiast. Użyj próbnika kolorów do wizualnego wyboru. Narzędzie pokazuje podgląd próbki oraz przeliczone wartości w formatach HEX, RGB, HSL, HSV i CMYK, gotowe do skopiowania i wklejenia do kodu lub narzędzia projektowego.

Kolory w tworzeniu stron internetowych

CSS obsługuje wiele formatów kolorów: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) i nazwane kolory (tomato). Nowoczesny CSS obsługuje też oklch() i oklab() dla percepcyjnie jednolitych przestrzeni kolorów. Wybierając między formatami: HEX jest najbardziej zwięzły, HSL jest najłatwiejszy do programowego dostosowania (rozjaśnij, zwiększając L; odbarwij, zmniejszając S), a RGB jest najszerzej obsługiwany.

Najczęściej zadawane pytania

Dlaczego kolory wyglądają inaczej na ekranie i w druku?

Ekrany emitują światło (RGB, addytywne mieszanie kolorów), podczas gdy drukarki używają tuszu pochłaniającego światło (CMYK, subtraktywne mieszanie). Przestrzeń barw RGB (zakres możliwych kolorów) jest większa niż CMYK, więc niektóre żywe kolory ekranowe nie mogą być odtworzone w druku. Dlatego projektanci powinni pracować w CMYK przy tworzeniu materiałów drukowanych i używać kolorów Pantone do precyzyjnego dopasowania barw.

Jaka jest różnica między HSL a HSV?

Oba używają barwy i nasycenia, ale różnią się trzecim składnikiem. Jasność (lightness) w HSL waha się od 0 (czarny) przez 0,5 (czysty kolor) do 1 (biały). Wartość (value) w HSV waha się od 0 (czarny) do 1 (pełna jasność). W HSL nasycenie 100% przy jasności 50% daje najczystszy kolor. W HSV nasycenie 100% i wartość 100% daje najczystszy kolor. HSL jest generalnie bardziej intuicyjny do projektowania stron internetowych.