Przejdź do treści

Narzędzia kolorów FREE

Wybieraj, przeliczaj i generuj kolory, palety, skale i gradienty, z kontrastem WCAG, podpowiedziami dostępnych odcieni i symulacją widzenia barw. Wszystko liczy się w Twojej przeglądarce.

Za darmo Bez rejestracji Prywatność przede wszystkim

HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 ...) albo nazwa koloru CSS.

Ostatnie

Próbnik i konwersje

217°
100%

Wszystkie zapisy

Szczegóły techniczne

Kontrast

APCA (szkic, informacja dodatkowa)

APCA to percepcyjny model kontrastu przygotowywany dla WCAG 3. Dziś nie jest wymogiem zgodności i bywa niezgodny z WCAG 2 w obie strony, więc pokazujemy go jako informację dodatkową, nigdy jako zaliczenie lub niezaliczenie.

Jak to wygląda

Palety

Które pary są czytelne

Każdy kolor jako tekst na każdym innym. Liczba to współczynnik kontrastu WCAG; AA to 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu.

Skopiuj paletę

Skale

Jedenaście stopni zbudowanych w OKLCH, więc skoki wyglądają na równe, a nie tylko są równymi liczbami. Wynik ma kształt, który wkleisz tam, gdzie framework narzędziowy oczekuje skali; to własna rampa tego narzędzia, nie paleta żadnego frameworka.

Dostrój rampę

Gradienty

Z obrazu

Upuść tutaj obraz albo wybierz plik

Jest odczytywany w tej karcie i nie trafia na serwer. Po opuszczeniu strony nic nie zostaje.

Widzenie barw

Model tego, co para kolorów traci przy częstych postaciach daltonizmu, policzony rzutowaniem Viénota, Brettela i Mollona. To symulacja, nie fotografia tego, co widzi konkretna osoba.

Pary, które przestają być rozróżnialne

Brane z palety. Wypisujemy tylko pary wyraźnie różne w widzeniu typowym - dwa kolory, które i tak wyglądają podobnie, to decyzja projektowa, nie ustalenie.

Każda konwersja, paleta i liczba kontrastu na tej stronie jest liczona w Twojej przeglądarce. Obraz, który upuścisz, jest odczytywany na kanwie w tej karcie i nie trafia na serwer.

Zakres i ograniczenia

Co te liczby znaczą, a czego nie

Liczone tutaj, z opublikowanych wzorów

Konwersje idą za CSS Color Level 4, łącznie z prawdziwą krzywą przenoszenia sRGB zamiast jej przybliżenia, a kontrast za definicją WCAG 2.2. Spełnienie wymogu kontrastu przez parę kolorów nie czyni strony dostępną: kontrast to jedno kryterium sukcesu spośród wielu i to jedno mierzy to narzędzie. Wszystko działa w Twojej przeglądarce i nic nie jest nigdzie wysyłane.

Pomoc

FAQ

Czy moje kolory albo obrazy gdzieś trafiają?

Nie. Każda konwersja, paleta, skala i liczba kontrastu jest liczona w tej karcie. Obraz jest odczytywany tutaj na kanwie i nie trafia na serwer; ostatnie kolory i Twoja paleta są trzymane w pamięci tej przeglądarki i jedno i drugie możesz wyczyścić.

Dlaczego OKLCH, a nie HSL?

Bo „jasność” w HSL to średnia kanałów, a nie coś, co mierzy oko. Obróć odcień o 120 stopni w HSL, a jeden z trzech wyników wyjdzie wyraźnie ciemniejszy od pozostałych; zrób to w OKLCH, a wszystkie trzy czytają się jak jedna rodzina. Tak samo z rampą odcieni: równe kroki jasności HSL zbijają się na końcach. HSL nadal pokazujemy, bo w nim napisano mnóstwo kodu.

Czy zaliczenie kontrastu czyni moją stronę dostępną?

Nie, i sformułowania tutaj są pod tym względem ostrożne. To para kolorów spełnia wymóg kontrastu. Kontrast to jedno kryterium sukcesu spośród wielu - kolejność fokusu, etykiety, obsługa z klawiatury, ruch i struktura to osobne sprawy - a strona o doskonałym kontraście nadal może być nie do użycia. Użyj tego, żeby rozstrzygnąć kwestię kolorów, nie całość.

Czym jest APCA i dlaczego siedzi w osobnym panelu?

To percepcyjny model kontrastu przygotowywany dla WCAG 3. Modeluje, jak kontrast faktycznie czyta się przy danym stopniu i grubości pisma, czego WCAG 2 nie robi - ale to szkic i dziś nic nie jest według niego mierzone. Postawienie go obok werdyktów WCAG jako równorzędnego wprowadzałoby w błąd co do obu, więc siedzi pod rozwinięciem i mówi, czym jest.

Jak dokładna jest symulacja daltonizmu?

To rzutowanie Viénota, Brettela i Mollona zastosowane w świetle liniowym, czyli standardowy sposób modelowania dichromatyzmu. Pokazuje, co traci PARA kolorów, bo to jest pytanie, które ma znaczenie: czy dwie rzeczy nadal da się odróżnić. To model jednej postaci tego zjawiska, nie fotografia tego, co widzi konkretna osoba - i panel to mówi.

Czy wygenerowaną skalę można wkleić do konfiguracji frameworka?

Tak - eksport zawiera kształt pasujący tam, gdzie framework narzędziowy oczekuje skali kolorów, obok zmiennych CSS, zmiennych SCSS i JSON-a. Rampa jest własna, zbudowana w OKLCH z koloru, który podałeś; nie jest paletą żadnego frameworka i nie jest za taką podawana.

Twórz lepszy internet, szybciej.

Tworzymy dedykowane oprogramowanie i rozwiązania dopasowane do Twoich potrzeb.

Skontaktuj się