Цвет

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

«Мне нравится, когда цвет это оружие, которое достают из ножен только в крайнем случае, в ситуации смертельной угрозы или чтобы нанести зрителю coup de grâce»
© Олег Пащенко

Каждый цвет в интерфейсах Контура решает определенную задачу:

  • Черный, белый, и оттенки серого — рабочие цвета для вывода и структурирования информации на экране.
  • Смысловые цвета: зеленый, желтый, красный — привлекают внимание и помогают быстрее считывать информацию с экрана.
  • Фирменный цвет — помогает сервисам Контура отличаться друг от друга, а пользователю понимать, куда он попал.

Примеры раскладок цветов в интерфейсах Контура

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

Черный, белый, серый

Мы используем «чистый» серый цвет. Он выглядит нейтрально и сочетается с остальными цветами в интерфейсе.

Фон

В большинстве сервисов Контура область контента — это белый лист с тенью, отделяющей его от белого фона страницы.

Серый фон делит контент на смысловые блоки и группирует элементы на странице.

Для фона мы используем три цвета:

#FFFFFF

0%

Белый

#F6F6F6

5%

Серый

#EBEBEB

10%

Темно-серый

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

«Плохой монитор» — так дизайнеры Контура называют монитор с дешевой некачественной матрицей или просто плохо настроенным изображением. Такой монитор плохо передает оттенки. Светлые оттенки сливаются в белый, а темные — в черный.

Мы стараемся делать свои интерфейсы доступными даже на плохих мониторах.

Линия

Цвет разделительной линии #EBEBEB. Чтобы линия была контрастной и приобретала оттенок фона на котором находится — используйте прозрачность 10% черного #000.

#EBEBEB

10%

Разделительная линия

Линия используется:

  • для разделения смысловых частей на экране;
  • для усиления контраста на границе двух фонов;
  • в качестве однопиксельной тени.

Текст

В качестве базового «черного» цвета для текста, используйте #222 или 80% черного.

Цвет #222 на фоне #FFF дает контраст 15,9:1 по стандарту Web Content Accessibility Guidelines 2.0

Этот стандарт содержит рекомендации, как сделать веб-контент доступным для широкого круга пользователей, в том числе для людей с ограниченными возможностями. Согласно стандарта, минимальный контраст фона и текста должен быть 4,5:1.

Приложения для проверки контраста: Mac OS Web.

Для отображения вспомогательной информации используйте 2 оттенка:

#222222

86.5%

Основной текст

#858585

48%

Дополнительный текст

#ADADAD

32%

Неактивный текст
  • Основной — цвет для набора основного текста, текста в активных контролах, текста в полях ввода, надписей и иконок на кнопках.
  • Дополнительный — для подписей, комментариев, заголовков таблиц.
  • Неактивный — для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.

На темном фоне набирайте текст белым цветом #FFF. Для дополнительного и неактивного текста используйте прозрачность, прозрачный белый текст приобретет оттенок фона, на котором расположен:

#FFFFFF

100%

Основной текст

#FFFFFF

48%

Дополнительный текст

#FFFFFF

32%

Неактивный текст

Смысловые цвета

Цвет ссылок

В сервисах Контура стандартный цвет ссылок — синий. Этим же цветом можно окрашивать элементы интерфейса с которыми можно взаимодействовать.

#CDEDFF

Фон

#1C7EDF

Плашка кликабельная, фокус

#1874CF

Текст, иконки

Иногда фирменный цвет сервиса можно использовать вместо стандартного цвета ссылок. Для этого фирменный цвет:

  • не должен быть похож на красный, зеленый и оранжевый, чтобы не нести дополнительный смысл;
  • должен быть насыщенным: контрастным фону и тексту.

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

Зеленый и красный

Зеленый и красный цвета зарезервированы для обозначения положительного и негативного контекста.

#FFDDD6

Фон

#DD473B

Плашка

#CB3D35

Текст

#D7F8AE

#538A1B

#477916

Зеленый — для сообщений об успехе, удачном завершении, красный — для сообщений об ошибке, невозможности продолжить, неудачном завершении.

Эти цвета нельзя использовать с другим смыслом. Например, нельзя использовать красный, чтобы привлечь внимание к акциям, скидкам, обновлениям или чему-то подобному, что не прерывает сценарий и не является критически важным.

Акцентный цвет

Чтобы привлечь внимание пользователя к важной информации, касающейся его работы в интерфейсе, используйте желто-оранжевый цвет.

#FFEEC2

Фон

#FCB73E

Плашка

#EF8B17

Текст

Акцентный цвет используется:

  • для подсветки только что добавленной или изменившейся строки;
  • в оповещениях о технических работах;
  • при необходимости оплаты;
  • в предупреждениях о возможной ошибке;
  • в бейджах.

Фирменные цвета

У каждого сервиса Контура есть фирменный цвет. Он помогает пользователю узнавать сервис. Используйте фирменный цвет в меню и логотипе.

Фирменный цвет в меню Бухгалтерии

Фирменный цвет можно применять в качестве цвета ссылок и кликабельных элементов. Для этого цвет должен удовлетворять условиям описанным в разделе про цвет ссылок.

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

Здесь собраны все цвета, используемые в дизайне интерфейсов Контура. Нажмите на цвет, чтобы скопировать его код или подключите библиотеку стилей к своейму макету.

(чтобы получить ссылку авторизуйтесь, ссылка доступна только сотрудникам Контура).

Черный, белый и серый

#FFFFFF

0%

Фон для зоны контента

#F6F6F6

5%

Фон для блоков, боковой панели, меню второго уровня

#EBEBEB

10%

Фон сервиса, плашки модального окна, выбранный пункт списка

#ADADAD

32%

Неактивный текст, ватермарк, доп. иконка

#858585

48%

Дополнительный текст

#222222

86.5%

Текст и иконки на белом фоне

#000000

100%

Черный для прозрачности

Смысловые цвета

#CDEDFF

Фон

#1F87EF

Плашка кликабельная, фокус

#1874CF

Текст, иконки

#D7F8AE

#538A1B

#477916

#FFDDD6

#DD473B

#CB3D35

#FFEEC2

#FCB73E

#EF8B17

Фирменные цвета

Контур, УЦ, Школа. Смысловой цвет — ошибок и критичных действий

Цвет
Название
Применение

#F03B36

Red 0
Логотип

#FFDDD6

Red 10
Фон

#FFC8BF

Red 20

#FFB2A9

Red 30

#FF9D92

Red 40

#FF887B

Red 50
Основной светлый

#FF5A49

Red 60
Основной цвет

#EE5042

Red 70

#DD473B

Red 80
Плашка

#CB3D35

Red 90
Текст, плашка при наведении

#BA342E

Red 100
Текст при наведении, плашка при нажатии

#A92A27

Red 110
Текст при нажатии

Экстерн, Норматив

Цвет
Название
Применение

#FC7630

Orange 0
Логотип

#FFE0C3

Orange 10
Фон

#FFD1A0

Orange 20

#FFC17D

Orange 30

#FFB259

Orange 40

#FFA236

Orange 50
Основной светлый

#FF8227

Orange 60
Основной цвет

#EA7324

Orange 70

#D46421

Orange 80
Плашка

#BF561E

Orange 90
Текст, плашка при наведении

#A9471B

Orange 100
Текст при наведении, плашка при нажатии

#943817

Orange 110
Текст при нажатии

Смысловой цвет — для акцентирования важной информации

Цвет
Название
Применение

#FECA42

Yellow 0
Логотип

#FFEEC2

Yellow 10
Фон

#FDE1A1

Yellow 20

#FDD481

Yellow 30

#FCC660

Yellow 40

#FCB73E

Yellow 50
Основной светлый

#FDA70C

Yellow 60
Основной цвет

#F69912

Yellow 70

#EF8B17

Yellow 80
Плашка

#E77E1B

Yellow 90
Текст, плашка при наведении

#DE711E

Yellow 100
Текст при наведении, плашка при нажатии

#D46421

Yellow 110
Текст при нажатии

ОФД, Персонал. Смысловой цвет для сообщений об успехе

Цвет
Название
Применение

#64B419

Green Lite 0
Логотип

#D7F8AE

Green Lite 10
Фон

#C8F18E

Green Lite 20

#B9E96E

Green Lite 30

#AAE24D

Green Lite 40

#9BDB2D

Green Lite 50
Основной светлый

#78BF2B

Green Lite 60
Основной цвет

#6CAD26

Green Lite 70

#5F9C20

Green Lite 80
Плашка

#538A1B

Green Lite 90
Текст, плашка при наведении

#477916

Green Lite 100
Текст при наведении, плашка при нажатии

#3A6710

Green Lite 110
Текст при нажатии

Фокус, Декларант

Цвет
Название
Применение

#26AD50

Green 0
Логотип

#C7F9CC

Green 10
Фон

#A7EEB3

Green 20

#87E39A

Green 30

#67D881

Green 40

#46CD68

Green 50
Основной светлый

#26AD50

Green 60
Основной цвет

#23A14A

Green 70

#209644

Green 80
Плашка

#1C8A3F

Green 90
Текст, плашка при наведении

#197F39

Green 100
Текст при наведении, плашка при нажатии

#167333

Green 110
Текст при нажатии

Диадок

Цвет
Название
Применение

#00BEA2

Green Mint 0
Логотип

#C6F5EC

Green Mint 10
Фон

#A8EEE2

Green Mint 20

#8BE7D8

Green Mint 30

#6DDFCD

Green Mint 40

#4FD8C3

Green Mint 50
Основной светлый

#00C5A8

Green Mint 60
Основной цвет

#00B59A

Green Mint 70

#00A58D

Green Mint 80
Плашка

#00957F

Green Mint 90
Текст, плашка при наведении

#008571

Green Mint 100
Текст при наведении, плашка при нажатии

#007564

Green Mint 110
Текст при нажатии

Эксперт. Смысловой цвет ссылок и интерактивных элементов

Цвет
Название
Применение

#2291FF

Blue 0
Логотип

#CDEDFF

Blue 10
Фон

#AEDDFF

Blue 20

#8FCDFF

Blue 30

#70BDFF

Blue 40

#51ADFF

Blue 50
Основной светлый

#2291FF

Blue 60
Основной цвет

#1F87EF

Blue 70

#1C7EDF

Blue 80
Плашка

#1874CF

Blue 90
Текст, плашка при наведении

#156ABE

Blue 100
Текст при наведении, плашка при нажатии

#1261AE

Blue 110
Текст при нажатии

Эльба, КОПФ, Ритейл, Закупки

Цвет
Название
Применение

#366AF3

Blue Dark 0
Логотип

#DDE6FF

Blue Dark 10
Фон

#BECFFF

Blue Dark 20

#9FB8FF

Blue Dark 30

#80A1FF

Blue Dark 40

#618AFF

Blue Dark 50
Основной светлый

#366AF3

Blue Dark 60
Основной цвет

#3365E8

Blue Dark 70

#3060DC

Blue Dark 80
Плашка

#2E5AD1

Blue Dark 90
Текст, плашка при наведении

#2B55C5

Blue Dark 100
Текст при наведении, плашка при нажатии

#2850BA

Blue Dark 110
Текст при нажатии

Бухгалтерия, Реестро

Цвет
Название
Применение

#B750D1

Purple 0
Логотип

#F7D7FF

Purple 10
Фон

#EABDF6

Purple 20

#DEA3EC

Purple 30

#D189E3

Purple 40

#C56FDA

Purple 50
Основной светлый

#B750D1

Purple 60
Основной цвет

#AA49C3

Purple 70

#9E43B5

Purple 80
Плашка

#913CA6

Purple 90
Текст, плашка при наведении

#843698

Purple 100
Текст при наведении, плашка при нажатии

#782F8A

Purple 110
Текст при нажатии