Softonic

Próbnik kolorów Material Design

Krok 1 / 3 Wybierz rodzinę kolorów

Stała paleta Material Design z 2014 roku (Material Design 2). Material 3 korzysta z generowanych palet tonalnych.

Wybierz rodzinę kolorów

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Paleta Material Design definiuje 19 rodzin kolorów, od czerwonego, różowego i fioletowego po szary oraz niebiesko-szary, a każda z nich obejmuje gradient od odcienia 50 (jasny) do 900 (niemal czarny), wraz z opcjonalnymi odcieniami akcentowymi A100–A700. Ten próbnik rozmieszcza wszystkie próbki kolorów w siatce i pozwala skopiować dowolną wartość w formacie HEX, RGB, HSL lub jako nazwę tokenu Material do użycia w Tailwind, zmiennych CSS, iOS UIColor lub zasobach kolorów systemu Android.

Jak korzystać z palety

  1. 1

    Przejrzyj siatkę

    Rodziny biegną w dół po lewej stronie; odcienie rozciągają się u góry od 50 do 900.

  2. 2

    Dotknij próbki

    Zobacz HEX, RGB, HSL oraz standardową nazwę tokenu Material (np. Indigo 500).

  3. 3

    Skopiuj potrzebny format

    Jedno kliknięcie kopiuje dokładny ciąg: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Sprawdź kontrast

    Panel pokazuje współczynnik kontrastu WCAG względem bieli i czerni, aby dobrać dostępne kolory tekstu.

Drabina odcieni

Odcień Zastosowanie
50 Tła po najechaniu, jasne powierzchnie
100 Tła chipów, wypełnienia o niskim nacisku
200 Stany nieaktywne, powierzchnie drugorzędne
300 Obramowania, separatory
400 Tekst drugorzędny na jasnych tłach
500 Kolor domyślny / podstawowy, baza
600 Stany interaktywne (najechanie, wciśnięcie)
700 Nagłówki, silny nacisk
800 Ciemny tekst na jasnych tłach
900 Element o najwyższym kontraście (niemal czarny)
A100 Jasny akcent
A200 Akcent jaśniejszy niż domyślny
A400 Akcent (często „jasne“ wyróżnienie marki)
A700 Głęboki akcent

Rodziny w palecie Material

Czerwony, różowy, fioletowy, ciemnofioletowy, indygo, niebieski, jasnoniebieski, cyjan, morski, zielony, jasnozielony, limonkowy, żółty, bursztynowy, pomarańczowy, ciemnopomarańczowy, brązowy, szary, niebiesko-szary.

Brązowy, szary i niebiesko-szary nie mają odcieni akcentowych, to rodziny neutralne.

Wybór koloru podstawowego

Specyfikacja proponuje 500 jako kolor podstawowy, 700 jako ciemniejszy wariant (używany na pasku stanu w systemie Android) oraz akcent A200 lub A400 dla działań drugorzędnych. To konwencja, a nie reguła, nowoczesny Material 3 (kolor dynamiczny) wyprowadza palety z jednego koloru bazowego, zamiast wybierać ze stałych gradientów.

Punkt kontrolny dostępności

  • Tekst podstawowy: współczynnik kontrastu ≥ 4,5:1 względem tła (WCAG AA).
  • Duży tekst (18 pt+ pogrubiony lub 24 pt+ zwykły): ≥ 3:1.
  • Komponenty interfejsu i obiekty graficzne: ≥ 3:1.

Domyślnie paleta nie jest bezpieczna pod względem kontrastu. Żółty 500 na bieli poważnie nie spełnia wymogów WCAG. Zawsze sprawdzaj współczynnik przed wdrożeniem kombinacji, próbnik pokazuje go na bieżąco.

Obsługiwane formaty

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (nowoczesna składnia) lub rgb(63, 81, 181) (starsza).
  • HSL: hsl(231 48% 48%).
  • Token Material: Indigo 500, przydatny do dokumentacji projektowej i Figmy.
  • Tailwind: indigo-500, wstaw bezpośrednio do atrybutu klasy, jeśli Twój motyw Tailwind używa skali Material.
  • XML koloru Android: <color name="indigo_500">#FF3F51B5</color>, format ARGB.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Najczęściej zadawane pytania

Narzędzie odwzorowuje stałą paletę Material Design opublikowaną przez Google w 2014 roku i później opisaną w serwisie Material Design 2. Nie tworzy palet tonalnych Material 3 na podstawie koloru źródłowego. Użyj go do klasycznych próbek numerowanych i akcentowych.

Brązowy, szary i niebiesko-szary to kolory neutralne i nie biorą udziału w zestawieniach akcentowych. Specyfikacja po prostu pomija dla nich zakres A100–A700.

Domyślna paleta Tailwind jest inspirowana Material, ale nie jest identyczna. Jeśli chcesz uzyskać dokładne kolory Material, rozszerz theme.extend.colors o wartości Material i odwołuj się do nich jako material-indigo-500 w nazwach klas.

Konwencja mówi, że tak, ale nic nie stoi na przeszkodzie, aby jako podstawowy zastosować 700 lub akcent. Konwencja 500 polega na posiadaniu wiarygodnego odcienia bazowego z 8 krokami w każdą stronę na potrzeby wariacji.

Powiązane narzędzia

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.

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.

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.

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.

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.

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.