Softonic

Próbnik kolorów HEX

Krok 1 / 4 Hex color

Projektanci i programiści żonglują tym samym kolorem w czterech notacjach setki razy dziennie. Kliknij gdziekolwiek w polu 2D nasycenia/wartości, przeciągnij suwak barwy albo wklej wartość, a ten próbnik pokaże HEX, RGB, HSL, HSV i CMYK obok siebie — z testami kontrastu WCAG względem czerni i bieli, więc od razu wiesz, czy kolor jest czytelny.

Jak wybrać kolor

  1. 1

    Wybierz barwę

    Przeciągnij pionowy suwak barwy przez całe spektrum 0-360°.

  2. 2

    Wybierz nasycenie i wartość

    Kliknij lub przeciągnij wewnątrz kwadratu 2D, aby ustawić, jak żywy i jak jasny jest kolor.

  3. 3

    Dostrój za pomocą pól

    Wpisz dokładne wartości w HEX, RGB, HSL, HSV lub CMYK — wszystkie pięć pól pozostaje zsynchronizowanych.

  4. 4

    Sprawdź dostępność i skopiuj

    Współczynniki kontrastu względem czerni i bieli pojawiają się obok; jedno kliknięcie kopiuje potrzebną notację.

Notacje 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
HSV/HSB barwa 0-360°, nasycenie %, wartość/jasność % Próbniki Photoshop, Figma
CMYK cyjan %, magenta %, żółty %, czarny/key % Druk, przygotowanie do druku
OKLCH jasność %, chroma, barwa Nowoczesne palety CSS Color Module 4

Kontrast dostępności

WCAG 2.2 definiuje minimalne współczynniki kontrastu między tekstem a tłem:

Próbnik wylicza współczynnik względem bieli i względem czerni w czasie rzeczywistym. Jeśli krytyczny jest niestandardowy kolor pierwszego planu, użyj dedykowanego testera kontrastu dla każdej pary.

Wskazówki

Najczęściej zadawane pytania

Photoshop stosuje profil koloru (zwykle sRGB dla ekranu, często inny dla druku). Przeglądarki renderują nieoznaczony HEX jako sRGB. Jeśli dokument jest ustawiony na Adobe RGB lub ProPhoto, wartości pikseli są te same, ale postrzegany kolor się przesuwa.

Tak — oba opisują pełną czerwień, z czerwonym na 255 oraz zielonym i niebieskim na 0. HEX to po prostu dwucyfrowa notacja szesnastkowa dla każdej wartości kanału 0-255.

Wybierz kolor podstawowy, przełącz na HSL, a potem zmieniaj jasność w krokach co 10%, trzymając barwę i nasycenie zablokowane. Otrzymasz spójną drabinkę tintów i odcieni leżących na tej samej barwie.

Ostatnio używane kolory są przechowywane w pamięci lokalnej przeglądarki, więc przetrwają odświeżenie. Nic nie jest wysyłane na serwer, a historię palety możesz wyczyścić w dowolnej chwili.

Powiązane narzędzia

Generator palet kolorów

Stwórz harmonijczną paletę kolorów składającą się z 4–8 barw na podstawie koloru bazowego, wykorzystując schematy komplementarnych, analogicznych, triadycznych oraz rozdzielonych komplementów.

Generator losowych wartości

Utwórz losowy kolor RGB, zobacz wartości heksadowe, HSL i RGB oraz skopiuj dowolny format jednym kliknięciem.

Generator losowej palety kolorów

Utwórz paletry z pięcioma kolorami oparte na losowym podstawowym odcieniu, zawierające ich komplementarne, analogiczne oraz triadyczne warianty.

Rozwiązanie JSON

Wymyśl format i estetyczny wygląd pliku JSON z regulowalnym wyciągnięciem, uporządkowanymi kluczami oraz wewnętrzną walidacją, która podkreśla błędy dokładnie w odpowiedniej pozycji.

Generator losowych liter

Generuj losowe litery z alfabetu angielskiego. Wybierz wielkość liter, dopuść powtórzenia lub losowania bez zwracania i ustaw ich liczbę.

Kalkulator wieku

Oblicz dokładny wiek w latach, miesiącach i dniach od daty urodzenia, wraz z łączną liczbą dni, godzin i odliczaniem do następnych urodzin.