Что входит в палитру цветов бренда?

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

Контраст не менее важен, чем эстетика. Руководство по обеспечению доступности веб-контента (WCAG) рекомендует коэффициент контрастности не менее 4,5:1 для обычного текста и фона или 7:1 для более строгого уровня AAA.

Описание инструмента

Опишите бренд в поле «О вашем бренде»: чем он занимается, для кого предназначен и какое впечатление должен производить. Выберите характер бренда (Профессиональный, Игривый, Роскошный, Минималистичный, Смелый или Естественный) или оставьте вариант «Определить по описанию» — ИИ определит характер бренда по вашему тексту.

Вы получите пять цветов с названиями: Основной, Вторичный, Акцентный, Фон и Текст. В разделе «Формат вывода» можно переключать значения между HEX, RGB, HSL, CMYK и другими форматами. У каждого цвета есть кнопка копирования. В руководстве по использованию объясняется, как применять каждый цвет, а раздел с переменными CSS содержит блок кода, который можно вставить в таблицу стилей. ИИ получает указание обеспечить контрастность текста и фона на уровне 7:1 или выше, а основного и акцентного цветов — на уровне 3:1 или выше.

Пример

Для описания «Местная обжарочная кофейня в Портленде. Тёплая, гостеприимная и экологичная» вы можете получить кофейно-коричневый основной цвет, кремовый фон и терракотовый акцент, а также такие переменные CSS:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Возможности

  • Пять цветов с чёткими ролями, названием и примечанием по использованию каждого
  • Шесть вариантов характера бренда или вариант, выбранный по вашему описанию
  • Копирование цветов в нужном формате или всей палитры в виде переменных CSS

Ограничения

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