Фундамент → 1.3
Цвета
Фирменная цветовая палитра основана на кодах плёнки Oracal. HEX-значения подобраны как ближайшие эквиваленты. Для точной печати используйте коды Oracal.
Фирменные цвета
Нажмите на значение, чтобы скопировать его в буфер обмена.
Основной бирюзовый
Акцентный цвет, CTA-кнопки, иконки, активные состояния
Тёмный серо-голубой
Тёмный фон, хедер, акценты на тёмных поверхностях
Средний бирюзовый
Вторичные акценты, фоны секций, иллюстрации
Тёмно-синий
Наружная реклама, полиграфия, заголовки на светлом фоне
Бежевый
Форма сотрудников, оффлайн носители, тёплые акценты
Тёмно-коричневый
Текст на бежевых поверхностях, логотип на форме
Белый
Фон, инвертированный текст, логотип на тёмных фонах
Контрастность пар (WCAG)
Проверка соответствия требованиям доступности для основных комбинаций цветов. AA = 4.5:1 для обычного текста, 3:1 для крупного (>18pt).
Белый на тёмном серо-голубом (073M)
Белый на тёмно-синем (050M)
Белый на тёмно-коричневом (080M)
Белый на среднем бирюзовом (066M)
Тёмный текст на основном бирюзовом (053M)
Тёмный текст на бежевом (081M)
Тёмно-коричневый на бежевом (форма, 080M/081M)
Цвета с сайта
Реальные цвета, используемые на сайте oclinica.ru. Извлечены из CSS темы сайта. Число применений показано в правом углу карточки.
Бежевый
Основной тёплый акцент, фоны, рамки, текст
Серо-бирюзовый
Основной холодный акцент, ссылки
Бирюзовый
Фоны акцентных блоков, иконки
Бирюзовый средний
Вторичные цветовые акценты
Основной текст
Цвет основного текста на сайте
Второстепенный текст
Подписи, второстепенный контент
Светло-бирюзовый фон
Фон формы записи («Будьте здоровы!»)
Светло-кремовый фон (Hero)
Фон Hero-баннера страниц разделов
Кремовый фон
Тёплые фоны кнопок-пилюль, вторичные секции
Коралловый
CTA-кнопки («Запишите меня!»), акцентные призывы к действию
Светло-жёлтый фон
Фон карточек отзывов (секция «Отзывы о нас»)
Светло-зелёный фон
Фон секции новостей
Соответствие: Oracal → Сайт
Сравнение фирменной палитры (Oracal, брендбук) с реальными цветами, применёнными на сайте. Расхождения ожидаемы — цифровая адаптация плёночных цветов под экран.
#0089C3
Oracal 053M
#63BAC3
Бирюзовый · ×4
Oracal — насыщенный синий; сайт — светлее и голубее
#53514E
Oracal 073M
#60959C
Серо-бирюзовый · ×7
Oracal — тёмно-серый; сайт — серо-бирюзовый (значительное расхождение)
#00818C
Oracal 066M
#52B4BD
Бирюзовый средний · ×4
Oracal — тёмный бирюзовый; сайт — светлее
#A8885C
Oracal 081M
#BF9975
Бежевый · ×12
Oracal — тёплый охристый; сайт — прохладнее и светлее
#1B2E5D
Oracal 050M
Нет на сайте
Не найден в CSS сайта
#432F1E
Oracal 080M
Нет на сайте
Не найден в CSS сайта
#464646
Основной текст · ×3
Только на сайте — нет Oracal-аналога
#949290
Второстепенный текст · ×4
Только на сайте — нет Oracal-аналога
#F9F4E7
Светло-кремовый фон (Hero) · ×1
Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога
#E9E4D4
Кремовый фон · ×1
Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога
#FFA39C
Коралловый · ×2
Только на сайте — CTA-кнопки, нет в оффлайн-палитре
#EEF4D1
Светло-жёлтый фон · ×1
Только на сайте — фон карточек отзывов
#F2FEE6
Светло-зелёный фон · ×1
Только на сайте — фон секции новостей
Правила применения
Используйте фирменные цвета
Только цвета из палитры обеспечивают узнаваемость бренда на всех носителях.
Соблюдайте контрастность
Текст на цветном фоне должен соответствовать минимум AA по WCAG 2.1.
Не смешивайте произвольно
Не используйте фирменные цвета с посторонними цветами без согласования.
Не изменяйте насыщенность
Осветление, затемнение или изменение оттенка недопустимо без необходимости.
LLM-спецификация
Машиночитаемые данные раздела для использования AI-ассистентами при разработке дизайна, макетов и кода. Нажмите «Скопировать» чтобы получить полный текст.
LLMLLM-спецификация
Фирменные цвета (Oracal)
| Oracal | HEX | RGB | CSS-переменная | Применение |
|---|---|---|---|---|
| 053M | #0089C3 | rgb(0,137,195) | --brand-053m | Акцентный цвет, CTA-кнопки, иконки, активные состояния |
| 073M | #53514E | rgb(83,81,78) | --brand-073m | Тёмный фон, хедер, акценты на тёмных поверхностях |
| 066M | #00818C | rgb(0,129,140) | --brand-066m | Вторичные акценты, фоны секций, иллюстрации |
| 050M | #1B2E5D | rgb(27,46,93) | --brand-050m | Наружная реклама, полиграфия, заголовки на светлом фоне |
| 081M | #A8885C | rgb(168,136,92) | --brand-081m | Форма сотрудников, оффлайн носители, тёплые акценты |
| 080M | #432F1E | rgb(67,47,30) | --brand-080m | Текст на бежевых поверхностях, логотип на форме |
| — | #FFFFFF | rgb(255,255,255) | --brand-white | Фон, инвертированный текст, логотип на тёмных фонах |
Цвета сайта oclinica.ru
| Название | HEX | Группа | × | Применение |
|---|---|---|---|---|
| Бежевый | #BF9975 | Акценты | 12 | Основной тёплый акцент, фоны, рамки, текст |
| Серо-бирюзовый | #60959C | Акценты | 7 | Основной холодный акцент, ссылки |
| Бирюзовый | #63BAC3 | Акценты | 4 | Фоны акцентных блоков, иконки |
| Бирюзовый средний | #52B4BD | Акценты | 4 | Вторичные цветовые акценты |
| Основной текст | #464646 | Текст | 3 | Цвет основного текста на сайте |
| Второстепенный текст | #949290 | Текст | 4 | Подписи, второстепенный контент |
| Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фон формы записи («Будьте здоровы!») |
| Светло-кремовый фон (Hero) | #F9F4E7 | Фоны | 1 | Фон Hero-баннера страниц разделов |
| Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции |
| Коралловый | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»), акцентные призывы к действию |
| Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов (секция «Отзывы о нас») |
| Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей |
Контрастность WCAG 2.1
| Пара (fg / bg) | Ratio | AA (4.5:1) | AAA (7:1) | AA large (3:1) |
|---|---|---|---|---|
| #ffffff / #53514e | 7.9:1 | PASS | PASS | PASS |
| #ffffff / #1b2e5d | 13.2:1 | PASS | PASS | PASS |
| #ffffff / #432f1e | 12.6:1 | PASS | PASS | PASS |
| #ffffff / #00818c | 4.6:1 | PASS | FAIL | PASS |
| #111827 / #0089c3 | 4.5:1 | PASS | FAIL | PASS |
| #111827 / #a8885c | 5.4:1 | PASS | FAIL | PASS |
| #432f1e / #a8885c | 3.8:1 | FAIL | FAIL | PASS |
Правила применения