Цвета HTML: rgb, hex и прочие

Пояснения к статье:

  1. HEX, RGB, RGBA — способы определения цветов в CSS. Каждая из этих систем имеет свои значения.
  2. <border-color>, <color>, <background> — CSS свойства.

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

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

Как задать цвет?

Для начала запишите селектор элемента, а затем уже задайте свойство, в котором будет применяться значение.

Цвета HEX. HTML & CSS

Цвета в HTML: rgb, hex, rgba

В нашем примере мы будем изменять текст с помощью свойства color. Оно определяет цвет отображения текста.

Что такое HEX? Это шестнадцатеричная система счисления — hexademical(hex). Она отличается от стандартной десятеричной тем, что в её основе лежит 16 значений.

Шестнадцатеричная система содержит все стандартные числа, от 1 до 9, а также первые 6 букв латинского алфавита: A-F.

Формат записи Hex следующий — записывается 3 hex группы цифр, состоящие из 2 значений. Перед тем как записать цифру, обязательно укажите решетку, иначе свойство не будет работать.

Каждая группа цифр определяет один цвет — red, green, blue. По сути, та же самая rgb система, но с небольшими отличиями. О ней чуть позже.

Каждое двузначное значение определяет уровень того или иного цвета, из трех вышеуказанных.

Не обязательно записывать 6 цифр, можно ограничиться и 3. Это сокращает набор возможных цветов, но немного сокращает запись.

Работает запись только с теми цветами, 1 группа которых имеет одинаковые значения, например: #001122 — #012.

Цвета RGB. HTML & CSS

Цвета в HTML: rgb, hex, rgba

Это второй способ указания цветов. Здесь идет такой же порядок — red, green, blue, так же и расшифровывается аббревиатура. Однако, способ подачи немного другой, здесь уже используются десятичные числа, и запись в CSS выглядит немного по другому.

Для указания цвета необходимо ввести ключевое слово rgb, а затем открыть скобки, и указать цвета — 3 значения через запятую. Величина каждого значения — не более 255.

Как мы уже говорили, порядок цветов такой — red, green, blue. Для того, чтобы выделить один из этих цветов, либо же сделать его интенсивным, нужно оставить значение других цветов по умолчанию, а его поднять до 200-255.

Запись для белого цвета — rgb(255,255,255). Запись для черного цвета — rgb(0,0,0). Можете не указывать значение в цифрах, можно пользоваться процентами. 100% = 255.

Для того, чтобы получить значение какого-либо цвета, можно пользоваться специальными программами. Хорошим вариантом является Adobe Color CSS. Там вы найдете 2 значения цветов — hex, rgb.

В некоторых текстовых редакторах, таких как brackets, присутствует система изменения цветов. Для её включения нажмите комбминацию клавиш Ctrl + E.

Прозрачные цвета — rgba. HTML & CSS

Цвета в HTML: rgb, hex, rgba

По сути та же самая rgb система, так же указываются цвета — red, green, blue, одни и те же значение. Но есть одно небольшое отличие — прозрачность цвета.

Ключевое слово rgba имеет 4 свойства, первые 3 — цвета, а 4 — альфа-канал, который задает прозрачность.

Целых значение там немного — от 0 до 1. 0 делает цвет полностью прозрачным, а 1 — непрозрачным. Как же тогда использовать свойство? Очень просто: используйте десятичные дроби.

Казалось бы, значений всего 2, но вариантов — множество. Единственный плюс, что вам не нужно будет искать значение прозрачности в интернете, как с цветом. Можете просто экспериментировать.

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

Стандартные цвета

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

В набор входят как самые простые — red, green blue, так и более сложные — aqua, maroon, navy. Но выбор всё равно очень ограничен, лучше задавать цвета с помощью определенных значений.

Где могут использоваться цвета.

Ниже мы представим список свойств, для которых можно задавать цветовые значения:

  1. <Color> — цвет текста.
  2. <Background-color> или <background> — цвет фона.
  3. <Border-color> или <border> — цвет рамки.
  4. <Outline-color> или <outline> — цвет внешней рамки.
  5. <Text-shadow> — цвет тени текста.
  6. <Box-shadow> — цвет тени блока.
Цвета в HTML: rgb, hex, rgba

Заключение

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

Для того, чтобы улучшить работу с цветовой гаммой, нужно скачать определенные программы. Отличный вариант — ColorMania, который дает значения цветов во всех системах.



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *