Narzędzie Wyboru Koloru - Konwersja kodów kolorów RGB, Hex, CMYK i HSV

Czym jest selektor kolorów?

Selektor kolorów to narzędzie do wybierania koloru i odczytywania jego wartości w różnych formatach kolorów. Ten selektor pokazuje jednocześnie kolor w formatach RGB (czerwony, zielony, niebieski), szesnastkowym, CMYK (cyjan, magenta, żółty, czarny) oraz HSV (odcień, nasycenie, wartość). Zmiana dowolnego formatu natychmiast aktualizuje pozostałe.

Jak używać selektora kolorów

Kolor można wybrać na trzy sposoby.

Kliknij dowolne miejsce w polu widma, aby wybrać odcień i nasycenie. Położenie w poziomie określa odcień (czyli rodzinę kolorów, na przykład czerwony lub niebieski). Położenie w pionie określa nasycenie (czyli to, jak intensywny lub wyblakły wydaje się kolor). Suwak poniżej widma steruje jasnością — od czerni po lewej stronie do pełnej jasności po prawej.

Można też wpisać dokładne wartości. Pole szesnastkowe przyjmuje kody takie jak #2ECC71, z # lub bez niego. Każde pole RGB przyjmuje liczbę całkowitą od 0 do 255. Każde pole CMYK przyjmuje liczbę całkowitą od 0 do 100. Wartość wpisana powyżej dozwolonego zakresu zostaje ograniczona do wartości maksymalnej.

Obok każdego formatu koloru znajduje się przycisk kopiowania. Kliknięcie go kopiuje tę wartość do schowka i wyświetla krótki komunikat „Skopiowano!”.

Wyjaśnienie modeli kolorów

RGB

RGB opisuje kolor jako połączenie światła czerwonego, zielonego i niebieskiego — tych samych trzech barw, których ekran używa do utworzenia każdego piksela. Każdy kanał ma zakres od 0 do 255. RGB(255, 0, 0) oznacza czystą czerwień, a RGB(0, 0, 0) oznacza czerń. Przeglądarki, aplikacje i oprogramowanie wideo używają RGB, ponieważ odpowiada on sposobowi działania ekranów.

Kolor szesnastkowy

Kod szesnastkowy zapisuje kolor RGB w systemie o podstawie 16 zamiast systemu o podstawie 10. #2ECC71 składa się z trzech par znaków: 2E oznacza czerwień, CC zieleń, a 71 niebieski. Każda para ma zakres od 00 do FF. Kody szesnastkowe są często używane w projektowaniu stron internetowych, ponieważ CSS przyjmuje je bezpośrednio i są krótsze do wpisania niż rgb(). Istnieje także skrócony zapis trzyznakowy: #0F0 oznacza to samo co #00FF00.

CMYK

Model CMYK służy do druku. Drukarka tworzy kolor, nakładając na białym papierze warstwy tuszu w kolorach cyjan, magenta, żółtym i czarnym, więc działa przez odejmowanie światła, a nie jego dodawanie. Każdy kanał jest wartością procentową od 0 do 100. CMYK(0, 0, 0, 0) oznacza całkowity brak tuszu, dzięki czemu widoczny pozostaje biały papier. CMYK nie potrafi odtworzyć każdego koloru wyświetlanego przez ekran; niektóre jasne kolory ekranowe, zwłaszcza pewne odcienie niebieskiego i zielonego, po wydrukowaniu wyglądają bardziej matowo.

HSV

Model HSV opisuje osobno odcień, nasycenie i wartość. Odcień oznacza rodzinę kolorów i jest podawany w stopniach od 0° do 360°, przy czym 0° oznacza czerwień, 120° zieleń, a 240° niebieski. Nasycenie określa intensywność koloru i ma zakres od 0% (szarość) do 100% (kolor w pełni nasycony). Wartość określa jasność i ma zakres od 0% (czerń) do 100% (pełna jasność). HSV jest zbliżony do naturalnego sposobu opisywania kolorów, dlatego na nim opierają się widmo i suwak jasności w tym narzędziu.

Wzór konwersji RGB na zapis szesnastkowy

Każdy kanał RGB, będący liczbą od 0 do 255, jest przekształcany w dwucyfrową liczbę szesnastkową, a następnie trzy pary są łączone z poprzedzającym je znakiem #.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Wzór konwersji RGB na CMYK

Najpierw każdy kanał RGB jest przeskalowywany do ułamka z zakresu od 0 do 1. Czerń (K) wyznacza się na podstawie największego kanału. Następnie cyjan, magentę i żółty oblicza się z pozostałych kanałów oraz K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Gdy K jest równe 1 (kolor jest czystą czernią), wartości C, M i Y ustawia się na 0, aby uniknąć dzielenia przez zero.

Wzór konwersji RGB na HSV

Najpierw wartości RGB są przeskalowywane do ułamków z zakresu od 0 do 1. Niech $C_{max}$ oznacza największą z trzech wartości, $C_{min}$ najmniejszą, a $\Delta$ różnicę między nimi.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ w przeciwnym razie } \frac{\Delta}{C_{max}}\times 100\%$

Odcień zależy od tego, który kanał ma największą wartość:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Przykład obliczeń Zacznijmy od RGB(46, 204, 113), czyli odcienia zieleni. **Szesnastkowo:** 46 w zapisie szesnastkowym to `2E`, 204 to `CC`, a 113 to `71`, co daje `#2ECC71`. **CMYK:** Po przeskalowaniu R′ = 0,180, G′ = 0,800, B′ = 0,443. Największa jest wartość G′, więc K = 1 − 0,800 = 0,20, co oznacza 20% czerni. Następnie C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0%, a Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Wynik to CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (zieleń), $C_{min}$ = 0,180, więc Δ = 0,620. Wartość = 80%. Nasycenie = 0,620 / 0,800 × 100 ≈ 77%. Ponieważ największa jest wartość zielonego, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Wynik to HSV(145°, 77%, 80%). ## Ułatwianie wyboru kolorów Około 1 na 12 mężczyzn i około 1 na 200 kobiet ma pewną formę zaburzeń widzenia barw, najczęściej zmniejszoną zdolność odróżniania czerwieni od zieleni. Projekt opierający znaczenie wyłącznie na kolorze, na przykład czerwony komunikat o błędzie bez ikony ani etykiety, nie będzie działać dla tych użytkowników. Dodanie obok koloru etykiety tekstowej, ikony lub wzoru rozwiązuje ten problem. Tekst również musi mieć wystarczający kontrast względem tła. Wytyczne dotyczące dostępności treści internetowych (WCAG) zalecają współczynnik kontrastu wynoszący co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Do jego zmierzenia potrzebne jest osobne narzędzie do sprawdzania kontrastu, ponieważ ten próbnik sam nie oblicza współczynników kontrastu. ## Najczęściej zadawane pytania **Jaka jest różnica między RGB a CMYK?** RGB służy do ekranów i tworzy kolory przez dodawanie światła czerwonego, zielonego i niebieskiego. CMYK służy do druku i tworzy kolory przez nakładanie tuszu na papier, co zamiast tego odejmuje światło. RGB może tworzyć jaśniejsze kolory niż CMYK, ponieważ tusz nie jest w stanie odwzorować zakresu kolorów emitowanych przez ekran. **Dlaczego kolory na wydruku wyglądają inaczej niż na ekranie?** Ekran emituje światło bezpośrednio, a zadrukowana strona jedynie odbija padające na nią światło. Tusz CMYK obejmuje także mniejszy zakres kolorów niż światło RGB, dlatego niektórych jasnych kolorów ekranowych nie można dokładnie odtworzyć na papierze. **Co oznacza symbol # w kodzie szesnastkowym?** Oznacza, że następujące po nim znaki tworzą szesnastkowy kod koloru. Jest to konwencja wywodząca się z początków HTML i CSS. Bez tego znaku przeglądarka nie rozpozna wartości jako koloru. **Dlaczego niektóre kody szesnastkowe mają tylko trzy znaki?** Kod złożony z trzech znaków jest skróconą wersją kodu złożonego z sześciu znaków, w którym każda para powtarza tę samą cyfrę. `#0F0` rozwija się do `#00FF00`. **Czy konwersje między formatami są dokładne?** Konwersja RGB na zapis szesnastkowy jest dokładna, ponieważ są to te same liczby zapisane w innej podstawie. Konwersja RGB na CMYK jest przybliżeniem, ponieważ zachodzi między światłem a tuszem, czyli odmiennymi procesami fizycznymi o różnych zakresach kolorów. **Czy to narzędzie może wybrać kolor bezpośrednio z obrazu lub strony internetowej?** Nie. Rozszerzenie przeglądarki lub wbudowany w system operacyjny selektor kolorów, taki jak Digital Color Meter w systemie macOS, może odczytać kolor z ekranu. Otrzymaną wartość można następnie wpisać do tego narzędzia w celu jej konwersji.