HEX-цвета в CSS

Значение HEX

Шестнадцатеричный (hex) цвет записывается как #rrggbb.

Здесь rr (красный), gg (зелёный) и bb (синий) — шестнадцатеричные значения от 00 до ff, что соответствует диапазону от 0 до 255 в десятичной системе.

Например, #ff0000 — красный, потому что красный на максимуме (ff), а остальные на минимуме (00). Используйте #000000 для чёрного и #ffffff для белого.

Цвета HEX

Шесть цветов, записанных как 6-значные шестнадцатеричные значения.

HTML-страница, показывающая несколько цветов, записанных как 6-значные шестнадцатеричные значения.

Создайте шесть заголовков с цветами фона: #ff0000, #0000ff, #3cb371, #ee82ee, #ffa500 и #6a5acd. Подпишите каждый его шестнадцатеричным значением.

> Результат: полная HTML-страница

Prompt

HTML-страница, показывающая несколько цветов, записанных как 6-значные шестнадцатеричные значения. Создайте шесть заголовков с цветами фона: #ff0000, #0000ff, #3cb371, #ee82ee, #ffa500 и #6a5acd. Подпишите каждый его шестнадцатеричным значением.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>

Оттенки серого

Оттенки серого получаются, когда пары красного, зелёного и синего равны.

HTML-страница, показывающая оттенки серого, полученные равными шестнадцатеричными парами для красного, зелёного и синего.

Создайте шесть заголовков с цветами фона: #3c3c3c, #616161, #787878, #b4b4b4, #f0f0f0 и #f9f9f9. Подпишите каждый.

> Результат: полная HTML-страница

Prompt

HTML-страница, показывающая оттенки серого, полученные равными шестнадцатеричными парами для красного, зелёного и синего. Создайте шесть заголовков с цветами фона: #3c3c3c, #616161, #787878, #b4b4b4, #f0f0f0 и #f9f9f9. Подпишите каждый.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#616161;">#616161</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#f9f9f9;">#f9f9f9</h1>

</body>
</html>

3-значное значение HEX

Иногда вы увидите 3-значный шестнадцатеричный код, записанный как #rgb. Это сокращение для некоторых 6-значных кодов.

Его можно использовать, только когда обе цифры каждой пары одинаковы. Так, #ff00cc можно сократить до #f0c.

Пример

Каждый 3-значный код соответствует своему 6-значному коду.

HTML-страница, использующая 3-значное шестнадцатеричное сокращение во внутреннем блоке стиля.

Задайте фону body значение #fc9 (то же самое, что #ffcc99), цвет `<h1>` — #f0f (то же самое, что #ff00ff), а цвет `<p>` — #b58 (то же самое, что #bb5588). Добавьте заголовок и абзац.

> Результат: полная HTML-страница

Prompt

HTML-страница, использующая 3-значное шестнадцатеричное сокращение во внутреннем блоке стиля. Задайте фону body значение #fc9 (то же самое, что #ffcc99), цвет <h1> — #f0f (то же самое, что #ff00ff), а цвет <p> — #b58 (то же самое, что #bb5588). Добавьте заголовок и абзац.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>

<h1>Hello World</h1>
<p>This paragraph uses a 3-digit hex color.</p>

</body>
</html>