Czemu czasem 950 wygląda "więcej desaturated" niż 900?

**Tailwind v3** ma to samo zachowanie - chroma (nasycenie) **faktycznie spada do extremów** skali (50 i 950). **To celowe**: bardzo ciemne kolory z pełnym chroma wyglądają niepatriotycznie ("pure dark blue" robi się **muddy purple**). Generator emuluje ten ramp tak, żeby paleta **wyglądała jak Tailwind official**.

Step, do którego **Twój oryginalny kolor jest "kotwiczony"**. Bazowy #3b82f6 z **anchor=500** znajdzie się **dokładnie w polu 500**. Z **anchor=400** ten sam #3b82f6 trafi w 400, a 500 będzie ciemniejsze. **Przydatne**, gdy Twój brand color jest np. bardzo jasny - daj **anchor=200**, żeby reszta skali była bardziej zbalansowana.

Jak to się ma do Tailwind v3 / v4 default colors?

**Tailwind v3** default colors (slate, gray, zinc, blue, red) zostały zaprojektowane **ręcznie w 2020-2021**. **Tailwind v4** (2024) zrobił **re-design w OKLCH**. Nasz generator używa **tej samej filozofii co v4** - jeśli wpiszesz #3b82f6 (Tailwind blue-500), generator powinien dać paletę **bardzo bliską oficjalnej Tailwind blue**.

Mogę użyć w Tailwind v3?

**Tak** - eksport w pełni kompatybilny z v3. **CSS variables (HEX)** działają wszędzie. **Tailwind config** również. W v3 nie używasz OKLCH bezpośrednio, ale fakt, że **paleta była zaprojektowana w OKLCH**, daje Ci lepszą skalę - to wnętrze, end-result to HEX.

A v4 z natywnym OKLCH?

**Tailwind v4** używa **CSS @theme z natywnym OKLCH**. W przyszłości dodamy export, który **zachowuje OKLCH** zamiast konwertować do HEX. Aktualnie eksport jest HEX-based - **działa wszędzie, ale traci precyzję OKLCH**.

Czemu skala 11 stopów (50, 100..950)?

**Tailwind v3** ma 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (**10 stopów**). **Tailwind v4** dodał **950** (11 stopów). **Trzymamy się v4 conventions**.

Custom krzywa jasności?

**Aktualnie nie** - generator używa **Tailwind's default lightness curve**. Dla custom curves (**Material Design 3**, **Radix Colors**) potrzebujesz innego narzędzia.

Generator palety Tailwind - darmowy

Każdy stopień to inna jasność tego samego odcienia.

Podgląd kontrastu

brand-400

A 2.1:1

A 10.0:1

brand-500

A 3.0:1

A 7.0:1

brand-600

A 4.4:1

A 4.8:1

brand-700

A 6.8:1

A 3.1:1

brand-800

A 10.3:1

A 2.0:1

brand-900

A 14.8:1

A 1.4:1

CSS variables

:root {
  --brand-50: #f0fbff;
  --brand-100: #def3ff;
  --brand-200: #c3e6ff;
  --brand-300: #a0d2ff;
  --brand-400: #77b6ff;
  --brand-500: #4d94ff;
  --brand-600: #2573ee;
  --brand-700: #0755c5;
  --brand-800: #023b90;
  --brand-900: #052559;
  --brand-950: #08152c;
}

Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
brand: {
        50: '#f0fbff',
        100: '#def3ff',
        200: '#c3e6ff',
        300: '#a0d2ff',
        400: '#77b6ff',
        500: '#4d94ff',
        600: '#2573ee',
        700: '#0755c5',
        800: '#023b90',
        900: '#052559',
        950: '#08152c',
      },
      }
    }
  }
}

Jak wygenerować paletę Tailwind 50-950 z jednego koloru?

Generator palety Tailwind w stylu 50-950 z pojedynczego koloru bazowego, używając OKLCH dla perceptualnie równej skali jasności.

Standardowe generatory robią to w HSL - efekt: "300 wygląda identycznie jak 400". My robimy w OKLCH = czytelne kroki zgodne z faktyczną skalą Tailwind v3/v4.

Wybierz "anchor" - który stop ma być Twoim oryginalnym kolorem (zazwyczaj 500). Eksport jako CSS variables lub Tailwind config.

Jak korzystać

Wybierz kolor bazowy: HEX (np. #3b82f6), klik color-picker, pipeta z ekranu (Chrome/Edge), lub jeden z 6 brand-presetów.

Wybierz "anchor" - który Tailwind step ma być Twoim oryginalnym kolorem. Domyślnie 500. Dla bardzo jasnych kolorów wybierz 200, dla bardzo ciemnych 800. Anchor zaznaczony gwiazdką (★).

Po prawej widzisz pełną skalę 50-950. Każdy swatch klikalny - kopiuje HEX. 50-200 = "tła i delikatne obramowania", 300-500 = "main interactive states", 600-950 = "tekst i accent".

"Contrast preview" pokazuje contrast ratio każdego swatcha z białym tekstem (A) i czarnym tekstem (A). Pomaga wybrać, które stopnie są dobre na buttony.

Dwa eksporty: CSS variables (do globals.css) lub gotowy fragment Tailwind config (do tailwind.config.js).

Do czego się przydaje

Gdzie generator palety Tailwind się przydaje - typowe sytuacje:

Brand book → Tailwind - masz brand color (np. #3b82f6 indigo) i potrzebujesz pełnej skali do designu. Generator robi 50, 100, ..., 950 zgodnie z konwencją Tailwind.
Dark mode - w Tailwind v4 paleta OKLCH oznacza, że odwrócenie skali (50 ↔ 950, 100 ↔ 900) daje sensowny dark mode.
Design system - pełna paleta dla N brand colors + 1 grayscale = kompletny system.
Migracja HSL → OKLCH - stary projekt w HSL chcesz przenieść do OKLCH - generator pokazuje, jak Tailwind v4 zrobiłby z Twojego brand color.
Edukacja - porównaj nasze OKLCH-based swatche z Tailwind v3 official defaults - są bardzo bliskie, bo Tailwind też używa OKLCH od 2024.

Bazowy kolor najwygodniej dobierzesz w konwerterze kolorów. Pasujące akcenty i kolory neutralne podpowie harmonia kolorów, a finalne pary tekst/tło zweryfikuj w sprawdzaniu kontrastu zanim wrzucisz to do projektu.

Pytania i odpowiedzi

HSL ma "perceptual non-uniformity" - L=50% w blue wygląda znacznie ciemniej niż L=50% w yellow. Generator HSL daje skalę, gdzie 300 i 400 wyglądają identycznie. OKLCH (Oklab Lightness/Chroma/Hue, 2020) ma równe perceptualne kroki - 300 jest widocznie jaśniejsze od 400. Tailwind v4 i Radix Colors używają OKLCH właśnie z tego powodu.

:root { --brand-50: #f0fbff; --brand-100: #def3ff; --brand-200: #c3e6ff; --brand-300: #a0d2ff; --brand-400: #77b6ff; --brand-500: #4d94ff; --brand-600: #2573ee; --brand-700: #0755c5; --brand-800: #023b90; --brand-900: #052559; --brand-950: #08152c; }

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { 50: '#f0fbff', 100: '#def3ff', 200: '#c3e6ff', 300: '#a0d2ff', 400: '#77b6ff', 500: '#4d94ff', 600: '#2573ee', 700: '#0755c5', 800: '#023b90', 900: '#052559', 950: '#08152c', }, } } } }

Jak wygenerować paletę Tailwind 50-950 z jednego koloru?

Generator palety Tailwind w stylu 50-950 z pojedynczego koloru bazowego, używając OKLCH dla perceptualnie równej skali jasności.

Standardowe generatory robią to w HSL - efekt: "300 wygląda identycznie jak 400". My robimy w OKLCH = czytelne kroki zgodne z faktyczną skalą Tailwind v3/v4.

Wybierz "anchor" - który stop ma być Twoim oryginalnym kolorem (zazwyczaj 500). Eksport jako CSS variables lub Tailwind config.

Jak korzystać

Wybierz kolor bazowy: HEX (np. #3b82f6), klik color-picker, pipeta z ekranu (Chrome/Edge), lub jeden z 6 brand-presetów.

"Contrast preview" pokazuje contrast ratio każdego swatcha z białym tekstem (A) i czarnym tekstem (A). Pomaga wybrać, które stopnie są dobre na buttony.

Dwa eksporty: CSS variables (do globals.css) lub gotowy fragment Tailwind config (do tailwind.config.js).

Do czego się przydaje

Gdzie generator palety Tailwind się przydaje - typowe sytuacje:

Brand book → Tailwind - masz brand color (np. #3b82f6 indigo) i potrzebujesz pełnej skali do designu. Generator robi 50, 100, ..., 950 zgodnie z konwencją Tailwind.
Dark mode - w Tailwind v4 paleta OKLCH oznacza, że odwrócenie skali (50 ↔ 950, 100 ↔ 900) daje sensowny dark mode.
Design system - pełna paleta dla N brand colors + 1 grayscale = kompletny system.
Migracja HSL → OKLCH - stary projekt w HSL chcesz przenieść do OKLCH - generator pokazuje, jak Tailwind v4 zrobiłby z Twojego brand color.
Edukacja - porównaj nasze OKLCH-based swatche z Tailwind v3 official defaults - są bardzo bliskie, bo Tailwind też używa OKLCH od 2024.

Pytania i odpowiedzi

Generator palety Tailwind

Jak wygenerować paletę Tailwind 50-950 z jednego koloru?

Jak korzystać

Do czego się przydaje

Pytania i odpowiedzi

Powiązane narzędzia

Generator odcieni i tonów

Konwerter kolorów

Wyciąganie palety z obrazu

Generator gradientów CSS

Generator palety Tailwind

Jak wygenerować paletę Tailwind 50-950 z jednego koloru?

Jak korzystać

Do czego się przydaje

Pytania i odpowiedzi

Powiązane narzędzia

Generator odcieni i tonów

Konwerter kolorów

Wyciąganie palety z obrazu

Generator gradientów CSS