Темно серый rgb. Установка цвета для текста в CSS. Способы представления цветов

Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.

Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:

Ниже более подробно описаны перечисленные форматы.

Цвета CSS - шестнадцатеричные коды

Шестнадцатеричный код цвета - это шестизначное представление цвета. Первые две цифры (RR) - представляют собой красное значение, следующие две - это зеленое значение (GG), а последние - синее значение (BB).

Цвета CSS - короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета - это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвета CSS - RGB значения

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

Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .

Безопасные цвета браузера

Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.

Посмотри внимательно на рисунок. Фон у выпадающего окошка сделан полупрозрачным. Это довольно частый дизайнерский прием. Давай подумаем, как это можно реализовать.

Задача

Сделать кроссбраузерный полупрозрачный цвет.

Решение

Первая мысль в данной ситуации — использовать для фона png24-картинку с уже заданной полупрозрачностью. Но эта картинка совершенно лишняя. Можно прекрасно обойтись и без нее (а значит без лишнего запроса к серверу). Давай все-таки попробуем найти оптимальное решение.

Вторая мысль — использовать . Но в данном случае это не очень удобно. Ведь полупрозрачным тогда станет не только фон, но и надписи. Да, собственно, все окошко сразу.

Конечно, можно попробовать добавить дополнительный контейнер и применять opacity только к нему, но этот HTML-элемент будет предназначен только для оформления и явно будет лишним. Можно ли обойтись без него?

Конечно можно! Если использовать RGBA.

Формат описания цвета RGBA

CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255, вдруг кто не знает).

Синтаксис у этого дела очень простой:

Background: rgb(0, 255, 0); /* чистый зеленый цвет */

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).

Background: rgba(255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */

Вот оно, решение нашей задачки. Достаточно задать цвет фона с помощью rgba и все будет выглядеть как нам нужно. Без лишних картинок и элементов!

А где мне взять эти циферки?

Посмотреть на составляющие цвета можно используя инструмент фотошопа «пипетка»

О кроссбраузерности

Так как функция RGB значительно старше, чем RGBA и присутствует еще со времен стандарта CSS2, то для подстраховки от самых древних браузеров можно использовать такую дублирующую конструкцию:

SomeBlock { background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); }

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

Отдельно придется позаботиться об IE. Ослоподобные аж до 8-ой версии включительно не понимают RGBA.

Как всегда: землю — крестьянам, фабрики — рабочим, а ослам — костыль! В виде .

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

SomeBlock { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; }

Фишка в том, чтобы указать начальный и конечный цвета одинаковыми (ff0000 — красный) и воспользоваться тем, что для градиента в этом фильтре можно задать альфаканал (в примере значение 80).

Для справки: в фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Соответственно шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.

Проверено в:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

Выражаю опосредованную благодарность Google за идею и предлагаю коллегам эстафету: необходимо поделится с читателями зарубежными ресурсами по веб-разработке из своей RSS-ленты, которые предметно и интересно пишут по данному вопросу. Для снижения пустословия требуется выполнить ряд простых положений:

1. На своем блоге опубликовать перевод (можно вольный, с комментариями и дополнениями) статьи из представляемого ресурса.
2. Переводы как и их источники не должны повторяться, чтобы обеспечить охват и разнообразие информации.
3. Ссылочно упомянуть блогера, от которого получена благая весть и, по возможности, передать эстафетную палочку дальше.
4. Сроки эстафеты не устанавливаются; обязательно найдется тот, кто прекратит эту вакханалию.

Первоисточником данного поста послужила одна из заметок Дрю МакЛеллана на коллективно-календарном блоге 24ways . Поехали!

Что такое RGBA-цвет?

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

CSS3 предлагает пару новых способов задания цвета, один из которых — использование цветовой модели RGBA. Буква «A» в аббревиатуре означает «Альфа»; ее значение отвечает за величину прозрачности цвета. С помощью данной модели мы можем установить не только необходимое сочетание красного, зеленого и синего, но также определить, насколько цвет «просвечивает». Что-то подобное можно наблюдать при работе со слоями в Photoshop.

Для чего тогда свойство оpacity?

Дело в том, что определение прозрачности для цвета отличается от настройки прозрачности для элемента, заданное с помощью css-свойства opacity . Давайте посмотрим на примере.

У нас имеется заголовок h1 c определенными цветами для текста и фона, находящийся на странице с фоновым рисунком.

H1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); }

Путем установки свойства opacity , можно применить прозрачность ко всему элементу в целом:

H1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; }

RGBA-модель предоставляет нам более гибкую возможность — проконтролировать лишь цветовую прозрачность, а не весь элемент. Например, можно установить прозрачность только для фонового цвета:

H1 { color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); }

Или оставить фон без изменений и присвоить прозрачность только тексту:

H1 { color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); }

Вероятно, использование синтаксиса rgb () для определения цвета менее распространено чем шестнадцатеричная запись (вроде #fff), однако, в данном случае это железная необходимость, поскольку невозможно записать RGBA-значение в шестнадцатеричной нотации. Поэтому, задаем rgba () именно так:

Color: rgba(255, 255, 255, 0.5);

Так же как в rgb () , первые три значения отвечают за сочетание красного, зеленого и синего. Они могут принимать как целочисленные значения в диапазоне 0–255 так и процентные соотношения в промежутке от 0 до 100 %. Четвертое значение определяет степень прозрачности в диапазоне от 0 (абсолютно прозрачный) до 1 (совершенно непрозрачный).

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

Поддержка в браузерах

Большинство современных браузеров (Firefox, Safari, Opera, Google Chrome) поддерживают RGBA-цвета, но не Internet Explorer.

Ничего не остается, как указывать RGBA-цвета для браузеров, которые их поддерживают, а для остальных придумать свои «костыли».

CSS-парсинг работает в браузерах так, что если при разборе правил встретиться какое-либо неизвестное значение, оно будет проигнорировано. Воспользуемся этим знанием, чтобы отдавать для «непонимающих» браузеров обычный непрозрачный цвет. Для этого достаточно первым объявлением указать цвет в формате RGB , а вторым задать цветовой оттенок в формате RGBA — для браузеров поддерживающих данную цветовую модель.

H1 { color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); }

В случаях, когда вы хотите применить прозрачность для свойства background-color можно прибегнуть к использованию PNG-рисунка с альфа-каналом, чтобы добиться точно такого же эффекта. Конечно, это более затратный способ, в отличие от «чистого» CSS, поскольку придется создавать свой PNG для каждого уровня прозрачности, но на безрыбье и рак рыба.

Используем тот же принцип, что и в предыдущем примере: сначала задаем фон для всех браузеров, а затем переписываем строку с учетом RGBA.

H1 { background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; }

Следует отметить, что такая конструкция работоспособна, поскольку мы используем сокращенную форму записи background , позволяющую одновременно установить и фоновый цвет и фоновое изображение. Браузеры, столкнувшиеся с неизвестным значением rgba () целиком проигнорируют второю строку и будут обрабатывать первое объявление.

Кое-что еще

Главное преимущество RGBA — возможность создания различных дизайнерских решений без использования рисунков. Выгода здесь не только в более легких (как следствие — более быстрых) страницах, но и в выигрыше во времени: сайты с использование упомянутой технологии проще создавать и поддерживать. Под влиянием Javascript или в ответ на пользовательские действия значения в CSS могут с легкостью изменяться. Рисунки в нашем случае могут затруднить такие преобразования.

Div { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); } div:hover { color: rgba(255, 255, 255, 1); background-color: rgba(142, 213, 87, 0.6); }

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

Div { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); }

В заключение

Как это часто бывает, передовые нововведения в области CSS поддерживают передовые браузеры. Будем надеяться, что парни из Редмонда, кое-что осознают в жизни и присоединятся к большинству.

В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в 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-цветов:

Цветовая модель 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). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Второе и третье числа в скобках означают насыщенность (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:

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

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

Итоги

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

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