TanodTools
PL

Generator palety kolorów

Zacznij od jednego koloru i uzyskaj pasujące palety, każda próbka z wartościami HEX i RGB oraz kontrastem względem bieli i czerni.

Działa w całości w Twojej przeglądarce

Losowa paleta

Pięć kolorów z generatora liczb losowych przeglądarki. Zablokuj te, które chcesz zachować, i losuj ponownie. Naciśnij spację, aby losować, gdy żadne pole tekstowe nie jest aktywne.

Eksport

Format

Palety są tworzone w przestrzeni barw OKLCH i pokazywane jako HEX sRGB, więc kolory zbyt intensywne dla ekranu mają obniżone nasycenie. Wartości kontrastu stosują wzór WCAG 2, który mierzy wyłącznie kontrast jasności.

Jak stworzyć paletę kolorów

  1. Wybierz kolor bazowy próbnikiem albo wpisz wartość, taką jak #1636a3 lub f60, w polu HEX.
  2. Przejrzyj palety harmonii poniżej. Każda próbka pokazuje swój HEX, RGB oraz to, czy czarny lub biały tekst na niej spełnia WCAG AA lub AAA.
  3. Wybierz paletę w sekcji Eksport i skopiuj ją lub pobierz jako zmienne CSS, tablicę JSON albo zwykłą listę. Użyj Losowa paleta i przycisków blokowania, aby eksperymentować.

Jak powstają harmonie

Harmonia kolorów to zestaw kolorów, których odcienie leżą pod stałymi kątami na kole barw. Kolory analogowe są sąsiadami, oddalonymi o 30 stopni. Kolor komplementarny leży 180 stopni dalej, para podzielonych komplementarnych 150 i 210 stopni, triada jest rozstawiona co 120 stopni, a tetrada używa czterech odcieni co 90 stopni. Paleta monochromatyczna zachowuje odcień i zmienia jasność od bladych tintów do ciemnych cieni.

Użyte tu koło to OKLCH, walcowa postać przestrzeni OKLab Björna Ottossona. Przeliczenie idzie od sRGB do światła liniowego, potem przez macierze OKLab i z powrotem ze sprawdzeniem gamy. Jeśli obrócony kolor wypada poza to, co może pokazać sRGB, jego nasycenie jest zmniejszane małymi krokami, aż się zmieści, więc wybrana jasność i odcień zostają zachowane.

Kontrast jest podawany dla każdej próbki zarówno względem bieli, jak i czerni, bo pierwsze pytanie o kolor palety zwykle brzmi, jaki tekst można na nim umieścić. Współczynnik oraz opis AA lub AAA są zawsze zapisane słowami, więc informacja nie zależy od widzenia kolorów.

Wskazówki

Najczęstsze pytania

Dlaczego OKLCH zamiast HSL?

W HSL żółty i niebieski o tej samej wartości jasności wyglądają na bardzo różnie jasne. OKLCH jest zbudowany tak, aby równe kroki jasności wyglądały równo, co utrzymuje próbki palety w podobnej wadze. Odcień to kąt używany w harmoniach, więc kolor komplementarny leży 180 stopni od koloru bazowego w OKLCH, a nie w HSL.

Co się dzieje, gdy kolor nie może być pokazany na ekranie?

Obrót odcienia przy zachowaniu jasności i nasycenia czasem trafia poza zakres sRGB, który potrafi pokazać zwykły wyświetlacz. Narzędzie obniża wtedy nasycenie, zachowując jasność i odcień, aż kolor się zmieści. Dlatego obrócona próbka może wyglądać nieco mniej intensywnie niż baza.

Co oznaczają etykiety AA i AAA?

Podają współczynnik kontrastu WCAG 2 białego lub czarnego tekstu na tej próbce. Współczynnik 4,5 lub więcej to AA dla zwykłego tekstu, 7 lub więcej to AAA, a od 3 do 4,5 spełnia AA tylko dla dużego tekstu. Próbka, która nie spełnia wymagań ani dla czerni, ani dla bieli, jest słabym tłem dla tekstu.

Jak działa losowa paleta?

Pięć kolorów jest losowanych bezpiecznym generatorem liczb losowych przeglądarki: odcienie rozłożone na kole, z losową jasnością i nasyceniem w zakresie unikającym kolorów prawie czarnych i prawie białych. Zablokuj próbkę, aby ją zachować, a potem naciśnij Losowa paleta lub spację, aby wymienić pozostałe.

Którego formatu eksportu użyć?

Zmienne CSS wklejasz prosto do bloku :root arkusza stylów. Tablica JSON pasuje do tokenów projektowych lub skryptów, a zwykła lista to jeden HEX w wierszu dla narzędzi przyjmujących wklejone kolory. Wszystkie trzy używają wyświetlanych wartości HEX.

Czy obsługuje skrócony HEX i wielkie litery?

Tak. Odczytywane są #abc, abc, #AABBCC i aabbcc. Wartości z parą alfa, na przykład ośmiocyfrowe, nie są tu akceptowane; najpierw usuń alfę w narzędziu Konwerter kolorów i kontrastu.