Информация о коде цвета #474DB8

Все конверсии, гармонии и проверки доступности, необходимые для уверенного дизайна.

RGB:rgb(71, 77, 184)
HSL:hsl(237, 44%, 50%)
HEX
#474DB8
RGB
71, 77, 184
HSL
237°, 44%, 50%
HSV
237°, 61%, 72%
CMYK
61%, 58%, 0%, 28%

Конверсия цвета

Генерируйте значения в нескольких цветовых моделях в одном месте.

#474DB8

≈ Стальной синий

Эталонные цветовые карты

Более низкий ΔE означает более близкое визуальное совпадение

Оттенки и тона

Посмотрите, как #474DB8 ведет себя при смешивании с белым или черным. Эти образцы идеально подходят для состояний при наведении, теней и фонов.

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

Тона

0–100%
0%#474DB8
10%#4045A5
20%#393E93
30%#323681
40%#2B2E6E
50%#24275C
60%#1D1F49
70%#151737
80%#0E0F25
90%#070812
100%#000000

Оттенки

0–100%
0%#474DB8
10%#5A5FBF
20%#6C71C6
30%#7E82CD
40%#9194D4
50%#A3A6DB
60%#B6B8E2
70%#C8CAEA
80%#DADBF1
90%#EDEDF8
100%#FFFFFF

Распространенные варианты использования

  • Состояния компонентов пользовательского интерфейса (наведение, активный, отключенный)
  • Создание глубины с помощью теней и бликов
  • Создание согласованных цветовых систем

Система дизайна

Совет по системе дизайна

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

Экспортировать палитру

Цветовые гармонии

Мгновенно создавайте сбалансированные палитры с помощью гармоний, сгенерированных из #474DB8.

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

Как использовать

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

Почему это важно

Сбалансированные гармонии передают намерение — спокойствие, энергичность, премиальность — не перегружая ваш макет.

Комплементарная

Противоположные оттенки, создающие эффект и смелый контраст.

Лучше всего подходит для

Высокоэффективные CTA, логотипы и главные секции

Аналогичная

Соседние оттенки для естественных, плавных градиентов.

Лучше всего подходит для

Дашборды, вдохновленные природой, успокаивающие

Триадная

Три равномерно расположенных оттенка для игривого баланса.

Лучше всего подходит для

Игривый брендинг и редакционные макеты

Тетрадная

Две комплементарные пары, обеспечивающие богатое разнообразие.

Лучше всего подходит для

Иллюстрации и маркетинговые эксперименты

Монохроматическая

Более светлые и темные родственные цвета в пределах одного семейства оттенков.

Лучше всего подходит для

Минималистичные интерфейсы и премиальные состояния UI

Контраст доступности

Проверьте, насколько читабелен #474DB8 с распространенными цветами текста, чтобы каждый посетитель получил четкое впечатление.

Используйте AA в качестве базового уровня для основного текста и AAA для премиальной доступности.

Образец текста на черный текст
Цвет текста#000000
Фон#474DB8
Коэффициент контрастности3.02:1
Уровень WCAGFail
Образец текста на белый текст
Цвет текста#FFFFFF
Фон#474DB8
Коэффициент контрастности6.95:1
Уровень WCAGAA
Рекомендуемый предварительный просмотр текста
Цвет текста#FFFFFF
Фон#474DB8
Коэффициент контрастности6.95:1
Уровень WCAGAA

Технические форматы

Разблокируйте профессиональные цветовые пространства, такие как XYZ, LAB, варианты CMYK и готовые к экспорту профили.

Зарегистрироваться бесплатно

Практические форматы

Получите симуляции печати, сопоставления LED и готовые для разработчиков порядки байтов.

Зарегистрироваться бесплатно

Анализ цвета

Погрузитесь в спектральные данные, отчеты о доминировании и расширенную аналитику.

Зарегистрироваться бесплатно

Симулятор слепоты

Предварительный просмотр того, как #474DB8 выглядит при распространенных нарушениях цветового зрения.

Зарегистрироваться бесплатно

Творческие аспекты

Исследуйте сезонные ассоциации, эмоциональные сигналы и природные явления.

Зарегистрироваться бесплатно

Рекомендации по дизайну

Баланс

Рассматривайте #474DB8 как акцент. Сочетайте его с нейтральными цветами и одним вспомогательным оттенком, чтобы избежать визуальной перегрузки.

Контраст

Тестируйте комбинации с реальным контентом. Более высокий контраст улучшает сканирование, читабельность и конверсию.

Гармония

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

Нужен другой цвет?

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

Открыть палитру цветов