Generator skal

Przekształć dowolny kolor w skalę systemu projektowego z 11 krokami (50→950): percepcyjnie wyrównana interpolacja OKLCH z kolorem źródłowym zakotwiczonym w najbliższym kroku, kontrast WCAG względem bieli/czerni na każdym kroku, eksport jednym kliknięciem do Tailwind / zmiennych CSS / SCSS / JSON.

#--11 krok

#fff5ff

50profil →

vs biel 1.06
vs czerń 19.76

#ffe0fd

100profil →

vs biel 1.21
vs czerń 17.33

#ffc2fb

200profil →

vs biel 1.46
vs czerń 14.36

#ffa0f6

300profil →

vs biel 1.81
vs czerń 11.61

#ff75ee

400profil →

vs biel 2.33
vs czerń 9.03

krok źródłowy#f437e0

500profil →

vs biel 3.25
vs czerń 6.47

#e400d1

600profil →

vs biel 4.02
vs czerń 5.22

#cc00ba

700profil →

vs biel 4.91
vs czerń 4.28

#ae00a0

800profil →

vs biel 6.35
vs czerń 3.31

#8d0082

900profil →

vs biel 8.55
vs czerń 2.45

#66005e

950profil →

vs biel 12.16
vs czerń 1.73

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff5ff",
        100: "#ffe0fd",
        200: "#ffc2fb",
        300: "#ffa0f6",
        400: "#ff75ee",
        500: "#f437e0",
        600: "#e400d1",
        700: "#cc00ba",
        800: "#ae00a0",
        900: "#8d0082",
        950: "#66005e",
        },
      },
    },
  },
};

Jak działa generator odcieni – wprowadź, sprawdź, eksportuj.

Stwórz 11-stopniową skalę systemu projektowego z jednego koloru, perceptualnie jednolitą w OKLCH.

01
Wprowadź
Wklej HEX lub kliknij „Stwórz skalę” na dowolnej stronie koloru, aby zaimportować wartość.
02
Sprawdź
Twój kolor dopasowuje się do najbliższego stopnia; kontrast WCAG względem bieli i czerni jest wyświetlany pod każdym stopniem.
03
Eksportuj
Wybierz Tailwind / zmienne CSS / SCSS / JSON i skopiuj je bezpośrednio do swojego kodu.

FAQ generatora odcieni

Częściowo zadawane pytania dotyczące generowania odcieni.

Dlaczego 11 stopni?: 50-950 w 11 stopniach odpowiada skalom używanym w głównych systemach projektowych (Tailwind, Radix), więc zamiana nie wiąże się z dodatkowymi kosztami.
Czy odcień będzie się przesuwał?: Nie. Interpolacja przebiega w OKLCH, a Twój kolor jest zakotwiczony przy najbliższym stopniu, więc odcień pozostaje niezmieniony od 50 do 950.
Czy mogę używać skali komercyjnie?: Tak. Skala odcieni to obliczone liczby bez powiązanej licencji – to, co eksportujesz, jest Twoje.
Dlaczego niektóre stopnie są szarawe?: Kolory o wysokiej chromatyce wychodzą poza zakres sRGB na krańcach; silnik kompresuje tam chromatykę, aby stopnie pozostały żywe zamiast stać się szare lub neonowe.

Po otrzymaniu wyniku

Kontynuuj stąd i wykorzystaj kolory w praktyce.

Dopasowanie do standardów

Wpisz kod RAL, Pantone lub NCS — lub dowolny HEX — i dopasuj go we wszystkich 10 systemach standardowych z CIEDE2000 ΔE.

Kontroler kontrastu

Walidacja kontrastu WCAG 2.1 między dowolnym kolorem pierwszoplanowym a tła.

Tablica palet

Spacja do losowania, blokowanie, przeciąganie do zmiany kolejności, udostępnianie przez URL — wszystko, co powinna robić tablica palet.

Studio palet AI

Opisz scenę lub nastrój w jednym zdaniu — otrzymaj paletę z pięcioma rolami z uzasadnieniem.

Generator skal

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff5ff", 100: "#ffe0fd", 200: "#ffc2fb", 300: "#ffa0f6", 400: "#ff75ee", 500: "#f437e0", 600: "#e400d1", 700: "#cc00ba", 800: "#ae00a0", 900: "#8d0082", 950: "#66005e", }, }, }, }, };

Jak działa generator odcieni – wprowadź, sprawdź, eksportuj.

Stwórz 11-stopniową skalę systemu projektowego z jednego koloru, perceptualnie jednolitą w OKLCH.

Wprowadź

Wklej HEX lub kliknij „Stwórz skalę” na dowolnej stronie koloru, aby zaimportować wartość.

Sprawdź

Twój kolor dopasowuje się do najbliższego stopnia; kontrast WCAG względem bieli i czerni jest wyświetlany pod każdym stopniem.

Eksportuj

Wybierz Tailwind / zmienne CSS / SCSS / JSON i skopiuj je bezpośrednio do swojego kodu.

FAQ generatora odcieni

Częściowo zadawane pytania dotyczące generowania odcieni.

Dlaczego 11 stopni?

50-950 w 11 stopniach odpowiada skalom używanym w głównych systemach projektowych (Tailwind, Radix), więc zamiana nie wiąże się z dodatkowymi kosztami.

Czy odcień będzie się przesuwał?

Nie. Interpolacja przebiega w OKLCH, a Twój kolor jest zakotwiczony przy najbliższym stopniu, więc odcień pozostaje niezmieniony od 50 do 950.

Czy mogę używać skali komercyjnie?

Tak. Skala odcieni to obliczone liczby bez powiązanej licencji – to, co eksportujesz, jest Twoje.

Dlaczego niektóre stopnie są szarawe?

Kolory o wysokiej chromatyce wychodzą poza zakres sRGB na krańcach; silnik kompresuje tam chromatykę, aby stopnie pozostały żywe zamiast stać się szare lub neonowe.