Цвета в Css

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

Спецификация тут: w3.org/TR/css3-color/.

1. Именованные цвета.

Их достаточно много, все цвета можно найти тут: w3.org/TR/css3-color/#svg-color

Для себя я отсортировала их по оттенкам, моя таблица цветов лежит тут: css.yoksel.ru/tablitsa-imenovanny-h-tsvetov/.

Преимущество: через некоторое время использования всегда знаешь как называется нужный цвет или наоборот — как выглядит на странице цвет, имя которого видишь в коде. Очень удобно для экспериментов с CSS.

Недостаток: их всего 147, и не всегда можно подобрать нужный набор оттенков.

Итак, способы:

2. RGB.

Red, Green, Blue.

Можно задавать двумя способами:

Преимущество: значения цвета можно брать из фотошопа.

Недостаток: неудобно подбирать значения руками, а также нельзя задавать значения числами с плавающей точкой. Например, если захочется задать какой-нибудь цвет через 25%, в цифрах это будет 63.75 — строка с таким значением работать не будет.

3. HEX.

Это тот же RGB, но записанный в шестнадцатеричной системе счисления. Каждая пара знаков означает в той же последовательности красный, зеленый и синий цвета в диапазоне от 00 до FF. Если в парах оба знака одинаковые, можно использовать короткую запись. Например: #FFFFFF → #FFF.

Преимущество: значения удобно брать из фотошопа. Недостаток: неудобно подбирать значения руками, хотя распространенные сочетания легко запоминаются, например #F00 или #DDD или #F90 .

4. RGBA.

RGB с параметром прозрачности (alpha).

Преимущество: наличие прозрачности и возможности гибко ею управлять.

Недостатки: те же, что и для rgb. Так же не поддерживается в IE8 и ниже.

5. HSL.

Hue — цвет. Задается в диапазоне от 0 до 360, означает угол цветового круга (радуги, представленной в виде круга). Saturation — насыщеность цвета, задается в процентах. Lightness — яркость цвета, задается в процентах.

Этот пример дает представление о соответствии цветов градусам:

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

Здесь посередине исходный цвет, слева — с повышенной яркостью, справа — с пониженной насыщенностью:

С помощью HSL удобно подбирать подходящие оттенки не используя графические редакторы:

Преимущество: можно написать нужный цвет не пользуясь колорпикерами, легко подобрать несколько сочетающихся оттенков. Недостатки: не поддерживается в IE8 и ниже.

6. HSLA.

Как HSL, но с прозрачностью.

Например:

background: hsla( 0, 90%, 65%, .7 );

7. Ключевые слова.

transparent — для обозначения полной прозрачности.

currentColor — текущий цвет текста (color) для элемента.

Например, можно написать:

border: 5px solid currentColor;

И задавая каждому элементу свой цвет текста получить рамки разного цвета:

Можно даже совсем опустить ключевое слово, и цвет текста будет унаследован автоматически:

box-shadow: inset 0 0 2.5em;