Куин Маркетинг
Куин Маркетинг Подобрать услугу

Что можем сделать

Все услуги

Ярославль. Работаем по всей России.

Оставить заявкуПозвонить

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

Задайте цвет бренда — соберём палитру для сайта и соцсетей: фон, текст и акценты. Под каждой парой цветов — контраст по формуле WCAG: видно, где текст читается, а где теряется.

пример

Палитра

  • Фон #FFF8F7
  • Мягкий фон #C6F7F0
  • Текст #2E1913
  • Акцент #B84A2B
  • Второй цвет #00BFB3
  • Третий цвет #1D8AD9

Текст на фоне — 15,8 : 1, читается.

Пар, где контраста не хватает: 1 из 5. Ниже — читаемые оттенки.

К проверке контраста

Цвет бренда.

Возьмите из логотипа или брендбука. Нет своего — начните с готового.

Схема сочетания

Два тона по бокам от противоположного, 150° и 210°. Ярко, но мягче, чем напротив.

Тема
Заменить цвет по роли

Если какой-то цвет уже есть в фирменном стиле — поставьте его. Контраст пересчитается.

Цвета считаются в браузере и никуда не отправляются.

Как это выглядит.

Первый экран сайта и пост в соцсети в цветах палитры. Так проще увидеть, не спорят ли цвета.

Контраст.

Читается ли цвет на своём фоне — по формуле WCAG. Тексту нужно 4,5 : 1, значкам и крупному тексту — 3 : 1.

  • Текст на фоне

    15,8 : 1 AAA нужно 4,5 : 1

    читается даже мелкий текст

    Откуда цифра

    Яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05:

    (0,951 + 0,05) / (0,013 + 0,05) = 15,8

  • Текст на мягком фоне

    14,2 : 1 AAA нужно 4,5 : 1

    читается даже мелкий текст

    Откуда цифра

    Яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05:

    (0,848 + 0,05) / (0,013 + 0,05) = 14,2

  • Надпись на кнопке

    5,18 : 1 AA нужно 4,5 : 1

    обычный текст читается

    Откуда цифра

    Яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05:

    (1,000 + 0,05) / (0,153 + 0,05) = 5,18

  • Ссылки и текст цветом акцента

    4,94 : 1 AA нужно 4,5 : 1

    обычный текст читается

    Откуда цифра

    Яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05:

    (0,951 + 0,05) / (0,153 + 0,05) = 4,94

  • Второй цвет: значки, плашки, графика

    2,19 : 1 Не читается нужно 3 : 1

    на этом фоне цвет теряется

    Откуда цифра

    Яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05:

    (0,951 + 0,05) / (0,405 + 0,05) = 2,19

    Читаемый оттенок: #00A197

Палитра есть. Нужен фирменный стиль?

Соберём цвета, шрифты, логотип и правила применения — чтобы сайт, сообщество и вывеска выглядели как одно целое.

Обсудить фирменный стиль Брендинг и фирменный стиль — от 25 000 ₽

Сначала логотип — от 8 000 ₽

С этим вы придёте на разговор

Цвет бренда
#B84A2B
Схема
Раздвоенный
Текст на фоне
15,8 : 1

Как устроен генератор палитры.

Шесть цветов с ролями: где какой применять, уже решено. Цвет бренда остаётся ровно таким, каким вы его ввели.

  • Фон — страницы, карточки, обложки.
  • Мягкий фон — плашки, блоки, подсветка строк.
  • Текст — заголовки и основной текст.
  • Акцент — кнопки, ссылки, главное действие.
  • Второй цвет — значки, плашки, графики.
  • Третий цвет — иллюстрации и детали.

Цвета строятся в пространстве OKLCH. В нём одинаковая светлота выглядит одинаково светлой при любом тоне — в привычном HSL жёлтый и синий одной «светлоты» на глаз совсем разные. Фон и текст берут тон бренда почти без насыщенности, второй и третий цвет — тоны схемы сочетания.

Светлоту второго и третьего цвета генератор берёт между светлотой акцента и той, при которой их тон самый насыщенный: иначе жёлтый рядом с тёмно-синим выходит грязно-горчичным. Цвет, который экран не может показать, приводится к ближайшему возможному — с той же светлотой и тем же тоном.

Контраст: что значат 4,5 и 3.

Рекомендации WCAG 2.1 сравнивают не цвета, а их яркость: насколько один цвет светлее другого.

Контраст = (яркость светлого + 0,05) / (яркость тёмного + 0,05)

В примере, текст на фоне: (0,951 + 0,05) / (0,013 + 0,05) = 15,8.

  • 4,5 : 1 — обычный текст (уровень AA). Ниже читать трудно, особенно с телефона на солнце.
  • 3 : 1 — крупный текст от 24 пикселей (или 19 жирным), значки, рамки полей, графики.
  • 7 : 1 — строгий уровень AAA для обычного текста.
  • 21 : 1 — чёрный на белом, больше не бывает. 1 : 1 — цвет на самом себе.

Схемы сочетаний цветов.

Схема решает, где по кругу тонов стоят второй и третий цвет.

  • Один тон. Всё в тоне бренда, разной светлоты. Спокойно и строго.
  • Соседние. Тоны рядом по кругу, ±30°. Мягко, без спора цветов.
  • Напротив. Тон напротив, 180°. Самый сильный контраст двух цветов.
  • Раздвоенный. Два тона по бокам от противоположного, 150° и 210°. Ярко, но мягче, чем напротив.
  • Триада. Три тона через 120°. Живо и разнообразно — нужен главный цвет.

Чего генератор не знает.

Генератор считает цвета и контраст. Ваш бренд и вашу аудиторию он не знает.

  • Что значит цвет для ваших клиентов. Ассоциации зависят от ниши и культуры: один и тот же зелёный у аптеки и у банка читается по-разному.
  • Как цвета выглядят в печати. Экран показывает RGB, типография печатает CMYK или Pantone. Цвета для печати подбирают отдельно, на пробе.
  • Что у конкурентов. Если все в нише синие, синий не поможет выделиться. Посмотрите на соседей до выбора.
  • Как цвет ляжет на фото. Фотографии работ и людей приносят свои цвета — проверьте палитру рядом с ними.

Вопросы о палитре.

Как подобрать цвета для бренда?

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

Что такое контраст 4,5 : 1?

Это порог из рекомендаций WCAG 2.1 для обычного текста: яркость светлого цвета плюс 0,05, делённая на яркость тёмного плюс 0,05, должна быть не меньше 4,5. Для крупного текста и значков достаточно 3 : 1, для строгого уровня AAA нужно 7 : 1. Чёрный на белом даёт 21 : 1 — больше не бывает.

Почему акцентный цвет не меняется?

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

Чем отличаются схемы сочетаний?

Тем, как далеко по кругу тонов стоят второй и третий цвет. Один тон — всё в цвете бренда, соседние — на 30° по сторонам, противоположный — напротив, раздвоенный — два тона по бокам от противоположного, триада — три тона через 120°.

Как перенести палитру на сайт?

Кнопка «Скопировать CSS» кладёт в буфер шесть переменных — их можно вставить в стили сайта. HEX-коды копируются списком для дизайнера, картинка с палитрой скачивается для брендбука или переписки.

Можно ли сделать по палитре фирменный стиль?

Палитра — одна часть фирменного стиля. Нужны ещё логотип, шрифты, правила применения и примеры на носителях. Это делаем в услуге «Брендинг и фирменный стиль».

Об этом инструменте

Куин Маркетинг

Генератор сделан в агентстве. Формула контраста — из рекомендаций WCAG 2.1, цвета — в пространстве OKLCH.

Палитра — отправная точка, а не фирменный стиль. Проверьте её на ваших фотографиях, логотипе и в печати.

Все инструменты

Нужна помощь с фирменным стилем?

Расскажите, чем занимаетесь и какой цвет уже есть, — предложим, с чего начать: логотип, палитра или полный стиль.

С чего начать сообщение

  • Что за бизнес и для кого вы работаете.
  • Что хотите сделать или изменить.
  • Ссылка на сайт или сообщество, если есть.
Оставить заявку

Оставьте заявку — мы свяжемся с вами. Ссылка на эту страницу добавится автоматически.

Подготовить первое сообщение

Можно скопировать заготовку и заменить многоточия. Если задача пока не ясна, просто опишите ситуацию.

Здравствуйте! Хочу обсудить проект.
Мой бизнес и город: …
Что хочу сделать: …
Сайт или сообщество: …
Смотрел эту страницу: https://kuintim.ru/tools/color-palette/

Изображение проекта

Загружаем изображение…