Generator odcieni koloru
Zamień jeden bazowy kolor HEX w skalę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.
Generator odcieni koloru — Wprowadź jeden kolor bazowy w HEX i natychmiast zbuduj pełną skalę, używając percepcyjnie równomiernej interpolacji w OKLCH lub HSL — stabilny odcień przy równomiernie rozłożonej jasności — albo klasycznego liniowego mieszania RGB, z dowolną liczbą stopni. Przesuń odcień i przeskaluj nasycenie, odczytaj dla każdego stopnia wskazówkę kontrastu WCAG pokazującą, które odcienie pozostają czytelne jako tekst na bieli i na czerni, i skopiuj całą skalę jako właściwości niestandardowe CSS, konfigurację kolorów Tailwind lub JSON. Wszystko działa w całości w Twojej przeglądarce; żaden kolor nigdy nie jest wysyłany na serwer.
Czym jest Generator odcieni koloru?
Generator odcieni koloru zamienia jeden bazowy kolor HEX w pełną skalę rozjaśnień i przyciemnień gotową dla systemu projektowego. Zamiast mieszać wyłącznie liniowo w RGB, może interpolować w OKLCH lub HSL, dzięki czemu odcień pozostaje stabilny, a jasność jest rozłożona równomiernie, co daje percepcyjnie zrównoważoną skalę bez brudnych ani wypłowiałych stopni. Wybierasz, ile stopni powstaje — od 2 do 24, lub własną listę etykiet rozdzielonych przecinkami —, przesuwasz odcień lub skalujesz nasycenie i odczytujesz dla każdego stopnia wskazówkę kontrastu WCAG pokazującą, które odcienie sprawdzają się jako tekst na bieli i na czerni. Gotową skalę kopiujesz jednym kliknięciem jako właściwości niestandardowe CSS, obiekt konfiguracji kolorów Tailwind lub JSON.
Jak używać Generator odcieni koloru
- Wpisz kolor bazowy w polu Kolor bazowy (HEX) w formacie #rrggbb lub #rgb albo kliknij dużą próbkę, aby wybrać go wizualnie.
- Wybierz przestrzeń barw: OKLCH lub HSL dla percepcyjnie równomiernej skali o stabilnym odcieniu albo RGB dla klasycznego mieszania liniowego.
- Ustaw, ile chcesz stopni (2–24), albo otwórz Ustawienia, aby wpisać własną listę stopni rozdzieloną przecinkami, przesunąć odcień, przeskalować nasycenie i ustawić nazwę koloru dla eksportu.
- Odczytaj dwie komórki kontrastu w każdym wierszu — literę A na bieli i na czerni —, podświetlane, gdy dany odcień spełnia WCAG AA dla tekstu.
- Skopiuj HEX pojedynczego stopnia albo skopiuj całą skalę jako zmienne CSS, konfigurację Tailwind lub JSON za pomocą przycisków kopiowania.
Przykłady
Równomierna skala OKLCH z firmowego błękitu
Wybierz OKLCH i zachowaj 11 stopni: skala 50–950 rozkłada jasność równomiernie, zachowując niebieski odcień, więc żaden stopień nie wygląda na brudny ani wypłowiały, jak bywa przy liniowym mieszaniu RGB.
Własna pięciostopniowa konfiguracja Tailwind
Wpisz 100, 300, 500, 700, 900 jako własną listę stopni, aby uzyskać tylko pięć próbek, a następnie skopiuj je jako obiekt kolorów Tailwind z dokładnie tymi etykietami jako kluczami albo jako zmienne CSS i JSON.
Najczęściej zadawane pytania
- Jaka jest różnica między opcjami RGB, HSL i OKLCH?
- RGB miesza kolor liniowo w stronę bieli i czerni, co jest szybkie, ale w półtonach może wyglądać nierówno. HSL i OKLCH utrzymują natomiast stabilny odcień i rozkładają jasność równomiernie; OKLCH jest percepcyjnie jednorodny, więc każdy stopień wygląda jak równy skok jasności. Wybierz OKLCH dla najbardziej zrównoważonej skali.
- Ile odcieni mogę wygenerować i czy mogę je nazwać?
- Ustaw dowolną liczbę stopni od 2 do 24. Wartość 11 używa znanej numeracji Tailwind (50, 100…900, 950); inne wartości są rozłożone równomiernie od 50 do 950. W Ustawieniach możesz też wpisać własną listę etykiet rozdzielonych przecinkami, która zastępuje liczbę stopni i nazywa każdy stopień dokładnie tak, jak go wpiszesz.
- Jak obliczana jest wskazówka kontrastu WCAG?
- Dla każdego odcienia narzędzie oblicza współczynnik kontrastu WCAG względem czystej bieli i czystej czerni na podstawie luminancji względnej. Dwie małe komórki w każdym wierszu pokazują literę A na bieli i na czerni i są podświetlane, gdy współczynnik osiąga 4,5:1 (AA dla zwykłego tekstu); najedź, aby zobaczyć dokładny współczynnik oraz czy to AA, czy AAA.
- Czy moje dane kolorów są gdzieś przesyłane?
- Nie. Obliczenia kolorów, sprawdzanie kontrastu i wszystkie trzy eksporty działają w całości w Twojej przeglądarce, więc żadna wartość koloru nigdy nie jest wysyłana na serwer. Narzędzie działa offline i zachowuje prywatność Twojej palety.
Powiązane narzędzia
Kod na obraz
Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.
Sprawdzanie kontrastu kolorów
Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.
Mikser kolorów
Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.
Symulator daltonizmu
Prześlij obraz i zobacz podgląd tego, jak wygląda przy protanopii, deuteranopii, tritanopii lub całkowitej ślepocie barw, a następnie pobierz symulowany wynik.