Цвета для css


Имена Цвета

В HTML цвет можно указать с помощью имени цвета:

Редактор кода »

HTML поддержки 140 стандартных названий цветов.


Цвет Фона

Можно задать цвет фона для HTML элементов:


Цвет Текста

Вы можете установить цвет текста:

Привет Мир

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Цвет Границ

Вы можете установить цвет границ:

Значение Цвета

В HTML, цвет также может быть задан с помощью RGB значений, HEX значений, HSL значений, RGBA значений, и HSLA значений:

Одинаковые имя цвета «Tomato»:

Одинаковые имя цвета «Tomato», но 50% прозрачность:


RGB Значение


В HTML цвет можно указать как значение RGB, использует эту формулу:

rgb(red, green, blue)

Каждый параметр (красный, зеленый, и синий) определяет интенсивность цвета от 0 до 255.

Например, rgb (255, 0, 0) отображается красным цветом, потому что красный имеет наибольшее значение (255), а остальные значения 0.

Чтобы отобразить черный цвет, все параметры цвета должны быть установлены в 0, например: rgb (0, 0, 0).

Для отображения белого цвета все параметры цвета должны быть установлены на 255, например: rgb (255, 255, 255).

Поэкспериментируйте, смешивая значения RGB ниже:

Оттенки серого часто определяются с использованием равных значений для всех трех источников света:


HEX Значение

В HTML цвет может быть задан с помощью шестнадцатеричного значения в форме:

#rrggbb

Где rr (красный), gg (зеленый) и bb (синий) являются шестнадцатеричными значениями между 00 и ff (такими же, как десятичные 0-255).

Например, #ff0000 отображается красным цветом, так как красный цвет имеет наибольшее значение (ff), а остальные — наименьшее значение (00).

Оттенки серого часто определяются с использованием равных значений для всех трех источников света:


HSL Значение


В HTML цвет можно задать с помощью оттенка, насыщенности и осветления (HSL) в форме:

hsl(Оттенок, Насыщенность, Осветление)

Оттенок — это градус на цветовом круге от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность — это процентное значение, 0% означает оттенок серого, а 100% — полный цвет.

Осветление также в процентах, 0% — черное, 50% — не светлое и не темное, 100% — белое


Насыщение

Насыщенность можно описать как интенсивность цвета.

100% чистый цвет, без оттенков серого

50% — это 50% серого, но вы все еще можете видеть цвет.

0% — полностью серый, вы больше не можете видеть цвет.


Освещение

Осветление цвета можно описать как количество света, которое вы хотите придать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни светлый) 100% означает полную освещенность (белый).


Оттенки серого часто задают тон и насыщенность на 0 и регулировку яркости от 0% до 100%, чтобы получить более темные/светлые оттенки:


RGBA Значение

Значения цвета RGBA являются расширением значений цвета RGB с альфа каналом — который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью:

rgba(красный, зеленый, синий, альфа)

Параметр alpha является числом от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачный):


HSLA Значение


Значения цвета HSLA являются расширением значений цвета HSL с альфа каналом — который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью:

hsla(hue, насыщение, освещенность, альфа)

Параметр alpha является числом от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачный):

schoolsw3.com

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

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

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

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

Цвета для css

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

Для себя я отсортировала их по оттенкам, моя таблица цветов лежит тут: Handy colors.

Преимущество: через некоторое время использования всегда знаешь как называется нужный цвет или наоборот — как выглядит на странице цвет, имя которого видишь в коде. Очень удобно для экспериментов с 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;

css.yoksel.ru

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

Пример:

  p {  	color: #211C18;  }  

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.


Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB, где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB. Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-код Сокращенная запись
#FFDD66 #FD6
#8833FF #83F
#333333 #333
#cccccc #ccc

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb, а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

  p {  	color: rgb(0, 255, 0);  }  

А вот желтовато-горчичный оттенок имеет такое значение:

  color: rgb(94, 81, 3);    /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */    color: #5E5103;  

Значение черного цвета записывается как (0, 0, 0), а белого – (255, 255, 255). Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:


  color: rgb(100%, 100%, 100%);  

Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

  p {  	color: rgba(94, 81, 3, .9);  }  

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:


  p {  	color: rgb(94, 81, 3);  	color: rgba(94, 81, 3, .9);  }  

Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

  p {  	color: hsl(165, 100%, 50%);  }  

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Цветовой круг HSL

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

  p {  	color: hsla(165, 100%, 50%, .6);  }  

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

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

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

  p {  	color: black;  }  

Существует 16 стандартных цветов, которые можно записать в значении свойства color:

Ключевое слово цвета HEX-код RGB
red #FF0000 255, 0, 0
maroon #800000 128, 0, 0
yellow #FFFF00 255, 255, 0
olive #808000 128, 128, 0
lime #00FF00 0, 255, 0
green #008000 0, 128, 0
aqua #00FFFF 0, 255, 255
teal #008080 0, 128, 128
blue #0000FF 0, 0, 255
navy #000080 0, 0, 128
fuchsia #FF00FF 255, 0, 255
purple #800080 128, 0, 128
white #FFFFFF 255, 255, 255
silver #C0C0C0 192, 192, 192
gray #808080 128, 128, 128
black #000000 0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

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

Итоги

В CSS цвет текста задается с помощью свойства color, а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

idg.net.ua

Свойство CSS Color

Свойства color воздействует не на сам элемент (блок), а на шрифт внутри него. Цвет элемента обычно регулируется с помощью свойств background-color, border-color, а также сокращенных версий свойств background и border. Также можно использовать свойство box-shadow, которое отвечает за тень элемента.

Свойство background-color, примененное к элементу, отвечает за его содержимое, поля и границы. Но есть способы оформить поля и контент разными цветами.

Объявление цвета

Есть три способа определения цвета текста CSS: RGB-значение, HEX и название:

Второй по счету пример (HEX-значение) наиболее распространен. Но HEX-значение покажется абсолютно бессмысленным, если вы не знакомы с принципом работы модели RGB.

RGB-значения

На цветных экранах устройств каждый пиксель делится на три субпикселя: красный, зеленый и синий — так называемые “первичные цвета света”. Комбинация этих трех цветов с различной интенсивностью позволяет получить любой оттенок, который способен распознать человеческий глаз и формирует таблицу цветов CSS.

Модели дисплеев различаются между собой по диапазону интенсивности излучения, который могут воспроизвести субпиксели. Самый простой экран может иметь лишь две интенсивности (то есть, режимы «включено» и «выключено»), в то время как высокотехнологичные современные экраны способны предложить обширную градацию. Обычно в компьютерных мониторах используются шкала от 0 до 255. Интенсивность каждого субпикселя может иметь значение до 256. А это значит, что значение каждого субпикселя можно хранить в виде 8-битного байта (28 = 256). Так как задействуется три цвета, то каждый из них представляется в 8 битах. Общее количество цветов превышает 16 млн. (2563 = 16,777,216).

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

В данном примере красный субпиксель выключен, зеленый используется наполовину, а синий — полностью включен. Такое объявление позволит нам получить следующий цвет:

В рамках данной системы объявление белого цвета (все цвета включены) выглядит так: rgb (255, 255, 255). Объявление черного цвета (все цвета выключены): rgb (0, 0, 0).

RGB-цвета также можно указывать в процентном соотношении, используя десятичные числа, но такой способ не получил широкого распространения:

HEX-значения

Аналогичный результат можно получить более простым — используя HEX-значение. Оно задается с использованием хэша (#) и 6 символов, разделенных на три пары:

Первая пара цвета в CSS отвечает за красный, вторая отвечает за зеленый, третья – за синий. В данном примере 00 означает, что красного не будет вообще. 80 указывает, что зеленый задействован наполовину, а ff означает полное включение синего цвета. То есть, мы получим тот же результат, что и при rgb (0, 128, 255).

Поначалу это может сбивать с толку, особенно если вы раньше никогда не работали с шестнадцатеричными числами. В привычной десятичной системе у каждого символа есть 10 значений от 0 до 9. В шестнадцатеричной – у каждого символа 16 возможных значений (0-9 и a-f). Это и позволяет указывать цвета от 0 до 255 при помощи двух символов, 0 = ff. В рамках шестнадцатеричной системы, белый цвет обозначается как #ffffff, а черный – #000000. HEX-значения наиболее часто используются для указания цветов в CSS.

Названия цветов в CSS

Последний способ указания цветов в CSS заключается в использовании предопределенных названий конкретных цветов. W3C регулярно обновляет таблицу цветов CSS. Например, вместо #000000 можно использовать название black.

На «заре» интернета эти названия позволяли использовать небольшой неофициальный набор “безопасных для веб” цветов, которые точно поддерживались всеми доступными на тот момент браузерами.

На сегодняшний день одно из главных преимуществ данного подхода заключается в том, что эти названия цветов гораздо проще запомнить. Например, слово lightblue (светло-голубой) запомнить гораздо проще, чем его эквиваленты: #add8e6 или rgb (173, 216, 230).

Перевод статьи “CSS Colors Reference” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Задание цвета по названию

Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.

Табл. 1. Названия цветов, их RGB, HEX и HSL код.
Имя Цвет RGB HEX HSL Описание
white   rgb(255, 255, 255) #ffffff или #fff hsl(0, 0%, 100%) Белый
silver   rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Серый
gray   rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Темно-серый
black   rgb(0, 0, 0) #000000 или #000 hsl(0, 0%, 0%) Черный
maroon   rgb(128, 0, 0) #800000 hsl(0, 100%, 25%) Темно-красный
red   rgb(255, 0, 0) #ff0000 или #f00 hsl(0, 100%, 50%) Красный
orange   rgb(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) Оранжевый
yellow   rgb(255, 255, 0) #ffff00 или #ff0 hsl(60, 100%, 50%) Желтый
olive   rgb(128, 128, 0) #808000 hsl(60, 100%, 25%) Оливковый
lime   rgb(0, 255, 0) #00ff00 или #0f0 hsl(120, 100%, 50%) Светло-зеленый
green   rgb(0, 128, 0) #008000 hsl(120, 100%, 25%) Зеленый
aqua   rgb(0, 255, 255) #00ffff или #0ff hsl(180, 100%, 50%) Голубой
blue   rgb(0, 0, 255) #0000ff или #00f hsl(240, 100%, 50%) Синий
navy   rgb(0,0,128) #000080 hsl(240, 100%, 25%) Темно-синий
teal   rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) Сине-зеленый
fuchsia   rgb(255, 0, 255) #ff00ff или #f0f hsl(300, 100%, 50%) Розовый
purple   rgb(128, 0, 128) #800080 hsl(300, 100%, 25%) Фиолетовый

Первоночально в стандартах W3C использовались лишь эти 16 ключевых слов для задания цветов. Позже в стандарты было добавлено ещё 130 цветов, полный их список смотрите тут: таблица цветов CSS.

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

<!DOCTYPE html> <html> <head> 	<title>RGB в CSS</title> 	<style> 		div.colorname {	/* создаём класс colorname только для тега div */ 			display: inline-block; 			width: 40px; 			height: 40px; 		} 	</style> </head> <body>  <div style="background: MediumTurquoise;" class="colorname">MediumTurquoise</div> <div style="background: brown;" class="colorname">brown</div> <div style="background: crimson;" class="colorname">crimson</div> <div style="background: blueviolet;" class="colorname">blueviolet</div> <div style="background: olivedrab;" class="colorname">rolivedrab</div>  </body> </html>

Вот как работает этот код:

Установка цвета с помощью RGB

RGB — аддитивная цветовая модель. На английском языке addition — добавление. RGB — это аббревиатура английских слов: Red, Green, Blue — красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

Модель RGB

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

Ближе к делу.

Для установки свойств в этом формате используется запись rgb(r, g, b), где r, g, b — это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Пример кода.

Чтобы всё стало понятно, приведу пример кода:

<!DOCTYPE html> <html> <head> 	<title>RGB в CSS</title> 	<style> 		div.rgb {	/* создаём класс rgb только для тега div */ 			width: 240px; 			height: 40px; 			line-height: 40px; 			text-align: center; 		} </style> </head> <body>  <div style="background: rgb(255, 0, 0);" class="rgb">rgb(255, 0, 0)</div> <div style="background: rgb(0, 255, 0);" class="rgb">rgb(0, 255, 0)</div> <div style="background: rgb(0, 0, 255);" class="rgb">rgb(0, 0, 255)</div>  </body> </html>

Вот так должен сработать этот пример:

Цвета в RGB
Рис.1. Цвета в RGB.

Пояснения к примеру.

В начале страницы создаём класс div.rgb, он нужен чтобы блоки созданные тегом <div> отображались нужным размером: 240px на 40px. Свойству line-height (высота строки) присваиваем значение — 40px, то есть равное высоте блока, это позволит отображать текст в блоке <div> по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align: center;}.

Далее, в коде устанавливаем фоновый цвет блока <div> при момощи атрибута style успользуя свойство background, а значения присваиваем rgb(255, 0, 0), rgb(0, 255, 0), и rgb(0, 0, 255). То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.

Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100).

Установка цвета с помощью RGBA

В CSS3 появился новый инструмент для работы с цветом — формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала — A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 — полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 — полупрозрачности в различной степени.

Пример кода.

<!DOCTYPE html> <html> <head> 	<title>RGBA в CSS3</title> 	<style> 		div.rgba { 			display: inline-block; 			width: 40px; 			height: 40px; 		} </style> </head> <body>  <div style="background-color: rgba(255,0,0,0.2);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.4);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.6);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.8);" class="rgba"></div> <div style="background-color: rgba(255,0,0,1.0);" class="rgba"></div>  </body> </html>

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

<!DOCTYPE html> <html> <head> 	<title>RGBA в CSS3</title> 	<style> 		div.rgb { 			display: inline-block; 			width: 40px; 			height: 40px; 		} 	</style> </head> <body>  <div style="background-color: rgb(243, 191, 189);" class="rgb"></div> <div style="background-color: rgb(246, 143, 142);" class="rgb"></div> <div style="background-color: rgb(249, 95 , 94);" class="rgb"></div> <div style="background-color: rgb(252, 47, 47);" class="rgb"></div> <div style="background-color: rgb(255, 0, 0);" class="rgb"></div>  </body> </html>

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым — абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0).

По шестнадцатеричному значению (HEX-код)

В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты — у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 — это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.

Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:

Табл. Десятичные и шестнадцатеричные числа меньше 16
Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

Табл. Десятичные и шестнадцатеричные числа больше 16
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

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

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB. Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF, C0 и CB. Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b)) — каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

<!DOCTYPE html> <html> <head> 	<title>HEX код в CSS</title> 	<style> 		div.hex {	/* создаём классс hex только для тега div */ 			width: 240px; 			height: 40px; 			line-height: 40px; 			text-align: center; 		} 	</style> </head> <body>  <div style="background: #FF0000;" class="hex">#FF0000</div> <div style="background: #00FF00;" class="hex">#00FF00</div> <div style="background: #0000FF;" class="hex">#0000FF</div>  </body> </html>

Этот код отобразит следующие элементы:

А вот рисунок с результатом из раздела «Установка цвета с помощью RGB» на этой странице выше.

Цвета в RGB
Рис.1. Цвета в RGB.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

#rrggbb —> #rgb

Например, цвет #ff22aa допустимо написать так — #f2a, или цвет #44aa22 допустимо указать в виде #4a2.

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.

Цветовой круг HSL
Рисунок 2. Цветовой круг HSL.

Второе значение — насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально «сочный», по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.

Третье значение — светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.

Установка цвета с помощью HSLA

Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.

Некоторые итоги и советы

Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.

Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?

.somebloсk { 	background-color: rgb(255,50,50); 	background-color: rgba(255,50,50,0.85) }

При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.

komotoz.ru


You May Also Like

About the Author: admind

Добавить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.