Palety markowe oparte na OKLCH. Wybierz bazę, otrzymaj wszystkie klasyczne harmonie plus skalę tonalną 50–950. Blokuj, losuj ponownie, eksportuj jako CSS / Tailwind v4 / SCSS / JSON.
Palety markowe oparte na OKLCH. Wybierz bazę, otrzymaj wszystkie klasyczne harmonie plus skalę tonalną 50–950. Blokuj, losuj ponownie, eksportuj jako CSS / Tailwind v4 / SCSS / JSON.
Nasz Color Picker & Converter służy do jednego koloru naraz — wybierz / konwertuj / kopiuj. To narzędzie służy do palet: wrzuć kolor bazowy, otrzymaj cały gotowy do markowania system (harmonie + skala tonalna) za jednym zamachem. To różnica między kupowaniem pojedynczej koszuli a otrzymaniem całej szafy.
HSL nierównomiernie rozkłada odcienie (żółty przy 60° wydaje się znacznie jaśniejszy niż niebieski przy 240° nawet przy tej samej wartości jasności). Triadowa paleta w HSL ma jedną próbkę zauważalnie jaśniejszą lub bardziej matową od pozostałych. OKLCH jest percepcyjnie jednolite — trzy próbki o tej samej jasności OKLCH wyglądają na tak samo jasne. Dlatego każdy nowoczesny system designu (Apple HI, Tailwind v4, IBM Carbon) przechodzi na OKLCH dla harmonii i skal.
Kolory Twojej marki nigdy nie opuszczają urządzenia. Otwórz DevTools → Network, a podczas każdej operacji zobaczysz zero żądań wychodzących.
Wskazówka: naciśnij spację, aby wylosować ponownie odblokowane próbki.
Harmonie OKLCH, skale tonalne, blokowanie i losowanie, eksport tokenów designu — plus kilka drobnych smaczków, które sprawiają, że korzystanie jest naprawdę przyjemne.
Komplementarna, analogiczna, triadowa, tetradowa, podzielona komplementarna, monochromatyczna — wszystkie obliczane w OKLCH, więc triadowa paleta z trzech nasyconych jasnych kolorów pozostaje równomiernie jasna. Bez zamulenia HSL.
Wrzuć kolor swojej marki, otrzymaj skalę tonalną w kształcie Tailwinda 50, 100, 200, … 900, 950 generowaną przez przesuwanie jasności po krzywej OKLCH. Chroma kompresuje się na ekstremach, więc kolory pozostają w gamucie sRGB.
Przypnij dowolną próbkę (ikona kłódki) i naciśnij Re-roll (lub po prostu spację), aby zmienić resztę w ramach wybranej harmonii. Iteruj szybko, zachowuj to, co Ci się podoba.
Niestandardowe właściwości CSS (--brand-500), blok @theme dla Tailwind v4, mapa SCSS i tokeny designu JSON gotowe do Style Dictionary / Figma Tokens. Plus pasek próbek 1200×200 PNG.
Każda próbka pokazuje swój współczynnik kontrastu WCAG względem lepszej z dwóch opcji: czerni lub bieli, z odznaką AA / AAA / fail. Wykrywaj problemy z dostępnością, zanim trafią na produkcję.
Każdy bajt zostaje na Twoim urządzeniu. Matematyka OKLCH, generowanie harmonii, derywacja skali, eksport PNG — wszystko działa lokalnie w JavaScript. Otwórz DevTools → Network i zweryfikuj zero żądań wychodzących.
Cztery kroki od jednego koloru bazowego do kompletnej palety gotowej na tokeny designu.
Kliknij pole koloru, wklej HEX lub naciśnij Random base dla inspiracji. Narzędzie centruje całą paletę wokół tego koloru — zarówno próbki harmonii, jak i 11-stopniową skalę tonalną.
Domyślnie jest to Analogiczna — trzy kolory w zakresie 30° od bazy, idealne dla spokojnych palet markowych. Komplementarna dla kontrastowych akcentów. Triadowa / Tetradowa dla redakcyjnych / zabawnych marek. Monochromatyczna dla tonalnych systemów jednoodcieniowych. Wszystkie obliczane w OKLCH, więc pozostają równomiernie jasne.
Kliknij ikonę kłódki na każdej próbce, którą chcesz zachować, a następnie naciśnij spację (lub Re-roll), aby zmienić resztę w ramach harmonii. Iteruj szybko. Edytuj dowolną próbkę bezpośrednio, klikając jej pole HEX, jeśli chcesz trafić w dokładną wartość.
Skopiuj wynik CSS (niestandardowe właściwości), Tailwind v4 (blok @theme), mapę SCSS lub tokeny designu JSON. Lub naciśnij Download PNG dla paska próbek 1200×200 gotowego do wrzucenia do briefu projektowego.
Cztery typowe scenariusze, w których narzędzie do palet OKLCH stawiające prywatność na pierwszym miejscu bije ręczne dostrajanie kodów hex w Figmie.
Masz kolor marki, potrzebujesz wokół niego systemu. Wrzuć HEX, wybierz Analogiczną, losuj ponownie, aż dwa kolory pomocnicze zaczną grać, zablokuj wszystkie trzy. Przełącz się na widok skali tonalnej, skopiuj blok @theme Tailwinda, wklej do app.css nowego projektu. Łączny czas: 5 minut.
Domyślne indigo Tailwinda nie jest Twoją marką. Twoja marka to #5B3FCD. Wrzuć go, otrzymaj 11-stopniową skalę tonalną idealnie odzwierciedlającą rozstaw Tailwinda. Skopiuj blok @theme — każde bg-brand-500 / text-brand-700 po prostu działa.
Każda próbka pokazuje swój współczynnik kontrastu WCAG + odznakę AA/AAA. Sprawdź wyrywkowo, czy brand-500 osiąga AA na białym, a brand-100 pozostaje czytelne jako tło z tekstem brand-900. Naprawiaj problematyczne próbki, losując je pojedynczo.
Agencje / firmy wielomarkowe utrzymują N równoległych systemów designu, każdy o tym samym kształcie, ale innym odcieniu marki. Używaj tego samego workflow harmonii + skali tonalnej dla każdej marki, eksportuj każdą jako tokeny JSON, wrzuć do Style Dictionary. Spójny kształt, odrębna tożsamość.
Kolory Twojej marki nigdy nie opuszczają urządzenia. Otwórz DevTools → Network, a podczas każdej operacji zobaczysz zero żądań wychodzących.
canvas; obraz próbek jest generowany w całości w pamięci przeglądarki i pobierany jako Blob — nic nie przechodzi przez sieć.
Starannie wybrane lektury o paletach OKLCH, systemach kolorów markowych i tokenach designu.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Nasz Color Picker & Converter służy do jednego koloru naraz — wybierz / konwertuj / kopiuj. To narzędzie służy do palet: wrzuć kolor bazowy, otrzymaj cały gotowy do markowania system (harmonie + skala tonalna) za jednym zamachem. To różnica między kupowaniem pojedynczej koszuli a otrzymaniem całej szafy.
HSL nierównomiernie rozkłada odcienie (żółty przy 60° wydaje się znacznie jaśniejszy niż niebieski przy 240° nawet przy tej samej wartości jasności). Triadowa paleta w HSL ma jedną próbkę zauważalnie jaśniejszą lub bardziej matową od pozostałych. OKLCH jest percepcyjnie jednolite — trzy próbki o tej samej jasności OKLCH wyglądają na tak samo jasne. Dlatego każdy nowoczesny system designu (Apple HI, Tailwind v4, IBM Carbon) przechodzi na OKLCH dla harmonii i skal.
To skala kolorów markowych w stylu Tailwind: indigo-50 (najjaśniejszy), indigo-100, indigo-200, … indigo-900, indigo-950 (najciemniejszy). Wrzuć kolor swojej marki, a narzędzie automatycznie wygeneruje wszystkie 11 kroków, przesuwając jasność OKLCH po stałej krzywej. Wynik to gotowe zastępstwo dla dowolnego tokena palety Tailwinda, w odcieniu Twojej marki.
Kliknij ikonę kłódki w lewym górnym rogu dowolnej próbki — pozostanie na miejscu. Następnie naciśnij Re-roll lub spację, aby zmienić każdą odblokowaną próbkę w ramach wybranej harmonii. Tak właśnie znajduje się świetną paletę: przypnij kolor marki, do którego już się zobowiązałeś, i eksploruj jego warianty.
Nie. Matematyka OKLCH, generowanie harmonii, derywacja skali tonalnej, obliczanie współczynnika kontrastu, eksport PNG, każde kopiowanie do schowka — wszystko działa w JavaScript na Twoim urządzeniu. Otwórz DevTools → Network i zobaczysz zero żądań wychodzących. Wklejaj kolory marki, wewnętrzne tokeny designu, palety objęte NDA — nic nie opuszcza Twojego laptopa.