Конвертер цветов
С помощью универсального конвертер цветов вы можете легко перевести цвет из одной цветовой модели в ряд других.
В первую очередь, калькулятор служит для удобной работы с современными форматами 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 и прочие
Пояснения к статье:
- HEX, RGB, RGBA — способы определения цветов в CSS. Каждая из этих систем имеет свои значения.
- , , — 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. Но выбор всё равно очень ограничен, лучше задавать цвета с помощью определенных значений.
Где могут использоваться цвета.
Ниже мы представим список свойств, для которых можно задавать цветовые значения:
- Color > — цвет текста.
- Background-color > или background > — цвет фона.
- Border-color > или border > — цвет рамки.
- Outline-color > или outline > — цвет внешней рамки.
- Text-shadow > — цвет тени текста.
- 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 поставляется несколько самоповторяющихся узоров, которые могут быть использованы для полутонового растра.
Чтобы подготовить для преобразования черно-белый узор, преобразуйте изображение в градации серого и несколько раз примените фильтр «Размытие +». В результате получатся толстые линии с постепенными переходами от темно-серого до белого.
Источник