Color Picker & Converter

Color Picker & Converter

Wybierz wizualnie lub wklej dowolną wartość — HEX, RGB, HSL, OKLCH i OKLAB pozostają zsynchronizowane. Zawiera sprawdzanie kontrastu WCAG 2.2 i generator palet oparty na OKLCH. Działa w całości w Twojej przeglądarce.

Color Picker & Converter — TL;DR

Wybierz wizualnie lub wklej dowolną wartość — HEX, RGB, HSL, OKLCH i OKLAB pozostają zsynchronizowane. Zawiera sprawdzanie kontrastu WCAG 2.2 i generator palet oparty na OKLCH. Działa w całości w Twojej przeglądarce.

Wklej swoją wartość hex (np. #ff5722) w pole HEX — wiersz RGB zaktualizuje się natychmiast. Podobnie wklej rgb(255 87 34) w pole RGB, a HEX, HSL, OKLCH i OKLAB zsynchronizują się. Konwersja jest dwukierunkowa pomiędzy każdym obsługiwanym formatem.

OKLCH to przestrzeń kolorów z CSS Color Module Level 4, która używa percepcyjnej jasności (L), chromy (C) i odcienia (h) — podobnie jak HSL, ale percepcyjnie jednolita. Dwa kolory OKLCH o tej samej wartości L wyglądają tak samo jasno, nawet przy różnych odcieniach. Dzięki temu tokeny projektowe, generowane palety i dostępne rampy kolorów są znacznie bardziej przewidywalne niż w HSL. Wszystkie nowoczesne przeglądarki (Chrome 111+, Safari 15.4+, Firefox 113+) obsługują OKLCH.

Wartości kolorów nigdy nie opuszczają Twojego urządzenia. Otwórz DevTools → Network, a podczas konwersji, wybierania, generowania palety czy sprawdzania kontrastu zobaczysz zero żądań wychodzących.

HEX
RGB
HSL
OKLCH
OKLAB
Nazwany

Paleta

Kontrast WCAG 2.2

Tekst
Tło
—
Podgląd
Próbka dużego nagłówka
Próbka tekstu — zażółć gęślą jaźń, a pchnąć w tę łódź jeża lub ośm skrzyń fig.

Zaprojektowany dla realnych procesów pracy

Od systemów projektowych po audyty dostępności — każdy format i każda kontrola, których potrzebujesz, w jednym miejscu.

Sześć przestrzeni kolorów

Konwertuj w obie strony pomiędzy HEX (3 / 4 / 6 / 8 cyfr), RGB(A), HSL(A), OKLCH, OKLAB i nazwanymi kolorami CSS. Wynikowe ciągi są zgodne ze składnią CSS Color Module Level 4 — wklej je bezpośrednio do swoich arkuszy stylów.

Sprawdzanie kontrastu WCAG 2.2

Zobacz współczynnik kontrastu między dowolnymi dwoma kolorami z odznakami pass/fail jednym kliknięciem dla AA (4.5 : 1) i AAA (7 : 1), zarówno dla tekstu normalnego, jak i dużego. Obliczenia są zgodne z referencją W3C: linearyzacja sRGB, względna luminancja, następnie (L1+0.05)/(L2+0.05).

EyeDropper — pobierz dowolny piksel

Kliknij pipetę, aby pobrać dowolny kolor z ekranu — projekty, zrzuty ekranu, zdjęcia, a nawet inne karty przeglądarki. Wykorzystuje natywne EyeDropper API w przeglądarkach Chromium.

Paleta oparta na OKLCH

Generuj 9-stopniowe rozjaśnienia i przyciemnienia oraz harmonie dopełniające, triadyczne i analogiczne — wyprowadzone w OKLCH, dzięki czemu każdy krok jest percepcyjnie równomiernie rozłożony (w przeciwieństwie do HSL, gdzie jasność zmienia się gwałtownie).

Prywatność z założenia

Każda konwersja działa w JavaScript na Twoim urządzeniu. Nic nie jest przesyłane, logowane ani wysyłane do osób trzecich — otwórz DevTools → Network, jeśli chcesz to sam zweryfikować.

Zbudowany dla szybkości

Czysty JavaScript, bez runtime'u frameworka. Cold load to mniej niż 50 KB po gzipie; konwersje i generowanie palety kończą się w czasie poniżej milisekundy na pięcioletnim laptopie.

Jak korzystać z próbnika kolorów

Cztery sposoby na start, każdy format zsynchronizowany.

  1. 1

    Wybierz wizualnie

    Przeciągnij wewnątrz kwadratu nasycenia/jasności, aby wybrać odcień, przesuń pasek odcienia poniżej, aby zmienić kolor bazowy, i użyj suwaka alfa dla przezroczystości. Każdy format po prawej stronie aktualizuje się natychmiast.

  2. 2

    Wklej dowolną wartość

    Wklej HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)), a nawet nazwany kolor CSS (tomato) w odpowiednie pole — próbnik i pozostałe formaty się zsynchronizują.

  3. 3

    Pobierz pipetą

    Kliknij przycisk pipety, aby przechwycić dowolny piksel z ekranu — inną kartę, zrzut ekranu, zdjęcie, ikonę. Wykorzystuje natywne EyeDropper API w Chrome, Edge i Operze.

  4. 4

    Skopiuj lub sprawdź kontrast

    Kliknij ikonę kopiowania obok dowolnego formatu, aby umieścić go w schowku. Albo przewiń do sekcji kontrastu WCAG 2.2, aby sprawdzić, czy Twoja kombinacja pierwszego planu / tła przechodzi AA lub AAA dla tekstu normalnego i dużego.

Stworzony dla projektantów, programistów i audytorów dostępności

narzędzie do kolorów pasujące do czterech popularnych procesów pracy.

Tworzenie tokenów systemu projektowego

Konwertuj firmowe wartości HEX na OKLCH, aby każdy odcień w rampie tokenów miał ten sam percepcyjny krok jasności. Wklej wynik OKLCH bezpośrednio do swojego CSS — bez potrzeby preprocesora.

Audyty dostępności WCAG

Wprowadź pary pierwszy plan / tło i odczytaj współczynnik kontrastu wraz z odznakami AA / AAA. Wyłapuj nieudane kombinacje przed ich wdrożeniem — spełnia wymagane przez W3C progi 4.5 : 1 normalny / 7 : 1 wzmocniony.

Konwersja CSS we front-endzie

Masz HEX z makiety projektanta, ale potrzebujesz HSL do konfiguracji Tailwind albo OKLCH do nowoczesnego arkusza stylów? Wklej raz, skopiuj w dowolnym formacie. Wynikowe ciągi to prawidłowa składnia CSS Color Module Level 4.

Eksploracja palety

Wybierz kolor bazowy i natychmiast zobacz dziewięć percepcyjnie rozłożonych rozjaśnień i przyciemnień oraz harmonie dopełniające, triadyczne i analogiczne — generowane w OKLCH, dzięki czemu każdy krok wygląda na równomiernie jasny.

100% prywatne — działa w Twojej przeglądarce

Wartości kolorów nigdy nie opuszczają Twojego urządzenia. Otwórz DevTools → Network, a podczas konwersji, wybierania, generowania palety czy sprawdzania kontrastu zobaczysz zero żądań wychodzących.

  • Każda konwersja (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) działa jako JavaScript na Twojej maszynie — wzory są widoczne w źródle strony.
  • EyeDropper API zwraca tylko te kolory, które jawnie klikniesz; przeglądarka obsługuje uprawnienia i nigdy nie pozwala stronie zobaczyć dowolnych pikseli.
  • Bez logowania, bez telemetrii wartości kolorów, bez zewnętrznego API kolorów. Strona jest zgodna z GDPR od razu po uruchomieniu.

Powiązane przewodniki

Starannie wybrane tutoriale dla projektantów, programistów i zespołów ds. dostępności.

Najczęściej zadawane pytania

Jak skonwertować HEX na RGB?

Wklej swoją wartość hex (np. #ff5722) w pole HEX — wiersz RGB zaktualizuje się natychmiast. Podobnie wklej rgb(255 87 34) w pole RGB, a HEX, HSL, OKLCH i OKLAB zsynchronizują się. Konwersja jest dwukierunkowa pomiędzy każdym obsługiwanym formatem.

Czym jest OKLCH i dlaczego warto go używać?

OKLCH to przestrzeń kolorów z CSS Color Module Level 4, która używa percepcyjnej jasności (L), chromy (C) i odcienia (h) — podobnie jak HSL, ale percepcyjnie jednolita. Dwa kolory OKLCH o tej samej wartości L wyglądają tak samo jasno, nawet przy różnych odcieniach. Dzięki temu tokeny projektowe, generowane palety i dostępne rampy kolorów są znacznie bardziej przewidywalne niż w HSL. Wszystkie nowoczesne przeglądarki (Chrome 111+, Safari 15.4+, Firefox 113+) obsługują OKLCH.

Czy wynik kontrastu WCAG jest wiarygodny?

Tak. Używamy algorytmu z WCAG 2.2 §1.4.3: linearyzacja każdego kanału sRGB, obliczenie względnej luminancji (0.2126·R + 0.7152·G + 0.0722·B), następnie (L_lighter + 0.05) / (L_darker + 0.05). AA przechodzi przy 4.5 : 1 dla tekstu normalnego i 3 : 1 dla tekstu dużego (18 pt+ lub 14 pt+ pogrubionego). AAA przechodzi odpowiednio przy 7 : 1 i 4.5 : 1.

Czy mogę pobierać kolory z obrazów lub innych aplikacji?

Tak — kliknij przycisk Pipeta, aby uruchomić wbudowane EyeDropper API przeglądarki. Możesz pobrać dowolny piksel z dowolnego miejsca na ekranie: inną kartę przeglądarki, projekt w Figma, klatkę wideo, a nawet zrzut ekranu. Obecnie obsługiwane w Chrome, Edge i Operze; Firefox i Safari mają płynne fallbacki (przycisk jest wyłączony).

Czy cokolwiek jest wysyłane na wasz serwer?

Nie. Próbnik, każda konwersja, generator palety i sprawdzanie kontrastu działają w Twojej przeglądarce. Żadne wartości kolorów, próbki obrazów ani teksty nigdy nie są przesyłane. Możesz otworzyć DevTools → Network i zweryfikować, że podczas użytkowania nie ma żadnych żądań wychodzących.