Próbnik kolorów HEX
Popularne presety
Wybierz kolor za pomocą wizualnego próbnika przeglądarki albo wpisz trzy- lub sześciocyfrową wartość HEX. Narzędzie obliczy RGB, HSL, przybliżone CMYK, luminancję względną oraz dokładny kontrast względem bieli i czerni. Kolor jest przetwarzany w tej przeglądarce i nie trafia do adresu URL kroków.
Jak wybrać kolor
-
1
Zacznij od próbki lub próbnika
Wybierz przykładowy kolor albo otwórz wbudowany próbnik kolorów przeglądarki.
-
2
Wpisz dokładną wartość HEX
Podaj trzy cyfry, na przykład #F60, albo sześć, jak #FF6600. Krótki zapis zostanie poprawnie rozwinięty.
-
3
Sprawdź obliczone formaty
Zobacz razem HEX, RGB, HSL, przybliżone CMYK i względną luminancję sRGB.
-
4
Sprawdź kontrast i skopiuj
Porównaj kolor z bielą i czernią, a następnie skopiuj potrzebny zapis HEX, RGB lub HSL.
Zapisy kolorów w praktyce
Każdy model koloru odpowiada na nieco inne pytanie.
Wykaz notacji
| Notacja | Składniki | Gdzie się jej używa |
|---|---|---|
| HEX | #RRGGBB | CSS, narzędzia projektowe, księgi marki |
| RGB | czerwony 0–255, zielony 0–255, niebieski 0–255 | CSS rgb(), edytory obrazów |
| HSL | barwa 0–360°, nasycenie %, jasność % | CSS hsl(), systemy projektowe |
| CMYK | cyjan %, magenta %, żółty %, key/czarny % | Druk, przygotowanie do druku |
Kontrast dostępności
WCAG 2.2 definiuje minimalne współczynniki kontrastu między tekstem a tłem:
- AA dla tekstu zwykłego: ≥ 4,5:1
- AA dla dużego tekstu (18 pt lub 14 pt pogrubiony): ≥ 3:1
- AAA dla tekstu zwykłego: ≥ 7:1
Próbnik wylicza współczynnik względem bieli i względem czerni w czasie rzeczywistym. Jeśli ważny jest niestandardowy kolor pierwszego planu, sprawdź każdą parę kolorów w dedykowanym testerze kontrastu.
Wskazówki
- HEX jest domyślny w większości narzędzi projektowych, ale skrócony trzyznakowy hex (
#F60) odpowiada#FF6600, a nie#F06060. - HSL jest wygodniejszy do budowania palet: zablokuj barwę i zmieniaj jasność, aby tworzyć jaśniejsze i ciemniejsze odmiany.
- CMYK i RGB nie dają się idealnie przeliczyć między sobą, druk CMYK zależy od profilu maszyny drukarskiej. Zawsze sprawdzaj próbę na prawdziwym papierze.
- Jeśli projektujesz dla nowoczesnego CSS, rozważ OKLCH, aby uzyskać percepcyjnie równomierne kroki jasności.
Najczęściej zadawane pytania
Photoshop stosuje profil koloru, zwykle sRGB dla ekranu i często inny profil dla druku. Przeglądarki renderują wartości HEX bez profilu jako sRGB. Jeśli dokument jest ustawiony na Adobe RGB lub ProPhoto, wartości pikseli są takie same, ale postrzegany kolor się zmienia.
Tak, oba zapisy oznaczają czystą czerwień: czerwony ma wartość 255, a zielony i niebieski 0. HEX to po prostu dwucyfrowy zapis szesnastkowy każdej wartości kanału od 0 do 255.
Wybierz kolor główny i skopiuj wartość HSL. W CSS lub programie graficznym zachowaj barwę i nasycenie, zmieniając jasność. Sprawdź osobno każdą parę koloru pierwszego planu i tła.
Bieżący kolor jest przechowywany do 30 minut w tej karcie przeglądarki na czas kroków prowadzących. Nie trafia do adresu URL ani przez Livewire. Ponowne rozpoczęcie, zamknięcie karty, usunięcie danych przeglądarki lub upływ czasu usuwa kolor.
Powiązane narzędzia
Konwerter ASCII na binarny
Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.
Konwerter binarnego na ósemkowy
Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.
Konwerter Base64 na Hex
Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.
Konwerter binarny na hex
Konwertuj wejście binarne na zwykłą wartość szesnastkową wielkimi literami. Znaki inne niż 0 i 1 są ignorowane, a zera wiodące nie są zachowywane.
Konwerter binarnego na ASCII
Wklej zapis binarny (bajty rozdzielone spacjami albo długi strumień bitów) i otrzymaj tekst ASCII, który reprezentuje. Obsługuje kodowania 7-bitowe i 8-bitowe.
Binarny na dziesiętny
Natychmiast konwertuj liczby binarne na dziesiętne. Pokazuje rozwinięcie pozycyjne, aby było widać, jak każdy bit dokłada się do wyniku.