Конвертеры цветов, перевод RGB, HEX, CYMK цветов. Как перевести из RGB в CMYK без потери цвета

HEX / HTML

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

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

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

1. h1 { color: #ff0000; } /* красный */
2. h2 { color: #00ff00; } /* зелёный */
3. h3 { color: #0000ff; } /* синий */
4. h4 { color: #00f; } /* тот же синий, сокращённая запись */

RGB

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

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

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

1. h1 { color: rgb(255, 0, 0); } /* красный */
2. h2 { color: rgb(0, 255, 0); } /* зелёный */
3. h3 { color: rgb(0, 0, 255); } /* синий */
4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

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

RGBA

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

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

1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
5. h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */

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

HSL

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

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

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

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

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

HSLA

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

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

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
2. h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
3. h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
4. h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
5. h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */

CMYK

Цветовая модель 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

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

LAB

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

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

Обычно это не проблема. Устанавливаем какой-нибудь профиль получше, можно попросить у типографии или скачать с сайта The European Color Initiative. Я использую профиль от европейской ассоциации потому что он адекватнее обрабатывает сложные цвета чем встроенные алгоритмы фотошопа. Ещё один плюс этого профиля - после цветоделения сумма красок не превышает 300%, что достаточно удобно.

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

Ярко-красная футболка - головная боль допечатника

Направляемся в меню Edit - Convert to Profile.

В списке находим нужный профиль и видим ужасную картину.

Футболка стала плоской и тусклой

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

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

Еще один способ немного спасти детализацию - понизить насыщенность цветов в RGB, чтобы они примерно попали в цветовой охват CMYK и затем после цветоделения подтянуть насыщенность обратно.

В данном случае я понизил насыщенность на 20 единиц, затем конвертировал изображение в CMYK с профилем PSO Coated v3. Затем уже в CMYK поднял насыщенность на те же 20 единиц и кривыми немного добавил насыщенности в желтом канале и в мадженте.

Получилось, конечно не так ярко, как в RGB, но всё-таки деталей сохранилось существенно больше.

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

Для начала нужно создать дубликат документа. Для этого находим на панели History кнопочку и нажимаем её.

Откроется дубликат нашего изображения на текущем этапе.

Теперь переводим этот дубликат в пространство Lab Image-Mode-Lab Color .

На панели каналов выберем Lightness. Сейчас он слишком тёмный для чёрного канала в CMYK.

Добавим ему контраста с помощью кривой.

Теперь вернемся к оригинальному изображению. Конвертируем его в CMYK с профилем PSO Coated v3 в режиме Relative Colometric. Этот режим меньше всего меняет цвета.

Дублируем текущий слой, чтобы потом стереть ненужное.

На панели каналов выбираем чёрный канал.

Теперь открываем меню Image-Apply Image . В качестве источника выбираем наш дубликат, канал Lightness, режим смешивания Normal, непрозрачность 100%.

Получившийся чёрный канал всё ещё немного темноват. Осветляем его кривой.

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

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

Кароче, меньше слов – больше дела. На примере простой показательной работы для моего постоянного заказчика это выглядит так:

1. Выбираем в главном меню вкладку “Редактирование” (Edit) и делаем тыц на “Преобразовать в профиль…” (Convert to Profile):

2. В открывшемся диалоговом окне ставим галочку напротив “Использовать компенсацию точки черного” (Use Black Point Compensation). В поле “Профиль”(Profile) выбираем “Заказной CMYK” (Custom CMYK):

3. В открывшемся диалоговом окне в поле “Цвет красок” (Ink Options) выбираем “SWOP (мелованная бумага)” (SWOP (Coated)). В поле “Растискивание” (Dot Gain) выбираем “Стандартное” со значением 12% (Standart, 12%). Далее установите значения и радиокнопки как на скриншоте ниже:

4. Подтверждаете свои действия клацанием по “Ок”. На этом перевод из RGB в CMYK завершен.

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

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

Кароче, меньше слов – больше дела. На примере простой показательной работы для моего постоянного заказчика это выглядит так:

1. Выбираем в главном меню вкладку “Редактирование” (Edit) и делаем тыц на “Преобразовать в профиль…” (Convert to Profile):

2. В открывшемся диалоговом окне ставим галочку напротив “Использовать компенсацию точки черного” (Use Black Point Compensation). В поле “Профиль”(Profile) выбираем “Заказной CMYK” (Custom CMYK):

3. В открывшемся диалоговом окне в поле “Цвет красок” (Ink Options) выбираем “SWOP (мелованная бумага)” (SWOP (Coated)). В поле “Растискивание” (Dot Gain) выбираем “Стандартное” со значением 12% (Standart, 12%). Далее установите значения и радиокнопки как на скриншоте ниже:

4. Подтверждаете свои действия клацанием по “Ок”. На этом перевод из RGB в CMYK завершен.