Softonic

Палитра цветов Material Design

Шаг 1 / 3 Выберите семейство цветов

Фиксированная палитра Material Design 2014 года (Material Design 2). В Material 3 вместо неё используются создаваемые тональные палитры.

Выберите семейство цветов

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

Палитра Material Design включает 19 цветовых семейств, от красного, розового и фиолетового до серого и сине-серого; каждое из них имеет градацию от оттенка 50 (бледный) до 900 (почти чёрный), а также дополнительные акцентные оттенки A100–A700. Этот инструмент размещает все образцы в сетке и позволяет копировать любое значение в форматах HEX, RGB, HSL или в виде имени токена Material для использования в Tailwind, переменных CSS, iOS UIColor или цветовых ресурсах Android.

Как пользоваться палитрой

  1. 1

    Просмотрите сетку

    Семейства расположены по вертикали слева, а оттенки, по горизонтали сверху, от 50 до 900.

  2. 2

    Нажмите на образец

    Вы увидите HEX, RGB, HSL и каноническое имя токена Material (например, Indigo 500).

  3. 3

    Скопируйте нужный формат

    Один клик копирует точную строку: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Проверьте контраст

    На панели показан коэффициент контрастности по WCAG относительно белого и чёрного, чтобы выбрать доступные цвета текста.

Шкала оттенков

Оттенок Применение
50 Фон при наведении, бледные поверхности
100 Фон чипов, заливки с низким акцентом
200 Отключённые состояния, вторичные поверхности
300 Границы, разделители
400 Вторичный текст на светлом фоне
500 Цвет по умолчанию / основной, базовый уровень
600 Интерактивные состояния (наведение, нажатие)
700 Заголовки, сильный акцент
800 Тёмный текст на светлом фоне
900 Элемент с наибольшим контрастом (почти чёрный)
A100 Светлый акцент
A200 Акцент светлее стандартного
A400 Акцент (часто «яркий» фирменный акцент бренда)
A700 Глубокий акцент

Семейства в палитре Material

Красный, розовый, фиолетовый, тёмно-фиолетовый, индиго, синий, голубой, циан, сине-зелёный, зелёный, светло-зелёный, лаймовый, жёлтый, янтарный, оранжевый, тёмно-оранжевый, коричневый, серый, сине-серый.

Коричневый, серый и сине-серый не имеют акцентных оттенков, это нейтральные семейства.

Выбор основного цвета

Согласно спецификации, в качестве основного цвета предлагается оттенок 500, для более тёмного варианта, 700 (используется в строке состояния на Android), а для второстепенных действий, акцентный оттенок A200 или A400. Это соглашение, а не правило: современный Material 3 (динамический цвет) формирует палитры из единого исходного цвета, а не выбирает из фиксированных шкал.

Проверка доступности

  • Основной текст: коэффициент контрастности ≥ 4,5:1 по отношению к фону (WCAG AA).
  • Крупный текст (18 pt+ полужирный или 24 pt+ обычный): ≥ 3:1.
  • Компоненты интерфейса и графические объекты: ≥ 3:1.

По умолчанию палитра не гарантирует безопасный контраст. Жёлтый 500 на белом грубо не проходит по WCAG. Всегда проверяйте коэффициент перед публикацией сочетания, инструмент показывает его прямо на месте.

Поддерживаемые форматы

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (современный синтаксис) или rgb(63, 81, 181) (устаревший).
  • HSL: hsl(231 48% 48%).
  • Токен Material: Indigo 500, удобно для дизайн-документов и Figma.
  • Tailwind: indigo-500, вставьте прямо в атрибут класса, если ваша тема Tailwind использует шкалу Material.
  • XML цвета Android: <color name="indigo_500">#FF3F51B5</color>, формат ARGB.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Часто задаваемые вопросы

Инструмент воспроизводит фиксированную палитру Material Design, опубликованную Google в 2014 году и позднее описанную на сайте Material Design 2. Он не создаёт тональные палитры Material 3 из исходного цвета. Используйте его для классических нумерованных и акцентных образцов.

Коричневый, серый и сине-серый, нейтральные цвета и не участвуют в акцентных сочетаниях. В спецификации оттенки A100–A700 для них просто отсутствуют.

Стандартная палитра Tailwind вдохновлена Material, но не идентична ей. Если вам нужны точные цвета Material, расширьте theme.extend.colors значениями Material и обращайтесь к ним как material-indigo-500 в именах классов.

По соглашению, да, но ничто не мешает использовать в качестве основного оттенок 700 или акцент. Смысл соглашения о 500 в том, чтобы иметь надёжный базовый оттенок с 8 шагами в каждую сторону для вариаций.

Сопутствующие инструменты

Изменение размера изображений

Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.

Генератор QR-кодов

Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.

Генератор мемов

Добавьте верхнюю и нижнюю подписи к JPG, PNG или WebP. Настройте шрифт, цвета и обводку, затем скачайте статичный мем в PNG.

Генератор штрихкодов

Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.