Веб-сайты и приложения
Выберите цвета бренда, фона и акцентные цвета, а затем вставьте их прямо в CSS-переменные, Tailwind или тему Android.
Генератор цветовых палитр — создавайте гармоничные цветовые палитры и экспортируйте их в виде кода.
Выберите базовый цвет и цветовую схему, чтобы получить сбалансированную палитру из 3–8 цветов. Зафиксируйте понравившиеся варианты, проверьте, насколько хорошо читается белый и черный текст на каждом из них, а затем скопируйте коды в виде CSS-переменных, Tailwind, файла colors.xml для Android или Jetpack Compose. Всё работает прямо в браузере, а сохраненные палитры остаются на вашем устройстве.
Создать палитру
Работает в браузере
Ваша палитра
Выберите понравившиеся цвета, а затем нажмите «Генерировать», чтобы изменить остальные. Щелкните по шестнадцатеричному коду, чтобы скопировать его. Щелкните по палитре и нажмите клавишу «Пробел», чтобы сгенерировать.
Экспорт в виде кода
Сохраненные палитры
Сохраненных палитр пока нет. Нажмите «Сохранить палитру», чтобы сохранить её на этом устройстве.
Руководство
Руководство по цветовой палитре: схемы, контраст и экспорт в код
Узнайте, как работают цветовые схемы, проверьте контрастность текста и примените свою палитру в реальном проекте.
Что такое генератор цветовой палитры?
Цветовая палитра — это небольшой набор цветов, которые хорошо сочетаются друг с другом. Дизайнеры составляют их на основе цветового круга: выбирают один исходный цвет, а затем подбирают другие оттенки под фиксированными углами от него, чтобы результат выглядел гармонично, а не хаотично.
This generator does that for you. Choose a base colour and a scheme, lock the colours you like, and export the result as CSS, Tailwind, Android XML or Jetpack Compose code. Each swatch also shows its RGB and HSL values and how readable white and black text would be on it. Hex values are base 16: the Binary to Decimal Converter shows how they relate to ordinary numbers.
Почему люди создают цветовые палитры
Слайды, плакаты и документы
Подберите гармоничный набор цветов для презентации, поста в соцсетях или полиграфического дизайна, не прибегая к догадкам.
Диаграммы и информационные панели
Выберите контрастные, но гармоничные цвета для рядов данных и проверьте контрастность, чтобы надписи оставались разборчивыми.
Объяснение цветовых схем
| Схема | Как это устроено | Почувствуйте и воспользуйтесь |
|---|---|---|
| Аналогичный | Соседние оттенки, разнесённые на 30° | Спокойный и естественный. Хорошо подходит для фона и неброского интерфейса. |
| Монохроматический | Один оттенок, разная яркость | Чистый и целостный. Подходит для минималистичных дизайнов. |
| Дополнительный | Два противоположных оттенка, расположенные под углом 180° друг к другу | Высокая контрастность. Хорошо подходит для яркого акцентного цвета. |
| Раздельное комплементарное | Оттенок плюс два оттенка, расположенные по обе стороны от его противоположного | Контраст, при котором напряжение меньше, чем в случае комплементарности. |
| Триадический | Три оттенка, расположенные под углом 120° друг к другу | Яркий и сбалансированный. Требуется один доминирующий цвет. |
| Четырёхсторонний (квадратный) | Четыре оттенка, расположенные с интервалом 90° | Насыщенный и разнообразный. Лучше всего смотрится с одним основным цветом. |
Как пользоваться генератором цветовой палитры
- Выберите основной цвет с помощью палитры цветов или введите шестнадцатеричный код. Выберите цветовую схему и количество цветов.
- Нажмите «Генерировать», чтобы попробовать новую случайную основу. Нажмите «Зафиксировать» под любым цветом, который хотите сохранить.
- Обратите внимание на указания по контрасту на каждом образце. Стремитесь к соотношению 4,5:1 или выше во всех случаях, когда текст располагается на цветном фоне.
- Щелкните по шестнадцатеричному коду, чтобы скопировать его, или откройте меню «Экспорт как код» и выберите CSS, Tailwind, Android или Compose.
- Нажмите «Сохранить палитру», чтобы сохранить её на этом устройстве, «Скопировать ссылку», чтобы поделиться ею, или «Скачать PNG», чтобы получить изображение.
Цветовой контраст и доступность
Коэффициент контрастности
Число в диапазоне от 1:1 (идентичные) до 21:1 (чёрный на белом), которое отражает соотношение яркости двух цветов.
WCAG AA
Не менее 4,5:1 для обычного текста и 3:1 для крупного текста (около 24 пикселей или 19 пикселей жирным шрифтом). Это стандартное требование, установленное законодательством и принятое на практике.
WCAG AAA
Не менее 7:1 для обычного текста. Более строгий уровень, который помогает людям со слабым зрением.
Не полагайтесь только на цвет
Примерно у одного из двенадцати мужчин наблюдается та или иная форма нарушения цветового зрения. Сочетайте цвета с надписями, значками или узорами, чтобы не утратить смысл.
Как выглядят форматы экспорта
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
В Android Studio вставьте XML-код в res/values/colors.xmlили добавьте строки Compose в свой Color.kt файл. Значение Compose содержит префикс FF, обозначающий полную непрозрачность (alpha).
Советы по выбору удачных палитр
- Используйте один основной цвет, один или два дополнительных цвета и один нейтральный. Равные доли каждого цвета обычно создают перегруженный визуальный эффект.
- Прежде чем окончательно определиться с палитрой, проверьте контрастность текста на каждом цвете фона.
- Определитесь с цветовой гаммой вашего бренда и разрабатывайте варианты, исходя из неё.
- Посмотрите на палитру на реальном экране в тех размерах, в которых она будет отображаться, а не только в виде образцов.
- Проверьте также в темном режиме: цвет, который хорошо смотрится на белом фоне, может не подойти на фоне, близком к черному.
Ограничения и конфиденциальность
Конфиденциальность
Палитры формируются в вашем браузере. Сохраненные палитры хранятся в локальном хранилище вашего браузера на вашем устройстве и никогда не загружаются на сервер.
Ограничения
Цвета отображаются в цветовом пространстве sRGB, и их восприятие зависит от экрана. Палитры представлены в качестве рекомендаций, основанных на теории цвета, и не заменяют тестирование с участием реальных пользователей. Данный инструмент не проверяет удобство использования для людей с цветовой слепотой, за исключением контрастности.
Часто задаваемые вопросы
Часто задаваемые вопросы о генераторе цветовой палитры
Как работает генератор цветовой палитры?
Выберите базовый цвет и цветовую схему, и инструмент с помощью цветового круга преобразует базовый цвет в набор подходящих оттенков. Нажмите «Генерировать», чтобы получить новый случайный базовый цвет, или зафиксируйте понравившиеся цвета и сгенерируйте остальные.
В чём заключается разница между этими цветовыми схемами?
В аналогичной комбинации используются соседние оттенки, что создает спокойный образ. В комплементарной комбинации сопоставляются противоположные оттенки для создания контраста. В раздельно-комплементарной и триадной комбинациях используются три равномерно распределенных оттенка, в тетрадной — четыре, а в монохромной — один оттенок с варьируемой яркостью.
Как сохранить один цвет, изменив остальные?
Нажмите «Заблокировать» под любым образцом. Заблокированные цвета остаются неизменными при нажатии кнопки «Сгенерировать», при смене фона или при смене схемы. Редактирование образца с помощью кнопки «Редактировать» также приводит к его блокировке.
Что означают эти цифры, характеризующие контраст?
На каждом образце показан коэффициент контрастности для белого и чёрного текста на фоне данного цвета. Согласно WCAG, для обычного текста (уровень AA) требуется коэффициент не менее 4,5:1, для более строгого уровня AAA — 7:1, а для крупного текста — 3:1.
Какие форматы экспорта доступны?
Список HEX, переменные CSS, переменные SCSS, массив JSON, конфигурация Tailwind, файл colors.xml для Android и значения цветов Jetpack Compose — так что вы можете сразу вставить палитру в проект.
Можно ли поделиться своей палитрой или сохранить её?
Да. Функция «Копировать ссылку» создаёт веб-адрес, по которому можно снова открыть ту же палитру цветов, функция «Скачать PNG» позволяет сохранить изображение палитры, а функция «Сохранить палитру» позволяет сохранить в этом браузере до 12 палитр.
Почему цвета выглядят по-другому на другом экране?
Экраны различаются по яркости, точности цветопередачи и цветовому профилю. Шестнадцатеричные коды описывают цвет в цифровом виде, но то, как он будет выглядеть, зависит от конкретного дисплея. Проверьте важные цвета на устройствах, которые будут использовать ваши пользователи.
Сколько цветов должно быть в палитре?
Во многих дизайнах хорошо смотрится комбинация из пяти цветов: один основной цвет, один или два вспомогательных цвета, светлый фон и тёмный цвет текста. С помощью этого инструмента можно выбрать от 3 до 8 цветов.
Генератор бесплатный, и сохраняются ли мои данные?
Это бесплатно. Палитры создаются прямо в вашем браузере. Сохраненные палитры остаются на вашем устройстве в локальном хранилище и никогда не загружаются в сеть.
Можно ли разместить ссылку на палитру?
Да. Добавьте к адресу страницы параметр ?colors=1f3a5f-ff5733-00aa88, указав от 2 до 8 шестнадцатеричных кодов, разделенных дефисами, без знака #.
От пользователей этого инструмента
Отзывы
Загрузка отзывов…
Продолжай
Еще больше инструментов в наборе
На главной странице представлены ещё десятки бесплатных инструментов, для использования которых не требуется ключ API.
Конвертер упаковок
Преобразование текста в верхний регистр, формат camelCase, формат title case, формат snake_case и другие.
Открыть инструментСчетчик слов
Подсчитывайте количество слов, символов, предложений и время чтения по мере ввода текста.
Открыть инструментУдаление пробелов
Удалите лишние пробелы и приведите в порядок неаккуратные интервалы между строками.
Открыть инструментПроверка различий в тексте
Сравните два текста построчно, чтобы увидеть, что изменилось.
Открыть инструмент