Softonic

Generator palety monochromatycznej

Krok 1 / 3 Utwórz skalę

Kolory i palety są tworzone w tej przeglądarce. W trybie krokowym projekt pozostaje do 30 minut w pamięci sesji tej karty; żadna wartość koloru nie trafia do naszych serwerów ani adresu URL.

Utwórz skalę monochromatyczną

Wpisz jeden kolor, a następnie wybierz przekształcenie, przestrzeń interpolacji i liczbę próbek.

Obsługiwane formaty: #RGB, #RRGGBB, rgb(0–255) i hsl() z wartościami procentowymi. Kanały alfa nie są obsługiwane.

Używana w eksporcie zmiennych CSS, Tailwind, SCSS i tokenów projektowych.

Wybierz kolor bazowy, a generator zbuduje wokół niego paletę monochromatyczną: rozjaśnienia (stopniowo mieszane z bielą dla jaśniejszej skali), przyciemnienia (stopniowo mieszane z czernią dla ciemniejszej skali) oraz stonowania (mieszane z szarością, by obniżyć nasycenie). Przydaje się w systemach projektowych, które potrzebują spójnej skali z jednego koloru marki, jak skala 50–950 w Tailwind, ale regulowanej, albo do dobierania stanów hover i active bez opuszczania palety.

Jak powstaje paleta

  1. 1

    Wpisz kolor bazowy

    Użyj #RGB, #RRGGBB, całkowitych kanałów rgb() lub procentów hsl().

  2. 2

    Wybierz typ palety

    Wybierz pełną jasną i ciemną skalę, rozjaśnienia do bieli, przyciemnienia do czerni albo stonowania do neutralności.

  3. 3

    Wybierz liczbę kroków

    5, 9 lub 11 kroków. Dziewięć używa popularnych etykiet 100–900 w stylu Material; 11 dodaje 50 i 950, tworząc skalę w stylu Tailwind.

  4. 4

    Kopiuj lub eksportuj

    Kopiuj HEX, RGB, HSL lub OkLCH albo eksportuj CSS, Tailwind, SCSS i JSON Design Tokens Community Group.

Rozjaśnienia, przyciemnienia i stonowania

  • Rozjaśnienie = kolor bazowy + biel. Jaśniejsze, bardziej pastelowe. mix(base, #fff, p%), gdzie p to procent bieli.
  • Przyciemnienie = kolor bazowy + czerń. Ciemniejsze, bardziej nastrojowe. mix(base, #000, p%).
  • Stonowanie = kolor bazowy + szarość. Ta sama jasność, niższe nasycenie, bardziej przygaszone.

Te trzy przekształcenia dają różny charakter wizualny: rozjaśnienia są lekkie i optymistyczne, przyciemnienia osadzone i poważne, a stonowania powściągliwe i wyrafinowane.

Skala 9-stopniowa z jednej bazy

Krok Opis Typowe zastosowanie
100 Bardzo jasne Powierzchnie, tła chipów
200 Jasne Stany wyłączone
300 Średniojasne Obramowania, separatory
400 Lekko przygaszone Tekst drugorzędny (jasne tło)
500 Kolor bazowy Domyślny kolor marki, punkt wyjścia
600 Średniociemne Stany hover na akcjach głównych
700 Ciemne Stany active, nagłówki
800 Bardzo ciemne Mocny tekst na jasnym tle
900 Najciemniejsze przyciemnienie Tekst o maksymalnym kontraście

Numeryczne etykiety są inspirowane popularnymi konwencjami tokenów; wygenerowane kolory nie są oficjalnymi wartościami Material ani Tailwind.

Dlaczego monochromatyczność sprawdza się w interfejsach

  • Spójność. Każdy element wygląda na niewątpliwie powiązany z resztą.
  • Spójność. Powtarzanie jednego odcienia ułatwia rozpoznawanie zależności, ale samo w sobie nie zapewnia dostępności dla osób z zaburzeniami widzenia barw.
  • Prostota. Jedna decyzja, kolor bazowy, napędza całą paletę.

Łączenie z neutralami

Paleta monochromatyczna potrzebuje też szarości. Częsty wzorzec:

  • Skala główna z koloru marki (9 kroków).
  • Skala neutralna z odbarwionej wersji koloru głównego (9 kroków).
  • Może jeden kolor akcentowy (pojedynczy, dobrze dobrany krok do alertów i CTA).

Traktuj to jako strukturę początkową, nie sztywną regułę. Liczba palet zależy od stanów produktu, wizualizacji danych, kolorów semantycznych i wymagań dostępności.

Punkty kontrolne kontrastu

Dla tekstu na tle WCAG wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Etykiety 100, 500 czy 900 nie oznaczają określonego współczynnika kontrastu; wynik zależy od koloru bazowego, typu palety i przestrzeni interpolacji.

Zawsze sprawdzaj konkretne kombinacje, których zamierzasz użyć, w narzędziu do badania kontrastu.

Eksport do twojego systemu projektowego

Formaty wyjściowe:

  • Niestandardowe właściwości CSS: --primary-50: #f0f9ff; --primary-100: ...
  • Konfiguracja Tailwind: obiekt JS gotowy do wklejenia w tailwind.config.js → theme.extend.colors.
  • Mapa SCSS dla projektów Sass.
  • Tokeny projektowe JSON w strukturze $type/$value Design Tokens Community Group.

Najczęściej zadawane pytania

Rozjaśnienia celowo zmierzają do bieli, więc mocno nasycona baza może szybko stać się pastelowa. Porównaj HSL i OkLCH, użyj mniejszej liczby kroków albo wybierz mniej nasyconą bazę.

Możesz wybrać HSL lub OkLCH. HSL zmienia osie jasności i nasycenia; OkLCH zmienia jasność percepcyjną i chromę, a w razie potrzeby zmniejsza chromę, aby wynik pozostał w sRGB.

W pełnej skali kolor bazowy jest środkowym tokenem 500. Skala rozjaśnień kończy się na bazie, skala przyciemnień od niej zaczyna, a skala stonowań na niej kończy. Etykiety nie gwarantują określonej jasności.

Narzędzie nie integruje się bezpośrednio z Figmą. Skopiuj pojedyncze wartości albo użyj tekstu CSS, Tailwind, SCSS lub JSON w strukturze Design Tokens Community Group jako początku własnego procesu.

Powiązane narzędzia

Zmiana rozmiaru obrazu

Zmieniaj rozmiar obrazów do dokładnych wymiarów w pikselach lub procentach, zachowując proporcje. Dobre do pracy partiami, bez przesyłania plików.

Masowa zmiana rozmiaru obrazów

Przeciągnij kilka obrazów, dopasuj je lub rozciągnij do rozmiaru docelowego i wyeksportuj JPG, PNG albo WebP w jednym ZIP-ie. Przetwarzanie zostaje w przeglądarce.

Komprimuj plik GIF

Zmniejsz animowany plik GIF w przeglądarce: obniż wymiary, zachowaj mniej klatek i dopasuj jakość kodowania. Zobacz podgląd pętli przed pobraniem.

Narzędzie do zmiany rozmiaru obrazów do social media

Zmień rozmiar jednego obrazu do wbudowanych presetów dla Instagramu, Facebooka, X, LinkedIn, YouTube, Pinteresta i TikToka. Sprawdź każdy PNG i pobierz potrzebne formaty.

Wektoryzator PNG do SVG

Przekształcaj obrazy rastrowe PNG w ścieżki SVG bezpośrednio w przeglądarce. Najlepsze do logo, ikon i rysunków liniowych. Steruj progiem, liczbą kolorów i wygładzaniem.

Kompresor obrazów

Kompresuj obrazy JPG, PNG i WebP, aby zmniejszyć rozmiar pliku przy zachowaniu jakości wizualnej. Wszystko działa w przeglądarce, bez przesyłania plików.