Преобразование цвета
CMYK profile: Coated FOGRA39 · Запись следует CSS Color 4 и правилам контраста WCAG 2.2.
Об этом цвете
Роскошь с секретом
Тёмный Синий — это #080C19, тон семейства Фиолетовый с ясным культурным происхождением. Сам по себе он читается как часть этого семейства; его корни (цифровой цвет) добавляют второй смысловой слой.
Совет дизайнеру
Сначала проверьте Тёмный Синий (#080C19) на нейтральной поверхности: акцент из семейства Фиолетовый сделает его осознанным, а не декоративным.
Лучшее применение
Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Психология
Как воспринимается
Психологический эффект
Тёмный Синий повышает воспринимаемую энергию композиции Фиолетовый и направляет взгляд к действию.
Эмоциональное воздействие
Он ощущается непосредственным и тёплым, поэтому оживляет сдержанную вёрстку, не делая её шумной.
Символика
Что означает
Культурное значение
В контексте, связанном с цифровой цвет, тон несёт местные отсылки, поэтому до кампании проверьте его символику.
Положительные ассоциации
Положительные ассоциации тяготеют к творчество, престиж и воображение; потому он и появляется на приглашениях и в сезонных работах.
Осторожно в применении
Слишком большая площадь читается как искусственность или элитарность при переборе, поэтому держите его в акцентах и малых полях.
Где встречается
Типичные задачи дизайна
- Лендинги кампаний
- Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Системы журнальных обложек
- Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Этикетки упаковки продуктов
- Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Акценты статусов на дашборде
- Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Навигационные вывески в рознице
- Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Рекомендации
Как применять
Рекомендуется
- Держите насыщенные заливки в пределах примерно двадцати процентов макета.
- Используйте только для главного призыва к действию.
- Проверяйте сочетание в малом размере на нейтральном фоне.
Избегать
- Не ставьте рядом с кричащим неоновым зелёным или электрическим синим.
- Никогда не используйте для длинного основного текста на белом.
- Избегайте градиентов, уводящих тон в другое семейство.
Бренды, строящиеся на Маг, Творец, используют его, чтобы показать характер раньше слов.
Фиолетовому всегда требовался редкий краситель или аккуратное смешение, и эта цена до сих пор формирует его репутацию. Он уравновешивает церемонию, воображение и лёгкий налёт тайны.
Сочетание
Цвета, которые его дополняют
История
Пигменты и происхождение
До синтетических красителей Тёмный Синий составляли из минеральных и растительных пигментов; семейство Фиолетовый зависело от охры, марены и индиго. Экраны сегодня воспроизводят его стабильнее любого отдельного пигмента.
Теги
Вариации
Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.
Тёмные ступени
Более тёмные ступени в том же тоне.
Светлые ступени
Более светлые ступени для поверхностей и фона.
Сценарии
- Тёмные ступени → hover, shadows, depth
- Светлые ступени → highlights, surfaces
- Баланс → consistent color systems
Совет по дизайну
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Цветовые сочетания
Вращайте цветовой круг, сохраняя светлоту.
Как использовать
Три шага сохраняют читаемость и осознанность цвета.
Почему работает
Перцептивное обоснование палитры.
Комплементарная
Напротив в цветовом круге; контраст обостряет фокусный цвет.
Лучшее применение: Призывы к действию и акценты одной функции
Раздельно-комплементарная
Два соседа противоположного тона; мягче прямого контраста.
Лучшее применение: Сбалансированные маркетинговые макеты с двумя акцентами
Триада
Три равноудалённых тона; живо, но нужен один ведущий голос.
Лучшее применение: Айдентика событий и игривые журнальные развороты
Аналоговая
Соседние тоны круга; спокойно, цельно и легко читается взглядом.
Лучшее применение: Фоны, графики и спокойные страницы продукта
Монохромная
Один тон по ступеням светлоты; дисциплинированно и премиально.
Лучшее применение: Дизайн-системы, упаковка и типографическая иерархия
Экспорт палитры
CSS
:root {
--color-1: #05070F;
--color-2: #060A14;
--color-3: #080C19;
--color-4: #393D47;
--color-5: #6B6D75;
}
Tailwind
colors: {
color1: '#05070F',
color2: '#060A14',
color3: '#080C19',
color4: '#393D47',
color5: '#6B6D75',
}
JSON
["#05070F","#060A14","#080C19","#393D47","#6B6D75"]
Принципы
Баланс
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Контраст
До релиза проверьте основной текст на белом и на чёрном.
Гармония
Вращайте цветовой круг, сохраняя светлоту.
Проверка контраста
До релиза проверьте основной текст на белом и на чёрном.
Отдайте Тёмный Синий единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Стандарты контраста WCAG
WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #080C19 даёт 19.50:1 к белому (AAA) и 1.03:1 к чёрному (FAIL). Выберите порог по таблице ниже в зависимости от размера текста.
| Уровень | Обычный текст | Крупный текст (18pt+ / 14pt жирный) | Иконки и элементы UI |
|---|---|---|---|
| AAA | 7 : 1 | 4.5 : 1 | — |
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| Не пройдено | < 4.5 : 1 | < 3 : 1 | < 3 : 1 |
Крупный текст — 18pt обычный или 14pt жирный. Элементам UI нужен контраст 3:1 с соседними цветами. AA — обычная база, AAA — усиленный уровень.
Технические форматы
Запись в цветовых пространствах
CSS Color 4
sRGB / D65
HSL
perceptual
CIE Lab
CIE LCH
CIE XYZ
CIE LUV
CSS HWB
Практические форматы
Готовые значения
custom properties
arbitrary value
ARGB
dart:ui
RGB / CMYK
FOGRA39
Анализ цвета
Измеренные свойства цвета
relative luminance · cool
vs white · AAA · cool
vs black · FAIL · cool
saturation 52% · cool
lightness 6% · cool
玄色 #3A3A40 · cool
Симулятор дальтонизма
Как выглядит при нарушении цветового зрения
Как выглядит при нарушении цветового зрения · ΔE 21.6
Творческие аспекты
Культура, настроение и история
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.