Мне очень нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 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;