Меню

Руч цвета что это



Цветовые модели передачи цвета в WEB-дизайне

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

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

Как и следует из аббревиатуры модели, цветовое пространство RGB (Red — красный, Green — зелёный компонент и Blue — синий) описывает все возможные цвета и их оттенки, которые можно получить при смешивании основных составляющих красного, зелёного, и синего. Такой способ кодирования цвета позволяет описать позволяет представить 16 777 216 различных цветов. Это, пожалуй, самая популярная модель в компьютерной графике за счет 100% совместимости для всех интерпретаторов цвета.

Цифровые значения цветовых коэффициентов RGB – триада целых чисел в диапазоне от до 255. Таким образом, RGB(0, 255, 0) отображается как чисто зелёный, так как величина коэффициента зеленого цвета установлены в максимум, а остальные параметры установлены в 0.

Для удобства программистов, современные браузеры поддерживают представление коэффициентов и в процентном виде от 0% до 100%.

Примеры передачи цвета в WEB при помощи RGB-модели для CSS-стилей элементов:

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

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

Примеры передачи цвета в WEB при помощи RGBA-модели для CSS-стилей элементов:

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

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

Все коды цветов этой модели представляются в комбинированном виде из триады цифр в шестнадцатеричной системе счисления, в которой каждая из трёх групп отвечает за свой составляющий цвет. Длина группы фиксированная – 2 символа. Такой подход позволяет всё так же указать 256 состояний нужного цветового коэффициента. Значения каждого из групп коэффициентов должны быть между 00 и FF.

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов:

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

Цветовая модель HSL позволяет трактовать базовую модель RGB в проекции цилиндрической системы цветовых координат. Специалистами по колористике считается, что HSL позволяет указать цвета более понятным для простого человека способом, нежели типичная модель RGB. Аббревиатура HSL трактуется как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светимость, не путать с яркостью).

  • Первый коэффициент (Hue) указывает координату цвета в пределах цветового круга (от 0 до 360 градусов)
  • Второй коэффициент (Saturation) передаёт в процентном виде значение насыщенности (от 0% до 100%)
  • Последний коэффициент (Lightness) указывает процентное значение светлости (от 0% до 100%)

Примеры передачи цвета в WEB при помощи HSL-модели для CSS-стилей элементов:

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

Как и для RGBA, для HSL имеется расширенная модель HSLA с возможностью управлять альфа-каналом для обеспечения прозрачности заливки цвета.

Код цвета в HSLA указывается по формуле: HSLA(hue, saturation, lightness, alpha). Где последний параметр alpha — это дробное число в диапазоне от 0 (полностью прозрачная заливка) до 1 (непрозрачный цвет) с произвольным шагом.

OGmeta — бесплатный сервис, но Вы можете поддержать автора и угостить его чашечкой кофе для мотивации

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

Источник

Цвета HTML: rgb, hex и прочие

Пояснения к статье:

  1. HEX, RGB, RGBA — способы определения цветов в CSS. Каждая из этих систем имеет свои значения.
  2. , , — CSS свойства.
Читайте также:  Каким цветом можно покрасить кончики волос брюнетке

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

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

Как задать цвет?

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

Цвета HEX. HTML & CSS

В нашем примере мы будем изменять текст с помощью свойства color. Оно определяет цвет отображения текста.

Что такое HEX? Это шестнадцатеричная система счисления — hexademical(hex). Она отличается от стандартной десятеричной тем, что в её основе лежит 16 значений.

Шестнадцатеричная система содержит все стандартные числа, от 1 до 9, а также первые 6 букв латинского алфавита: A-F.

Формат записи Hex следующий — записывается 3 hex группы цифр, состоящие из 2 значений. Перед тем как записать цифру, обязательно укажите решетку, иначе свойство не будет работать.

Каждая группа цифр определяет один цвет — red, green, blue. По сути, та же самая rgb система, но с небольшими отличиями. О ней чуть позже.

Каждое двузначное значение определяет уровень того или иного цвета, из трех вышеуказанных.

Не обязательно записывать 6 цифр, можно ограничиться и 3. Это сокращает набор возможных цветов, но немного сокращает запись.

Работает запись только с теми цветами, 1 группа которых имеет одинаковые значения, например: #001122 — #012.

Цвета RGB. HTML & CSS

Это второй способ указания цветов. Здесь идет такой же порядок — red, green, blue, так же и расшифровывается аббревиатура. Однако, способ подачи немного другой, здесь уже используются десятичные числа, и запись в CSS выглядит немного по другому.

Для указания цвета необходимо ввести ключевое слово rgb, а затем открыть скобки, и указать цвета — 3 значения через запятую. Величина каждого значения — не более 255.

Как мы уже говорили, порядок цветов такой — red, green, blue. Для того, чтобы выделить один из этих цветов, либо же сделать его интенсивным, нужно оставить значение других цветов по умолчанию, а его поднять до 200-255.

Запись для белого цвета — rgb(255,255,255). Запись для черного цвета — rgb(0,0,0). Можете не указывать значение в цифрах, можно пользоваться процентами. 100% = 255.

Для того, чтобы получить значение какого-либо цвета, можно пользоваться специальными программами. Хорошим вариантом является Adobe Color CSS. Там вы найдете 2 значения цветов — hex, rgb.

В некоторых текстовых редакторах, таких как brackets, присутствует система изменения цветов. Для её включения нажмите комбминацию клавиш Ctrl + E.

Прозрачные цвета — rgba. HTML & CSS

По сути та же самая rgb система, так же указываются цвета — red, green, blue, одни и те же значение. Но есть одно небольшое отличие — прозрачность цвета.

Ключевое слово rgba имеет 4 свойства, первые 3 — цвета, а 4 — альфа-канал, который задает прозрачность.

Целых значение там немного — от 0 до 1. 0 делает цвет полностью прозрачным, а 1 — непрозрачным. Как же тогда использовать свойство? Очень просто: используйте десятичные дроби.

Казалось бы, значений всего 2, но вариантов — множество. Единственный плюс, что вам не нужно будет искать значение прозрачности в интернете, как с цветом. Можете просто экспериментировать.

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

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

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

В набор входят как самые простые — red, green blue, так и более сложные — aqua, maroon, navy. Но выбор всё равно очень ограничен, лучше задавать цвета с помощью определенных значений.

Читайте также:  Как изменить цвет волос с помощью басмы

Где могут использоваться цвета.

Ниже мы представим список свойств, для которых можно задавать цветовые значения:

  1. Color > — цвет текста.
  2. Background-color > или background > — цвет фона.
  3. Border-color > или border > — цвет рамки.
  4. Outline-color > или outline > — цвет внешней рамки.
  5. Text-shadow > — цвет тени текста.
  6. Box-shadow > — цвет тени блока.

Заключение

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

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

Источник

Что такое цветовые модели и какими они бывают

Небо голубое, незабудковое или, может быть, бирюзово-синее? Наше восприятие субъективно. Объективны компьютерные цветовые модели.

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

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

Цветовых моделей много: в них заложены разные принципы работы с цветами и разные возможности для их отображения. Давайте подробнее остановимся на четырёх моделях, с которыми чаще всего работают в Photoshop и других графических редакторах.

Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.

Цветовая модель Lab — ветеран компьютерной графики

Одна из ранних моделей, которая лежит в основе системы управления цветом в Photoshop. Модель Lab — это система координат из трёх осей:

  • L — Lightness, яркость объекта;
  • а — ось, по которой отложены градации от красного к зелёному;
  • b — ось с градациями от жёлтого к синему.

Давайте, например, возьмём бирюзовый цвет и взглянем на него на диаграмме. На шкале L показано, насколько он светлый. На шкале а — то, что он ближе к зелёному, чем к красному. На шкале b — что в нём больше синего, чем жёлтого:

Принцип работы Lab аналогичен тому, как нейроны сетчатки человеческого глаза кодируют цвета. Каждый цвет мы воспринимаем исходя из трёх координат. Светлый он или тёмный? Ближе к зелёному или к красному? В нём больше желтизны или синевы? Это называется оппонентные сигналы.

За единицу в модели принимается минимальное цветовое различие, воспринимаемое человеческим глазом. Поэтому Lab имеет максимальный цветовой охват .

Именно с Lab удобно работать при цветокоррекции, ретуши и подготовке к печати. Её главное преимущество — возможность изменять яркость без изменения цветовых значений: для этого изменяют значения по оси L.

Цветовая модель HSB — воплощение гуманизма

При описании цвета в быту большинство из нас оперируют тремя характеристиками: это сам цветовой оттенок, степень его бледности или насыщенности и степень его яркости. На этом построена система HSB: есть три координаты: Hue (цветовой тон), Saturation (насыщенность) и Brightness (яркость).

Визуально цветовую модель HSB можно представить в виде цилиндра. Насыщенность и яркость варьируются от 0 до 100%, а тон измеряется в градусах от 0 до 360.

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

Цветовая модель RGB — то, что мы видим на экране

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

Читайте также:  Цвет кошелька который приносит деньги

Например, посмотрим, как получается ярко-красный в системе RGB. Для этого нужно высокое значение по шкале R и низкие значения по двум другим.

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

С RGB обычно работают графические дизайнеры. Эта модель по умолчанию используется при подготовке изображений для цифровых носителей , потому что принцип её работы аналогичен излучению монитора. Оттенки, которые мы видим на экране, состоят из трёх базовых цветов, максимальная яркость экрана — это белый цвет, а отсутствие яркости — чёрный.

Даже при создании макетов для печати работа на компьютере преимущественно ведётся в RGB, а лишь на этапе предпечатной подготовки переводится в другую модель — CMYK.

Цветовая модель СMYK — так получают цвет из красок

Эта модель построена на смешении четырёх типографских красок: Cyan (сине-зелёный), Magenta (пурпурный), Yellow (жёлтый) и Key («ключевой» цвет — чёрный). Диапазон цветов на печати гораздо более узкий, чем на современных мониторах компьютеров. Модель СMYK позволяет увидеть на электронных устройствах, как изменятся цвета на бумаге.

В модели CMYK каждый цвет кодируется четырьмя координатами, значения которых могут быть от 0 до 100%. Разные оттенки получаются из-за разных соотношений голубого, розового, жёлтого и черного цвета в их составе. Белый цвет в модели CMYK — это отсутствие краски.

Так выглядит любая напечатанная картинка при большом увеличении:

Согласно идеальной модели, розовый, голубой и жёлтый на печати в сумме дают чёрный. Для чего тогда требуется четвёртая чёрная краска? Есть несколько причин:

  • Красители, созданные с помощью химических веществ, не идеальны. На практике смешение трёх красок обычно даёт грязно-коричневый цвет.
  • Цветные краски дороже. Например, если нам нужен тёмно-красный цвет, можно составить его из красного, синего и зелёного, а можно — из красного и чёрного. Второй вариант обойдётся дешевле при печати.
  • У бумаги ограничена впитывающая способность. Чтобы получить максимально близкий к чёрному цвет, используя голубой, розовый и жёлтый, на лист нанесут 300% краски — газетная бумага такого не выдержит. А чистый чёрный цвет — это всего лишь 100% процентов краски.

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

Несовершенство цветовых моделей

Модели Lab, HSB, RGB и CMYK — основные, с которыми сталкиваются дизайнеры, иллюстраторы и фотографы. Они упрощают работу, но реальная цветопередача не так предсказуема. Например, RGB и CMYK, с которыми работают чаще всего, — это аппаратно-зависимые модели.

Суть в том, что на смартфонах разных поколений одна и та же картинка будет различаться по цвету, на глянцевой и газетной бумаге оттенки тоже не будут совпадать. Поэтому модели RGB и CMYK включают в себя цветовые профили , максимально точно описывающие цвет под конкретный монитор или способ печати.

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

Если вы в Photoshop переведете картинку из RGB в CMYK, цвета, скорее всего, потускнеют — на бумаге можно передать меньше оттенков, чем на экране. Но трудности на этом не заканчиваются. Даже если макет отдан в печать в нужной цветовой модели, результат может оказаться непредсказуемым, потому что модель не определяет способ печати и тип бумаги. Для точной цветопередачи приходится учитывать как цветовые модели, так и цветовые профили.

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

Источник