Меню

Как сделать rgb цвета



Конвертер цветов

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

В первую очередь, калькулятор служит для удобной работы с современными форматами CSS3-цветов. Поддерживается конвертация из HEX в RGB/RGBA и HSL/HSLA, RGB в CMYK, XYZ, LAB, и обратно.

А также специальный функционал для замещения альфа-канала при переводе цвета из RGBA в RGB (и HSLA в HSL).

Справка по цветовым моделям

Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.

HEX / HTML

Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.

Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.

Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

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

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

Цветовые значения RGB поддерживаются во всех основных браузерах.

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

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

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

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.

Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

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

Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).

Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

Читайте также:  Описание бледно желтого цвета

HSB / HSV

HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.

HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).

Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

Источник

Цвета 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, который дает значения цветов во всех системах.

Источник

Преобразование между цветовыми режимами

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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

Преобразование изображения в другой цветовой режим

Изображение можно перевести из его оригинального (исходного) режима в другой (целевой). Выбор для изображения другого цветового режима приводит к необратимому изменению содержащихся в изображении значений цвета. Например, при преобразовании изображения RGB в режим CMYK цветовые значения RGB, выходящие за пределы цветового охвата CMYK (определенного параметром рабочего пространства CMYK в диалоговом окне «Настройка цветов» ), корректируются для попадания в этот цветовой охват. В результате этого некоторые данные изображения могут быть утрачены и не восстановятся при обратном переходе из режима CMYK в RGB.

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

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

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

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

Читайте также:  Какого цвета бывает шампанское

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

При преобразовании изображения в режим «Многоканальный», «Битовый формат» или «Индексированные цвета» производится его сведение, поскольку в этих режимах слои не поддерживаются.

Преобразование изображения в битовый режим

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

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

Изображения в битовом режиме содержат 1 бит на канал. Прежде чем преобразовывать в битовый режим изображение, содержащее 16 или 32 бита на канал, такое изображение необходимо сначала преобразовать в 8-битное в режиме градаций серого.

Если изображение цветное, выберите «Изображение» > «Режим» > «Градации серого». После этого выберите «Изображение» > «Режим» > «Битовый формат».

Если изображение выполнено в градациях серого, выберите «Изображение» > «Режим» > «Битовый формат».

Преобразует пикселы со значениями серого выше среднего уровня (128) в белые, а ниже этого уровня — в черные. В результате получается высококонтрастное черно-белое представление изображения.

Преобразует изображение, формируя из уровней серого геометрические структуры, состоящие из черных и белых точек.

Преобразует изображение с использованием метода диффузии, начиная с левого верхнего пиксела изображения. Если значение пиксела выше среднего серого (128), он становится белым, если ниже — черным. Поскольку исходный пиксел редко бывает просто белым или просто черным, неизбежно возникает погрешность, Эта ошибка переносится на окружающие пикселы и случайным образом распределяется по изображению, образуя гранулярную, зернистую текстуру, похожую на кинопленку.

Имитирует в преобразованном изображении полутоновые точки. В диалоговом окне «Полутоновый растр» вводятся следующие значения:

В поле «Линиатура» укажите значение линиатуры растра, выбрав единицу измерения. Значение может находиться в диапазоне от 1,000 до 999,999 линий на дюйм, либо от 0,400 до 400,00 линий на сантиметр. Можно вводить десятичные значения. Линиатура растра определяет частоту полутонового растра в линиях на дюйм (lpi). Линиатура зависит от используемой при печати марки бумаги и типа печатной машины. Для газет обычно используется линиатура в 85 линий, а для журналов — в 133 или 150 lpi. Уточните правильное значение линиатуры в своей типографии.

Введите значение угла растра в градусах от -180 до +180. Это значение определяет ориентацию растра. Одноцветные и черно-белые полутоновые растры обычно имеют угол 45°.

В поле «Фигура» выберите желательную форму точки.

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

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

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

Чтобы подготовить для преобразования черно-белый узор, преобразуйте изображение в градации серого и несколько раз примените фильтр «Размытие +». В результате получатся толстые линии с постепенными переходами от темно-серого до белого.

Источник