About Color | RGB, CMYK, HSL, Wheels & Gradients

Światło, oczy i dwa rodzaje mieszania

Kolor nie jest powłoką na przedmiocie. To światło plus mózg, który zamienia długości fal w czerwień, żółć albo niebieskozielony. Ekrany dodają światło (mieszanie addytywne): lampy czerwona, zielona i niebieska łączą się ku bieli. Druk i farba odejmują światło (mieszanie subtraktywne): tusze filtrują fale i mieszanie zmierza ku czerni. Dlatego neon na monitorze rzadko trafia w ten sam kolor na papierze.

Pryzmat barw to przezroczysty, trójkątny szklany obiekt, który rozszczepia białe światło na wszystkie kolory tęczy.

RGB: jak ekrany zliczają kolor

Piksel w telefonie albo laptopie to trzy maleńkie światła. Każdy kanał zwykle zapisuje się jako 0–255 (osiem bitów). (0, 0, 0) to czerń, (255, 255, 255) biel, (255, 0, 0) pełna czerwień. HEX to ta sama trójka dla sieci: #FF0000 to ta czerwień, #000000 to czerń. Projektanci wciąż mówią RGB, bo to emituje wyświetlacz.

CMYK: dlaczego wydruk wygląda inaczej

Drukarki kładą tusze cyjan, magenta, żółty i czarny (K). Nie emitują światła, tylko je chłoną, więc gama RGB ekranu jest większa niż większość maszyn CMYK. Nasycony elektryczny błękit na monitorze na papierze często blednie. Konwertuj do CMYK, zanim obiecasz kolor druku, i rób proof na docelowym podłożu. PictorX może pokazać liczby CMYK z wybranego koloru, byś zobaczył lukę; to nie zastępuje profilu maszyny.

Schemat porównujący addytywne mieszanie światła RGB z subtraktywnym mieszaniem tuszy CMYK

HSL i HSV: pokrętła projektanta

Odcień to pozycja na tęczy (0–360°). Nasycenie to czystość wobec szarości. Jasność (HSL) to bliskość bieli lub czerni; wartość/jasność (HSV) to bliskość czerni przy żywym odcieniu do końca. Projektanci lubią HSL i HSV, bo „trochę ciemniejszy, ten sam pomarańcz” to jeden suwak, a nie zgadywanie wśród trzech liczb RGB.

Kolory HEX i nazwane CSS

HEX (#RRGGBB, czasem #RGB albo #RRGGBBAA) to sieciowy skrót RGB. CSS ma też nazwane kolory — coral, steelblue, rebeccapurple — mapowane na stałe wartości HEX. Nazwy przydają się w szkicach; HEX (albo nowoczesna funkcja koloru CSS) to to, co wysyłasz, gdy marka musi trafić.

Koło kolorów i relacje

Koło kolorów układa odcienie w okrąg. Klasyczne relacje: kolory dopełniające leżą naprzeciw (niebieski i pomarańcz) i mocno kontrastują; analogiczne są sąsiadami i czują się spokrewnione; triada to trzy równe kroki i zostaje żywa; dopełnienie dzielone bierze odcień plus dwa obok jego przeciwieństwa — kontrast z mniejszym zgrzytem; monochromatyczny to jeden odcień w wielu jasnościach. Generator palet PictorX obecnie trzyma dopełniające, analogiczne i monochromatyczne. Koło i tak wyjaśnia resztę klasycznego zestawu, nawet gdy dane narzędzie nie oferuje każdej harmonii.

Koło kolorów w PictorX z początkowym odcieniem i powiązanymi próbkami

Gradienty: ścieżki między kolorami

Gradient to przejście wzdłuż ścieżki. Liniowy podróżuje w kierunku; promienisty rośnie od środka. Przystanki koloru przypinają dokładne barwy w pozycjach na tej ścieżce. Więcej przystanków to więcej kontroli, nie automatycznie więcej smaku. W CSS linear-gradient i radial-gradient to ta sama idea. Edytor gradientu PictorX pozwala przeciągać przystanki i kopiować CSS, HEX, RGB, HSL, HSV lub CMYK.

Edytor gradientu w PictorX z przystankami koloru wzdłuż przejścia

Kontrast, dostępność, ciepłe i zimne

Kontrast to odległość dwóch kolorów w jasności (i odcieniu). WCAG wymaga dość kontrastu, by tekst został czytelny: ok. 4,5:1 dla zwykłego tekstu i 3:1 dla dużego na poziomie AA. To podłoga, nie styl. Ciepłe odcienie (czerwienie, pomarańcze, żółcie) zdają się bliższe; zimne (błękity, zielenie, fiolety) się cofają. Używaj kontrastu do pisma i UI; ciepła i zimna do nastroju.

Narzędzia koloru w PictorX

Koło kolorów służy do wyboru odcienia i odczytu harmonii. Edytor gradientu — do przejść i CSS. Generator palet buduje, blokuje i tasuje zestawy — i potrafi wyciągnąć kolory ze zdjęcia. Transfer koloru przestylizowuje jeden obraz paletą drugiego, w przeglądarce. Efekty koloru pchają zdjęcie w tony i inne wyglądy. Nic z tego nie zastępuje maszyny ani spektrofotometru; to szybki sposób, by zobaczyć, jak kolor zachowuje się na zdjęciu.

Często zadawane pytania

Czym jest the difference between RGB and CMYK?

RGB to addytywne światło na ekranach (zwykle 0–255 na kanał). CMYK to subtraktywny tusz na papierze. Pokrywają różne zakresy, więc kolor ekranu często nie wydrukuje się dokładnie.

Co oznacza dopełniający na kole kolorów?

Dopełnienia leżą naprzeciw siebie. Razem mocno kontrastują. Generator palet PictorX potrafi zbudować zestaw dopełniający z koloru początkowego.

Dlaczego do designers use HSL instead of RGB?

Odcień, nasycenie i jasność odpowiadają temu, jak mówimy o kolorze. W HSL przyciemniasz pomarańcz bez przypadkowego zmieszania go w brąz, jak przy naiwnej korekcie RGB.

Jakiego kontrastu wymaga WCAG?

Dla AA ok. 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Sprawdzaj pismo na prawdziwym tle, nie samej próbce.

Powiązane narzędzia

Chcesz wypróbować?

Otwórz PictorX w swojej przeglądarce — do uruchomienia nie jest wymagana żadna instalacja ani karta kredytowa.

Wypróbuj koło kolorów