Основы CSS цвета

Ранее мы описывали цвета на с использованием английских слов “red, green, blue”. Но этого явно не достаточно описать все цвета которые может различать человеческий глаз, тут мы рассмотрим как эта проблема решена в CSS.

Рассмотрим пример :

Тег span class “a” имеет зеленый фон согласно CSS правилу

1

.a { background: #0f0 }

Так происходит потому, что тут используется укороченная форма записи HEX кода цвета. Что бы определять цвета для программ и всяческих машин существует множество различных стандартов и способов описывать цвета. В вебе огромной популярностью пользуется RGB и RGBA способы определения цвета, но не нужно думать что это единственный способ определить цвет в CSS на данный момент поддерживается и hsl

Все цвета можно разделить на несколько составляющих, в модели RGB это красный зеленый и синий. Затем указывая силу - интенсивность того или иного компонента можно определить все доступное множество цветов. Это множество ограничивается только количеством комбинаций 3х чисел - интенсивности красного, зеленого и синего цветов, выраженной в процентах или в числах от 0 до 256. Например:

1
2
3
4
5
6

a { 
    color: rgb(256, 0, 0) 
} 
a {
    color: rgb(100%, 0%, 0%) 
}

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

1
2
3
4
5
6

a { 
    color: rgb(256, 200, 200) 
} 
a {
    color: rgb(100%, 78%, 78%) 
}

Даст светло красный цвет поскольку все компоненты выведены почти на максимум и во тоже время красная компонента лидирует.

Поскольку 256 является степенью двойки и в тоже время из исторических причин, в CSS существует возможность задать цвет с помощью 16-ричных чисел. Это все те же наши десятичные 0-9 цифры плюс буквы A, B, C, D, E, F.

Благодаря тому, что в этой системе 256 записывается как FF, тут есть возможность описать любой цвет как тройку 16-ричных чисел. Но что бы это сделать по стандарту CSS нужно написать спец символ решетки, который указывает, что далее идет 16-ричная система исчисления. Пример:

1
2
3

a { 
    color: #ff0000 
}

Окрасит текст HTML тега a в красный цвет. Тот же красный цвет в 16 форме. Но можно пойти еще дальше по пути сокращения записи. Существует так же правило, которое позволяет не писать дублирующие числа для HEX записи. То есть ff, компоненту можно записать как просто f, но в тоже время нужно понимать, что в этом случае в укороченном виде нужно описывать все компоненты 00 станет 0 и в итоге мы получим:

1
2
3

a { 
    color: #f00 
}

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

Так же есть помимо RGB в CSS существует возможность задавать цвета и в RBGA пространстве, где новая A компонента это прозрачность цвета. В целом в форме записи это ничего не меняет. Во все виды записи добавляется новая четвертая компонента, рассмотрим на примере синего цвета:

1
2
3
4
5
6

div {
    color: rgb(0, 0, 256, .5) 
} 
div {
    color: rgb (0%, 0%, 100%, 0.5) 
}

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

Что касается HEX кодов, тут не все так хорошо как хотелось бы с точки зрения поддержки браузеров, но в современных все хорошо RGBA так же можно описывать 4 компонентами в полной и краткой форме. Селекторы здесь составлены с использованием комбинаторов

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

Далее поговорим о текстовых inline блоках