Próbnik kolorów

Jak korzystać z próbnika kolorów

1. Kliknij próbkę pod napisem Wybierz kolor, aby otworzyć próbnik kolorów przeglądarki, i wybierz kolor. Możesz też wpisać lub wkleić wartość w polu Kod koloru: kod HEX, np. #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) albo nazwę CSS, np. tomato.
2. Duży podgląd aktualizuje się natychmiast, a kod HEX jest zapisany czernią lub bielą – tym kolorem, który jest lepiej czytelny na danym tle.
3. W sekcji Kody koloru skopiuj potrzebny format przyciskiem Kopiuj obok niego: HEX, RGB, HSL, HSV lub CMYK.
4. Kliknij Losowy kolor, gdy szukasz inspiracji, albo Pobierz z ekranu (w przeglądarkach, które to obsługują, np. Chrome i Edge), aby pobrać kolor dowolnego piksela na ekranie, także z innych okien.

Wszystko dzieje się w twojej przeglądarce: żaden kolor ani obraz nie jest nigdzie wysyłany.

Co oznacza każdy kod koloru

• HEX to sześcioznakowy zapis szesnastkowy używany w HTML i CSS. Każda para znaków to jeden kanał (czerwony, zielony, niebieski) od 00 do FF, więc #1E90FF oznacza czerwony 30, zielony 144, niebieski 255.
• RGB podaje te same trzy kanały jako liczby dziesiętne od 0 do 255. Tego oczekuje większość programów graficznych i bibliotek programistycznych.
• HSL opisuje kolor przez odcień (kąt od 0° do 360° na kole barw), nasycenie i jasność. Ułatwia rozjaśnianie lub przyciemnianie koloru zmianą jednej liczby.
• HSV (zwany też HSB) używa odcienia, nasycenia i wartości (jasności). Na tym modelu opierają się kwadraty wyboru koloru w Photoshopie, Figmie i wielu innych edytorach.
• CMYK wyraża kolor jako procent farb: cyjan, magenta, żółty i czarny.

Wartości CMYK

Kody CMYK to uproszczona konwersja: K = 1 − max(R, G, B), następnie C = (1 − R − K) / (1 − K), analogicznie dla M i Y. To standardowy wzór podręcznikowy, ale nie korzysta z profilu ICC. Rzeczywisty druk zależy od maszyny, papieru i farb, więc drukarnia przeliczy twoje kolory własnym profilem, a wynik może się różnić. Traktuj te liczby jako punkt wyjścia, a nie jako proof do druku.

Jak czytać współczynniki kontrastu

Pod kodem HEX podgląd pokazuje Kontrast na bieli i Kontrast na czerni, obliczone wzorem luminancji względnej WCAG 2. Dla zwykłego tekstu na poziomie AA potrzebny jest współczynnik co najmniej 4,5:1, a dla dużego tekstu i elementów interfejsu – 3:1. Jeśli twój kolor osiąga na bieli tylko 3:1, używaj go do dużych nagłówków lub ikon, a do tekstu wybierz ciemniejszy odcień.

Wskazówki

• Kody HEX możesz wklejać bez znaku #: 1e90ff też zadziała, podobnie jak formy skrócone, np. f60.
• Wartości z przezroczystością, np. rgb(0 0 0 / 50%), są akceptowane; próbnik pokazuje kolor nieprzezroczysty.
• Systemowe okno wyboru koloru wygląda różnie w zależności od systemu. Jeśli potrzebujesz precyzyjnej wartości, wpisanie jej w polu Kod koloru zawsze daje dokładny wynik.