Контрастная
Выразительная пара для акцентов, кнопок и небольших деталей.
Синий цвет Blue #0000FF
Чистый синий RGB - насыщенный холодный цвет с максимальным синим каналом.
CSS Color Profile
blue #0000FF
Цвет #0000FF blue
Коды цвета
Нажмите, чтобы скопировать Значения в разных форматах
CMYK - ориентировочный пересчёт без учёта печатного профиля, а не CSS-синтаксис.
Контраст текста
Лучше: белый Минимум WCAG AA для обычного текста - 4.5:1
Белый текст 8.59:1 AAA
Чёрный текст 2.44:1 Недостаточный
Светлее и темнее
Оттенки синего цвета
Шкала от светлого фона до насыщенного тёмного тона
Шкала рассчитана от исходного кода #0000FF. Для готовой дизайн-системы дополнительно проверьте контраст каждой пары текста и фона.
Готовые палитры
Сочетания с синим цветом
Три отправные точки для интерфейса или иллюстрации
Аналоговая
Соседние тона для спокойного и цельного цветового решения.
Монохромная
Один цвет разной светлоты для фона, текста и состояний элементов.
О цвете
Где использовать синий цвет
Код #0000FF обозначает чистый синий без красной и зелёной составляющих. Это очень насыщенный оттенок: он хорошо заметен на светлом фоне, но для больших интерфейсных областей обычно выбирают более спокойные варианты вроде royalblue или navy.
Характер и восприятие
Синий ассоциируется со спокойствием, надёжностью и технологичностью. Яркий чистый синий выглядит цифровым и энергичным, тёмный - более серьёзным.
Подходящие задачи
- Ссылки и интерактивные элементы.
- Технологические продукты и информационные блоки.
- Диаграммы, метки и активные состояния.
Практические рекомендации
- Не полагайтесь на цвет ссылки без подчёркивания или другого признака.
- Для кнопок чаще подходит немного приглушённый синий.
- На насыщенном синем фоне используйте белый текст и проверяйте мелкие подписи.
Как задать синий цвет в HTML и CSS
В современной HTML-странице цвет оформляют через CSS. Для одного и того же оттенка можно использовать HEX-код, функции RGB и HSL
или именованное значение blue.
.example {
color: #ffffff;
background-color: #0000ff;
}Если значение понадобится в нескольких компонентах, вынесите его в CSS-переменную:
:root {
--color-siniy: #0000ff;
}
.button {
background: var(--color-siniy);
}| Формат | Значение | Особенность |
|---|---|---|
| HEX | #0000FF | Компактная шестнадцатеричная запись. |
| RGB | rgb(0 0 255) | Красный, зелёный и синий каналы от 0 до 255. |
| HSL | hsl(240 100% 50%) | Тон, насыщенность и светлота. |
| CSS-имя | blue | Готовое стандартное ключевое слово. |
Продолжить подбор
Все коды цветов Похожие цвета
Частые вопросы: синий цвет
Какой HEX-код у синего цвета?
Синий цвет имеет HEX-код #0000FF. В RGB это rgb(0, 0, 255), а в HSL - hsl(240, 100%, 50%).
Как написать синий цвет в CSS?
Используйте код #0000FF, функцию rgb(0 0 255), значение hsl(240 100% 50%) или стандартное ключевое слово blue.
Какой текст использовать на фоне синего цвета?
Белый текст даёт более высокий контраст. Соотношение с белым составляет 8.59:1, с чёрным - 2.44:1.
С какими цветами сочетается синий?
Используйте контрастную, аналоговую или монохромную схему из таблицы на странице. Для спокойной композиции добавьте нейтральные светлые и тёмные оттенки, а насыщенный дополнительный цвет оставьте для небольших акцентов.
Можно ли использовать имя blue вместо кода?
Да. Ключевое слово blue поддерживается в CSS и соответствует значению #0000FF. Числовой код удобнее, если цвет нужно передавать между макетом, кодом и другими программами.