Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
O tym narzędziu
Ekstraktor Palety Kolorów generuje 10-stopniową skalę systemu projektowania z dowolnego koloru podstawowego, zgodną z konwencjami cieni 50–900 używanymi przez Tailwind CSS, Material Design i podobne frameworki.
Każda próbka w wygenerowanej skali wyświetla wartości hex, RGB i HSL. Kolor tekstu automatycznie dostosowuje się do białego lub ciemnego w zależności od luminancji.
Jak używać
- Wybierz kolor podstawowy za pomocą próbnika kolorów lub wpisz wartość hex.
- 10-stopniowa skala (50–900) generuje się natychmiast, obejmując pełny zakres jasności.
- Używaj wartości hex, RGB lub HSL w swoim systemie projektowania lub zmiennych CSS.
Przypadki użycia
Zespoły systemów projektowania generują pełne skale kolorów jako rozszerzenia konfiguracji Tailwind lub niestandardowe właściwości CSS. Programiści frontend tworzą dostępne komponenty UI.
Często zadawane pytania
- Czym ta skala różni się od "odcieni" w innych narzędziach? — To narzędzie generuje stałą 10-stopniową skalę (50, 100, 200, … 900) zakotwiczoną na konkretnych wartościach jasności, zgodnych z powszechnymi konwencjami systemów projektowania.
- Czy zmiana nasycenia wpływa na skalę? — Nasycenie koloru podstawowego jest zachowane na wszystkich stopniach — zmienia się tylko jasność.
- Czy mogę używać tych kolorów bezpośrednio w Tailwind CSS? — Tak. Skopiuj wartości hex z każdego poziomu odcienia i dodaj je do tailwind.config.js pod theme.extend.colors z numerami odcieni jako kluczami.