Konwerter kolorów

Wybierz lub wpisz kolor

Próbnik:

Obsługiwane formaty wejściowe:

HEX (#abc lub #aabbcc), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%))

Podgląd koloru

Teal

Jasność: 53%

Formaty kolorów

HEX (Heksadecymalny)

RGB (Red, Green, Blue)

R: 20

G: 184

B: 166

HSL (Hue, Saturation, Lightness)

H: 173°

S: 80%

L: 40%

CMYK (Cyan, Magenta, Yellow, Key)

C: 89%

M: 0%

Y: 10%

K: 28%

Skopiowano do schowka!

Umieść to narzędzie u siebie: pobierz kod

Konwerter kolorów to wszechstronne narzędzie online umożliwiające błyskawiczną konwersję między najpopularniejszymi formatami kolorów: HEX, RGB, HSL i CMYK. Niezastąpione dla web developerów, grafików, projektantów stron internetowych i każdego, kto pracuje z kolorami w projektach cyfrowych. Podgląd na żywo, próbnik kolorów i kopiowanie wartości jednym kliknięciem.

Czym są formaty kolorów?

W świecie cyfrowym kolory są reprezentowane za pomocą różnych systemów liczbowych i notacji. Każdy format ma swoje unikalne zastosowania i zalety w zależności od kontekstu użycia - od projektowania stron internetowych, przez grafikę komputerową, aż po druk profesjonalny.

Cztery główne formaty kolorów używane w projektowaniu cyfrowym to HEX (heksadecymalny), RGB (czerwony-zielony-niebieski), HSL (odcień-nasycenie-jasność) oraz CMYK (cyjan-magenta-żółty-czarny). Każdy z tych formatów opisuje ten sam kolor, ale w inny sposób, dostosowany do specyficznych potrzeb technologicznych.

Format HEX (Heksadecymalny)

Format HEX to najpopularniejszy sposób reprezentacji kolorów w web developmencie. Składa się z znakuHash (#) oraz sześciu cyfr heksadecymalnych (0-9, A-F), które reprezentują wartości czerwieni, zieleni i niebieskiego w kolejności RRGGBB.

Jak działa format HEX?

Przykład: #14b8a6

14 → R: 20

b8 → G: 184

a6 → B: 166

Każda para cyfr heksadecymalnych reprezentuje wartość od 0 do 255 (00 do FF w systemie szesnastkowym). Pierwsza para to czerwień, druga to zieleń, trzecia to niebieski. Format HEX jest standardem w CSS, HTML i większości narzędzi graficznych.

Skrócona notacja HEX

Kolory HEX można zapisać w skróconej formie z trzema cyframi zamiast sześciu, jeśli każda para cyfr się powtarza. Na przykład:

#f0a = #ff00aa

#fff = #ffffff (biały)

#000 = #000000 (czarny)

Format RGB (Red, Green, Blue)

Format RGB opisuje kolor przez intensywność trzech podstawowych kolorów światła: czerwonego (Red), zielonego (Green) i niebieskiego (Blue). Każdy kanał ma wartość od 0 do 255, gdzie 0 oznacza brak koloru, a 255 maksymalną intensywność.

System addytywny RGB

RGB to system addytywny, co oznacza że kolory są tworzone przez dodawanie światła. Jest to naturalny sposób działania ekranów komputerowych, telewizorów i smartfonów, które emitują światło.

Czerwony (R)

rgb(255, 0, 0)

Zielony (G)

rgb(0, 255, 0)

Niebieski (B)

rgb(0, 0, 255)

Połączenie wszystkich trzech kanałów w maksymalnej intensywności (255, 255, 255) daje kolor biały, podczas gdy brak wszystkich kolorów (0, 0, 0) daje czerń.

Format HSL (Hue, Saturation, Lightness)

Format HSL opisuje kolor w sposób bardziej intuicyjny dla człowieka - przez odcień (Hue), nasycenie (Saturation) i jasność (Lightness). Ten format jest szczególnie wygodny przy tworzeniu wariantów tego samego koloru lub palet kolorystycznych.

Hue (Odcień) - 0° do 360°

Odcień określa pozycję koloru na kole barw. Wartości reprezentują stopnie na kole: 0° to czerwony, 120° to zielony, 240° to niebieski, a 360° wraca do czerwonego.

0° = Czerwony 120° = Zielony 240° = Niebieski 300° = Magenta

Saturation (Nasycenie) - 0% do 100%

Nasycenie określa intensywność koloru. 0% to całkowity brak nasycenia (odcienie szarości), a 100% to pełne, żywe nasycenie koloru.

Lightness (Jasność) - 0% do 100%

Jasność określa ilość światła w kolorze. 0% to zawsze czarny, 50% to czysty kolor, a 100% to zawsze biały, niezależnie od odcienia i nasycenia.

Format CMYK (Cyan, Magenta, Yellow, Key)

Format CMYK to substraktywny model kolorów używany przede wszystkim w druku profesjonalnym. W przeciwieństwie do RGB, gdzie kolory powstają przez dodawanie światła, CMYK działa przez odejmowanie (absorpcję) światła przez farby drukarskie.

Składniki CMYK

Cyan (C) - Cyjan

Niebieskozielony, przeciwieństwo czerwieni. Im wyższa wartość, tym więcej farby cyjanowej.

Magenta (M) - Magenta

Purpurowy, przeciwieństwo zieleni. Podstawowy składnik farb drukarskich.

Yellow (Y) - Żółty

Przeciwieństwo niebieskiego. Razem z cyjanem i magentą tworzy pełną paletę.

Key (K) - Czarny

Czerń dodawana dla lepszej głębi i oszczędności farb kolorowych w druku.

Wartości CMYK są podawane w procentach od 0% do 100%. Na przykład cmyk(89%, 0%, 10%, 28%) oznacza 89% cyjanu, 0% magenty, 10% żółtego i 28% czerni.

Uwaga: RGB vs CMYK w druku

Należy pamiętać, że konwersja z RGB do CMYK jest przybliżona i może powodować niewielkie różnice w odcieniu koloru. RGB ma szerszą gamę kolorów niż CMYK, dlatego niektóre żywe kolory ekranowe mogą wyglądać inaczej po wydrukowaniu.

Jeśli projektujesz materiały do druku profesjonalnego, zawsze skonsultuj się z drukarnią i używaj profili kolorów ICC dla dokładnego odwzorowania.

Zastosowania konwertera kolorów

Web Development

Konwersja kolorów między HEX i RGB do CSS. Szybkie dopasowywanie kolorów z designu graficznego do kodu HTML/CSS. Sprawdzanie wartości RGB dla funkcji rgba() z przezroczystością.

Projektowanie UI/UX

Tworzenie spójnych palet kolorów poprzez modyfikację wartości HSL. Kontrola jasności i nasycenia dla wariantów tego samego koloru. Dostosowywanie kolorów do wytycznych projektowych.

Grafika komputerowa

Przenoszenie kolorów między różnymi programami graficznymi. Dopasowywanie kolorów z różnych źródeł. Weryfikacja wartości RGB dla precyzyjnej edycji zdjęć.

Druk i poligrafia

Konwersja kolorów ekranowych RGB do formatu drukarskiego CMYK. Przygotowanie projektów do druku offsetowego. Sprawdzanie wartości CMYK przed wysyłką do drukarni.

Branding i marketing

Konsekwentne używanie kolorów marki we wszystkich mediach. Dokumentacja kolorów firmowych w różnych formatach. Przekazywanie specyfikacji kolorów agencjom i podwykonawcom.

Programowanie

Konwersja kolorów w różnych językach programowania i frameworkach. Obliczanie wartości RGB dla algorytmów przetwarzania obrazu. Debugging kolorów w aplikacjach i grach.

Praktyczne wskazówki

Wybór formatu dla CSS

W CSS możesz używać zarówno HEX jak i RGB/HSL. HEX jest krótszy i bardziej popularny dla stałych kolorów. RGB i HSL pozwalają na łatwe dodanie przezroczystości przez rgba() i hsla().

/* Stały kolor */

background: #14b8a6;

/* Z przezroczystością */

background: rgba(20, 184, 166, 0.5);

Tworzenie wariantów koloru z HSL

Format HSL jest idealny do tworzenia jaśniejszych i ciemniejszych wersji tego samego koloru. Wystarczy zmienić wartość Lightness, zachowując Hue i Saturation.

hsl(173, 80%, 20%) /* Ciemny */ hsl(173, 80%, 40%) /* Bazowy */ hsl(173, 80%, 60%) /* Jasny */

CMYK w projektach do druku

Konwersja RGB → CMYK w naszym kalkulatorze jest przybliżona. Dla profesjonalnego druku:

Używaj profili kolorów ICC dostarczonych przez drukarnię
Projektuj bezpośrednio w CMYK w programach Adobe (Illustrator, InDesign)
Zamów proof kolorystyczny przed finalnym drukiem
Unikaj czystej czerni (K:100%) - używaj "rich black" (C:60%, M:40%, Y:40%, K:100%)

Dostępność i kontrast

Podczas wybierania kolorów tekstu i tła, pamiętaj o kontraście według wytycznych WCAG. Jasność koloru w HSL może pomóc w szybkim określeniu, czy kolor będzie odpowiednio kontrastować. Generalnie ciemny tekst wymaga tła o jasności powyżej 70%, a jasny tekst - tła poniżej 40%.

Często zadawane pytania

Jaka jest różnica między HEX a RGB?

HEX i RGB to dwa różne sposoby zapisywania tego samego koloru. HEX używa notacji heksadecymalnej z prefiksem # (np. #14b8a6), podczas gdy RGB używa wartości dziesiętnych od 0 do 255 dla każdego kanału (np. rgb(20, 184, 166)). Oba formaty są równoważne i szeroko stosowane w CSS - HEX jest krótszy, ale RGB pozwala łatwiej dodać przezroczystość przez rgba().

Kiedy używać HSL zamiast RGB?

HSL jest bardziej intuicyjny przy tworzeniu wariantów koloru i palet kolorystycznych. Jeśli chcesz stworzyć jaśniejszą lub ciemniejszą wersję koloru, wystarczy zmienić wartość Lightness w HSL, zachowując Hue i Saturation. W RGB musiałbyś proporcjonalnie zmieniać wszystkie trzy wartości. HSL sprawdza się również przy animacjach CSS, gdzie chcesz płynnie przechodzić między odcieniami na kole barw.

Czy konwersja RGB do CMYK jest dokładna?

Konwersja RGB do CMYK w naszym kalkulatorze jest matematyczna i przybliżona. W rzeczywistości RGB (addytywny, dla ekranów) ma szerszą gamę kolorów niż CMYK (substraktywny, dla druku), więc niektóre żywe kolory RGB nie mają dokładnego odpowiednika w CMYK. Dla profesjonalnego druku zawsze używaj profili kolorów ICC dostarczonych przez drukarnię i projektuj bezpośrednio w CMYK w programach Adobe. Nasz kalkulator służy do wstępnych konwersji i edukacji.

Jak skopiować wartość koloru?

Kliknij przycisk "Kopiuj" przy wybranym formacie (HEX, RGB, HSL lub CMYK), a wartość zostanie automatycznie skopiowana do schowka. Możesz też kliknąć bezpośrednio na wartość i użyć Ctrl+C (Windows) lub Cmd+C (Mac). Skopiowana wartość jest gotowa do wklejenia do CSS, kodu lub programu graficznego.

Dodatkowo możesz użyć próbnika kolorów (color picker) aby wizualnie wybrać kolor, lub wpisać wartość w dowolnym z obsługiwanych formatów w polu tekstowym - kalkulator automatycznie rozpozna format i wykona konwersję.

Co to jest jasność koloru (brightness)?

Jasność koloru (brightness lub luminance) określa, jak jasny lub ciemny jest kolor w skali od 0% (całkowicie czarny) do 100% (całkowicie biały). Nasz kalkulator oblicza jasność używając formuły percepcyjnej, która uwzględnia, że ludzkie oko jest bardziej wrażliwe na zieleń niż na inne kolory. Jasność jest szczególnie ważna przy sprawdzaniu kontrastu między tekstem a tłem - dla dobrej czytelności różnica jasności powinna wynosić co najmniej 50%.

Czy mogę używać skróconej notacji HEX?

Tak, nasz konwerter obsługuje zarówno pełną 6-cyfrową notację HEX (#rrggbb), jak i skróconą 3-cyfrową (#rgb). Skrócona notacja działa gdy każda para cyfr się powtarza - na przykład #f0a to skrót od #ff00aa. Możesz wpisać kolor w dowolnej z tych form, a kalkulator automatycznie wykona konwersję. Pamiętaj jednak, że w wyniku zawsze pokazujemy pełną 6-cyfrową formę dla większej precyzji i zgodności.

Podsumowanie

Konwerter kolorów to niezbędne narzędzie dla każdego web developera, grafika i projektanta pracującego z kolorami cyfrowymi. Dzięki prostemu interfejsowi możesz błyskawicznie konwertować między formatami HEX, RGB, HSL i CMYK, podglądać kolory na żywo i kopiować wartości jednym kliknięciem.

Narzędzie obsługuje wszystkie popularne formaty wejściowe i automatycznie rozpoznaje składnię, eliminując potrzebę ręcznych obliczeń. Idealnie sprawdza się przy przenoszeniu kolorów z designu do kodu CSS, tworzeniu wariantów kolorów dla motywów ciemnych i jasnych, czy przygotowywaniu materiałów do druku.

Pamiętaj, że wybór formatu zależy od kontekstu - HEX dla zwięzłości w CSS, RGB dla kompatybilności z przezroczystością, HSL dla intuicyjnego tworzenia palet, a CMYK dla przygotowania do druku profesjonalnego. Wykorzystaj nasz konwerter aby zaoszczędzić czas i uniknąć błędów w codziennej pracy z kolorami!