Генератор палитры цветов

Палитра помогает быстро получить рабочие варианты для интерфейса от основного цвета бренда. Введите утверждённый HEX и сравните светлый, тёмный и противоположный оттенки рядом с настоящими карточками, кнопками и текстом. Значения выдаются как CSS-переменные, чтобы удобно перенести их в дизайн-систему. Проверка контраста вычисляет относительную яркость и помогает выбрать между чёрным и белым текстом на основном фоне.

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

Укажите цвет в формате #RRGGBB. Сравните сочетания на реальном макете.

Начните с кнопки «Вставить пример», чтобы увидеть ожидаемый формат ввода. Затем замените демонстрационные значения своими данными в полях «Основной цвет, HEX». Нажмите «Получить результат». Если формат неверный, инструмент покажет ошибку на русском языке; исправьте исходные данные и повторите действие.

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

Для #2a6fb3 будут предложены дополнительные и соседние оттенки.

#2a6fb3

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

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

Технически корректный результат ещё не означает, что он подходит бизнес-логике сайта. Например, URL может быть синтаксически верным, но вести на удалённую страницу; XML может быть хорошо сформированным, но не соответствовать настройкам конкретной площадки. После автоматической проверки откройте итог в целевой системе или браузере и сравните его с ожидаемым поведением.

Если инструмент сообщает об ошибке, начните с названного поля или строки. При обработке файлов проверьте кодировку, переносы строк, кавычки и спецсимволы. Они часто попадают в данные при экспорте из Excel, CMS или интеграции и могут менять смысл результата.

Вывод содержит непрозрачные sRGB-цвета. Прозрачность, изображения под текстом, современные широкие цветовые пространства и индивидуальные особенности зрения инструмент не моделирует. Контрастное отношение применимо к паре готовых цветов; для полупрозрачного слоя сначала вычислите фактический итоговый фон. Не утверждайте палитру только потому, что числа выглядят гармонично.

Для повторяющихся задач сохраните входной пример и ожидаемый результат как проверочный сценарий. После обновления сайта или формата данных прогоните его снова: небольшое изменение шаблона экспорта иногда меняет поведение без явной ошибки. Если результат используется в производственной системе, проверьте не только синтаксис, но и последствия на нескольких реальных записях. При публикации конфигурации или метатегов сравните исходный HTML и ответ сервера с тем, что вы видите в форме.

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

Вывод содержит непрозрачные sRGB-цвета. Прозрачность, изображения под текстом, современные широкие цветовые пространства и индивидуальные особенности зрения инструмент не моделирует. Контрастное отношение применимо к паре готовых цветов; для полупрозрачного слоя сначала вычислите фактический итоговый фон. Не утверждайте палитру только потому, что числа выглядят гармонично.

Сохраните исходный пример и результат рядом с задачей, чтобы при следующем обновлении можно было повторить проверку. Откройте итоговый файл в целевой системе и сравните не только отсутствие ошибки, но и число обработанных записей, конечные адреса, отображение кириллицы и поведение на мобильном экране, если результат используется в интерфейсе. Для конфигурации сервера сначала примените изменения на тестовом окружении и выполните запрос к реальному URL. Для данных каталога выберите несколько контрольных SKU с разными ценами и остатками. Если расхождение найдено, исправляйте источник данных или шаблон генерации, а не только один скачанный файл. Так следующая автоматическая выгрузка не вернёт проблему.

Поля этого инструмента обрабатываются в вашем браузере. Содержимое не отправляется на сервер Pugofka, а локальный файл читается только после вашего выбора. Для XML определяется кодировка из объявления или BOM; при отсутствии подсказки сначала пробуется UTF-8, затем Windows-1251. Виджет скрыт от записи содержимого в Вебвизоре; в Яндекс Метрику передаются slug инструмента и тип действия — открытие, первое взаимодействие, запуск, получение результата, копирование или скачивание.

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

Используйте результат как рабочий черновик: вставьте его в конфигурацию, страницу или документ и повторно проверьте там, где он будет применяться. Если вы меняете индексируемые страницы, обновите связанные ссылки и карту сайта. Для миграции URL дополнительно запустите сетевую проверку редиректов, чтобы увидеть фактические HTTP-ответы после публикации.

Если задача связана с каталогом, импортом или поддержкой интернет-магазина, команда Pugofka может помочь встроить такую проверку в регулярный обмен данными и исправить источник ошибок. Одноразовая онлайн-утилита полезна для диагностики, а постоянный поток данных обычно требует автоматической проверки на стороне проекта.