Как добавить темно-синий цвет в HTML?

Добавление темно-синего текста или фоновых цветов в HTML можно выполнить несколькими способами. Наиболее распространенные подходы — использование названий цветов HTML, значений RGB или HEX-кодов для указания точного оттенка темно-синего, который вы хотите использовать на своей веб-странице.

Использование предопределенных названий цветов HTML

Один из самых простых способов добавить темно-синий цвет в HTML — использовать одно из предопределенных названий цветов, поддерживаемых всеми основными браузерами. В HTML есть основные ключевые слова для распространенных цветов, таких как «синий», «зеленый», «красный» и т. д. Однако также определены определенные оттенки синего, включая «темно-синий» и «темно-синий».

Чтобы использовать эти цвета, вы просто включаете название цвета в качестве значения для свойств CSS, таких как color, background-color, border-color и т. д. Например:

<p style="color:darkblue;">Этот текст будет темно-синим.</p> <div style="background-color:navy;">Этот div имеет темно-синий фон.</div>

Имена цветов нечувствительны к регистру, поэтому «DarkBlue» или «DARKBLUE» тоже подойдут. Главный недостаток предопределенных цветов заключается в том, что вы ограничены небольшим набором параметров и не можете точно контролировать, насколько темный синий используется.

Использование значений RGB

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

rgb(0, 0, 255) rgb(0, 0, 100%) #0000FF

Формат rgb() определяет каждый цветовой канал по шкале от 0 до 255. Процентный формат также использует шкалу 0-100%. А формат HEX записывает значения RGB как 6-значное шестнадцатеричное число.

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

Значение RGB Оттенок
rgb(0, 0, 139) Темно-синий
rgb(0, 0, 155) Полуночно-синий
rgb(0, 0, 205) Насыщенный синий

Чтобы использовать значение RGB, снова просто включите его в качестве значения для любого свойства цвета CSS:

<p style="color:rgb(0, 0, 155);">Этот текст — полночь синий.</p> <div style="background-color:#0000FF;">Этот div имеет насыщенный синий фон.</div>

RGB дает вам массу гибкости для выбора нужной вам темноты и оттенка синего.

Использование шестнадцатеричных цветовых кодов

Другой распространенный способ представления цветов в HTML/CSS — шестнадцатеричные цветовые коды. Как упоминалось выше, шестнадцатеричные коды — это просто еще один способ записи значений RGB с использованием 6 шестнадцатеричных цифр.

Цвета шестнадцатеричного кода всегда начинаются с #, затем идут 2 цифры для красного, зеленого и синего. Например:

  • #000000 — черный (без цвета)
  • #FFFFFF — белый (полностью красный, зеленый и синий)
  • #0000FF — синий (без красного и зеленого)

Некоторые примеры шестнадцатеричных значений темно-синего цвета:

#00008B = Темно-синий #00009C = Полуночный синий #0000CD = Средний синий #0000FF = Насыщенный синий 

И чтобы использовать цвет HEX в HTML/CSS:

<p style="color:#00009C;">Этот текст темно-синего цвета.</p> <div style="background-color:#0000FF;">Этот div имеет насыщенный синий фон.</div> 

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

Советы по выбору темно-синего

Теперь, когда вы знаете основные способы указания цветов, вот несколько советов по выбору хорошего темно-синего:

  • Используйте инструмент выбора цвета, чтобы визуально найти именно тот синий, который вам нужен
  • Убедитесь, что он достаточно контрастирует с текстом/передним планом
  • Остерегайтесь проблем с доступностью очень темных синих цветов
  • Попробуйте разные оттенки на разных фоновых цветах
  • Выберите синий, который соответствует цветам вашего бренда
  • Используйте шестнадцатеричный код для обеспечения согласованности на разных платформах

Существует множество оттенков насыщенного, глубокого синего цвета на выбор. Независимо от того, хотите ли вы полуночно-синий, темно-синий или основной синий, вы можете точно контролировать тона с помощью значений RGB или HEX.

Заключение

Добавление темных оттенков синего в HTML и CSS легко с помощью названий цветов, значений RGB или шестнадцатеричных кодов. Ключ в том, чтобы выбрать отчетливый синий, который отлично смотрится с остальным вашим контентом и дизайном. Поэкспериментируйте с различными уровнями насыщенности и яркости, чтобы найти идеальный глубокий синий.

Независимо от того, какие теги, атрибуты или стили вы используете, HTML дает вам возможность сделать текст, фоны, границы и другие элементы такими красивыми темно-синими, как вы хотите. Так что не останавливайтесь на базовом «синем» цвете — используйте коды RGB и HEX, чтобы разблокировать широкий спектр насыщенных, ярких оттенков синего.