Konwerter RGB na szesnastkowy

Konwerter RGB na szesnastkowy błyskawicznie konwertuje wartości kolorów RGB (Red, Green, Blue) na kody szesnastkowe używane w projektowaniu stron internetowych, CSS i aplikacjach graficznych. Zapewnia wyjście w wielu formatach, w tym HSL, HSV i CMYK, wraz z fragmentami kodu CSS, paletami harmonii kolorów, sprawdzaniem kontrastu dostępności WCAG i dopasowaniem najbliższego nazwanego koloru.

Jak działa konwersja RGB na Hex

RGB (czerwony, zielony, niebieski) i Hex to dwie różne notacje dla tego samego addytywnego modelu kolorów używanego przez wyświetlacze elektroniczne. Każdy kanał koloru mieści się w zakresie od 0 do 255 w systemie dziesiętnym. Aby przekonwertować na Hex, każda wartość dziesiętna kanału jest wyrażana jako dwucyfrowa liczba szesnastkowa (podstawa 16), a trzy pary są łączone z prefiksem #.

Formuła konwersji

Dla każdej wartości kanału V (0–255):

1. Podziel V przez 16. Iloraz to pierwsza cyfra szesnastkowa, reszta to druga.
2. Przypisz cyfry 10–15 do liter A–F.
3. Połącz: #RRGGBB

Przykład: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (Pomarańczowy)

Objaśnienie formatów kolorów

HEX (Szesnastkowy)

Najpopularniejsza notacja kolorów w tworzeniu stron internetowych. Znak #, po którym następuje 6 cyfr szesnastkowych reprezentujących RR, GG, BB. Skrócona notacja (#RGB) jest dostępna, gdy każda para ma identyczne cyfry, np. #FF0000 → #F00.

HSL (Odcień, Nasycenie, Jasność)

Bardziej intuicyjny model dla projektantów. Odcień (Hue) to kąt na kole barw (0°–360°), Nasycenie (Saturation) to intensywność (0–100%), a Jasność (Lightness) obejmuje zakres od czerni (0%) przez czysty kolor (50%) do bieli (100%). HSL ułatwia tworzenie wariacji kolorystycznych poprzez regulację jednego parametru.

HSV / HSB (Odcień, Nasycenie, Wartość / Jasność)

Podobny do HSL, ale inaczej definiuje jasność. Wartość 100% oznacza, że kolor jest w swoim najjaśniejszym możliwym stanie dla danego odcienia i nasycenia. Ten model jest używany w wielu aplikacjach do projektowania graficznego, takich jak Photoshop i Figma.

CMYK (Cyjan, Magenta, Żółty, Czarny)

Subtraktywny model kolorów stosowany w druku. Podczas gdy ekrany dodają światło (RGB), drukarki mieszają tusze, które pochłaniają światło (CMYK). Konwersja na CMYK jest niezbędna podczas przygotowywania projektów cyfrowych do druku fizycznego, aby zapewnić dokładność kolorów.

Typy harmonii kolorów

Harmonie kolorów to kombinacje kolorów oparte na ich pozycjach na kole barw. To narzędzie generuje cztery typy:

• Dopełniające: Kolor znajdujący się bezpośrednio po przeciwnej stronie koła (oddalony o 180°). Tworzy maksymalny kontrast i efekt wizualny.
• Analogiczne: Kolory sąsiadujące na kole (±30°). Tworzy harmonijne, kojące projekty, często spotykane w naturze.
• Triada: Trzy kolory rozmieszczone równomiernie (co 120°). Oferuje żywy kontrast przy zachowaniu równowagi.
• Dopełniające dzielone: Dwa kolory sąsiadujące z kolorem dopełniającym (150° i 210°). Łagodniejsza alternatywa dla harmonii dopełniającej z większą różnorodnością.

Dostępność kontrastu WCAG

Wytyczne dotyczące dostępności treści internetowych (WCAG) definiują współczynniki kontrastu w celu zapewnienia czytelności:

Typowe konwersje RGB na Hex

Często zadawane pytania

Jak przekonwertować RGB na Hex?

Aby przekonwertować RGB na Hex, weź wartość każdego kanału koloru (0-255), podziel przez 16, aby uzyskać iloraz i resztę, a następnie przypisz je do cyfr szesnastkowych (0-9, A-F). Połącz wszystkie trzy 2-cyfrowe wartości szesnastkowe z prefiksem #. Na przykład RGB(255, 165, 0) staje się #FFA500: 255→FF, 165→A5, 0→00.

Jaka jest różnica między kodami kolorów RGB i Hex?

RGB i Hex reprezentują te same kolory przy użyciu innej notacji. RGB używa trzech liczb dziesiętnych (0-255) dla kanałów czerwonego, zielonego i niebieskiego, np. rgb(255, 0, 0). Hex używa znaku #, po którym następuje sześć cyfr szesnastkowych, np. #FF0000. Oba kodują identyczne informacje o kolorze — Hex to po prostu bardziej zwarta reprezentacja tych samych wartości RGB w systemie szesnastkowym.

Jakiego modelu kolorów używa Hex?

Kody kolorów Hex wykorzystują addytywny model kolorów RGB (Red, Green, Blue), ten sam, który jest używany przez wyświetlacze komputerowe. Sześć cyfr szesnastkowych reprezentuje trzy pary: dwie pierwsze dla czerwonego, środkowe dwie dla zielonego i ostatnie dwie dla niebieskiego. Każda para mieści się w zakresie od 00 (brak intensywności) do FF (maksymalna intensywność 255).

Co to jest współczynnik kontrastu WCAG?

Współczynnik kontrastu WCAG mierzy różnicę luminancji między dwoma kolorami i jest używany do zapewnienia czytelności tekstu dla osób z wadami wzroku. Współczynnik mieści się w zakresie od 1:1 (brak kontrastu) do 21:1 (maksymalny). WCAG 2.0 wymaga co najmniej 4.5:1 dla normalnego tekstu (poziom AA), 3:1 dla dużego tekstu (AA Large) i 7:1 dla zwiększonego kontrastu (poziom AAA).

Jak przekonwertować RGB na HSL?

Aby przekonwertować RGB na HSL: znormalizuj R,G,B do 0-1, znajdź wartości maksymalne i minimalne, oblicz jasność jako (max+min)/2, nasycenie zależy od jasności, a odcień jest obliczany na podstawie tego, który kanał dominuje (0° dla czerwonego, 120° dla zielonego, 240° dla niebieskiego), skorygowany o różnicę między kanałami.

Co to jest CMYK i kiedy należy go używać?

CMYK oznacza Cyan, Magenta, Yellow i Key (czarny). Jest to subtraktywny model kolorów stosowany w druku. Podczas gdy RGB/Hex są używane dla ekranów (addytywne mieszanie światła), CMYK jest niezbędny w projektowaniu do druku, ponieważ drukarki mieszają tusz, a nie światło. Konwersja RGB na CMYK pomaga upewnić się, że kolory cyfrowe zostaną poprawnie odwzorowane na materiałach drukowanych.

Dodatkowe zasoby

• Wytyczne dotyczące kontrastu WCAG 2.1