Generator jaśniejszych i ciemniejszych odcieni

Jak korzystać z generatora odcieni

1. Wybierz Kolor bazowy za pomocą próbki albo wpisz wartość w polu Kod koloru: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) lub nazwę CSS, np. teal.
2. Wybierz Krok: 5%, 10%, 20% lub 25%. Przy 10% otrzymasz rozjaśnienia 10%, 20% … 100% i tyle samo przyciemnień.
3. Wybierz, jak mieszać kolory (Mieszaj w): OKLCH (percepcyjnie) lub sRGB (klasycznie). Oba rzędy aktualizują się od razu: Rozjaśnienia (z bielą) i Przyciemnienia (z czernią), każdy zaczynający się od koloru bazowego.
4. Kliknij Kopiuj pod dowolną próbką, aby skopiować jej kod HEX.
5. W sekcji Eksportuj jako wybierz Zmienne CSS, Konfiguracja Tailwind (v3), Tailwind @theme (v4), Zmienne SCSS lub JSON, ustaw Nazwa, np. primary lub brand, a następnie Kopiuj lub Pobierz kod.

Rozjaśnienia, przyciemnienia i tony

W teorii koloru (po angielsku tint, shade i tone) rozjaśnienie to kolor zmieszany z bielą, przyciemnienie to kolor zmieszany z czernią, a ton – kolor zmieszany z szarością. Procent mówi, ile bieli lub czerni dodano: rozjaśnienie 30% to 70% koloru bazowego i 30% bieli. Przy 100% dochodzi się do czystej bieli lub czystej czerni, dlatego ostatnia próbka każdego rzędu to zawsze #FFFFFF lub #000000; wyznacza ona koniec skali.

Rozjaśnienia i przyciemnienia to najszybszy sposób na zbudowanie spójnej skali z jednego koloru marki: jasne tła i stany najechania kursorem z rozjaśnień, a obramowania, stany wciśnięcia i ciemny tekst z przyciemnień.

Mieszanie w OKLCH czy sRGB?

sRGB (klasycznie) miesza bezpośrednio wartości czerwieni, zieleni i błękitu. Tak działa większość starszych generatorów i odpowiada to CSS color-mix(in srgb, …). Wzór na rozjaśnienie to po prostu kanał + (255 − kanał) × p, a na przyciemnienie kanał × (1 − p). Wynik jest przewidywalny, ale kroki nie są równe percepcyjnie: błękity podczas rozjaśniania mają tendencję do przesuwania się w stronę fioletu, a ciemne przyciemnienia często wyglądają na „brudne”.

OKLCH (percepcyjnie) miesza w przestrzeni barw OKLCH opracowanej przez Björna Ottossona w 2020 roku, podobnie jak CSS color-mix(in oklch, …). Jasność, nasycenie (chroma) i odcień są interpolowane osobno. Biel i czerń nie mają odcienia, więc odcień bazowy jest zachowany na całej długości skali, a każdy krok zmienia jasność o wizualnie podobną wartość. Kolory, które wypadłyby poza gamut sRGB, są do niego sprowadzane przez zmniejszenie nasycenia, a nie przez obcięcie kanałów, więc odcień pozostaje stabilny. W systemach projektowych daje to zwykle czystsze i równiejsze skale.

Jak użyć eksportu

• Zmienne CSS tworzą blok :root z nazwami w rodzaju --primary-tint-20 i --primary-shade-40, gotowy do wklejenia do arkusza stylów.
• Konfiguracja Tailwind (v3) daje obiekt colors dla theme.extend.colors; potem piszesz klasy w rodzaju bg-primary-tint-20 lub text-primary-shade-60. DEFAULT zawiera kolor bazowy, więc działa też bg-primary.
• Tailwind @theme (v4) daje zmienne --color-… dla konfiguracji Tailwind 4 opartej na CSS.
• Zmienne SCSS i JSON pasują do innych narzędzi budowania i tokenów projektowych.

Nazwy są zamieniane na małe litery, a spacje na łączniki, więc „Brand Blue” staje się brand-blue. W eksporcie zostają angielskie człony tint i shade.