Как пользоваться приложением color rgb

Обновлено: 06.01.2025

Используйте встроенные значения цвета, определяйте пользовательские цвета и используйте альфа-канал.

Описание

Используя перечисление Color, вы можете легко получить доступ к цветам, которые определены в каскадных таблицах стилей HTML (CSS). Например, Color.Red возвращает чистый красный цвет. Вы можете найти список этих цветов в конце этой темы.

Функция ColorValue возвращает цвет на основе строки цвета в CSS. Строка может принимать любую из следующих форм:

Функция RGBA возвращает цвета, основанные на компонентах красного, зеленого и синего цветов. Функция также включает в себя альфа-канал для смешивания цветов элементов управления, которые расположены друг над другом. Значение альфа-канала варьируются от 0 или 0 % до 1 или 100 %. При 0 % цвет является полностью прозрачным и невидимым. При 100 % он полностью непрозрачен и полностью перекрывает любые слои позади элемента управления.

Функция ColorFade позволяет сделать цвет более светлым или темным. Показатель выцветания колеблется от -1, когда цвет становится полностью черным, до 0, когда цвет не изменяется, или же до 1, когда цвет становится белым.

Альфа-канал

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

Вы также можете смешивать изображения в форматах файлов, которые поддерживают альфа-каналы. Например, вы не можете смешивать файлы .jpg, но вы можете смешивать файлы .jpg. На следующем рисунке показаны те же красные, зеленые и синие цвета из предыдущего примера, но красный цвет отображается в виде закорючки (вместо круга) в файле .jpg с альфа-каналом 50%:

Если вы укажете значение перечисления Color или вы строите ColorValue с именем цвета или шестизначным шестнадцатеричным значением, значение альфа составляет 100%, что является полностью непрозрачным.

Цвета играют жизненно важную роль в формировании внешнего вида веб-страниц. С помощью CSS мы можем управлять основным цветом элементов и их фоновым цветом. Для этого, соответственно, используются свойства color и background . Когда, много лет назад, я изучал CSS, мне не удалось найти доходчивого руководства по использованию цветов в CSS. Поэтому я решил написать такое руководство сам. В этом материале я расскажу о типах цветов и о ключевых словах, используемых при работе с цветами. Мы поговорим о том, в каких ситуациях используются те или иные методики работы с цветами и рассмотрим примеры. Сразу скажу, что здесь я не буду касаться теории цвета.

Свойство color

На MDN можно найти сведения о том, что CSS-свойство color позволяет задавать основной цвет элемента (foreground color, его также называют «цветом переднего плана»), который описывает цвет текста элемента и цвет элементов оформления текста. На основе значения этого свойства устанавливается значение currentColor .

Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:

• Названия именованных цветов.
• Шестнадцатеричные коды цветов.
• Цвета, задаваемые с помощью функций rgb() и hsl() .
• Глобальные значения inherit , initial , unset .
• Ключевое слово currentColor .

Именованные цвета

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

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

В целом, я — не фанат именованных цветов, так как мне нелегко запомнить то, как именно выглядят такие цвета. Например, иногда я вижу, как веб-разработчики, в качестве значения свойства color , используют имена цветов white или black . Это, конечно, нельзя назвать неприемлемым, я не берусь осуждать тех, кто так поступает. Но, в целом, я не рекомендовал бы пользоваться именованными цветами. Вот единственная ситуация, в которой я воспользовался бы такими цветами:

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

Шестнадцатеричные цветовые значения

Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:

Сокращение шестнадцатеричных кодов цветов

Цвета, задаваемые в формате RGB/RGBA

При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.

Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.

При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :

Если значение, соответствующее альфа-каналу, равно нулю, тогда основной или фоновый цвет элемента окажется полностью прозрачным, то есть — невидимым.

Цвета, задаваемые в формате HSL

Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.

Цветовой круг

На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.

Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.

Выбор цветового тона

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

Выбор насыщенности и светлоты

Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.

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

Ключевое слово currentColor

Ключевое слово currentColor хранит значение CSS-свойства color . Его можно использовать для настройки элементов, которые, по умолчанию, не наследуют цвета от их родительских элементов. Вот некоторые свойства, значения которых, по умолчанию, устанавливаются равными currentColor :

• border-color
• text-decoration-color
• outline-color
• box-shadow

Как думаете, каким будет значение свойства border-color ? Очевидно — таким же, как и значение свойства color . Это так из-за того, что, по умолчанию, значением border-color является значение currentColor . Возможно, это легче представить себе, если переписать предыдущий пример так:

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

В этом примере currentColor можно использовать и для элемента <h1> , и для элемента <span> :

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

При проведении экспериментов с CSS-цветами можно воспользоваться одной полезной возможностью инструментов разработчика Chrome. Для вызова этой возможности нужно выбрать некий элемент, цвета которого заданы в шестнадцатеричном формате, и переключиться в режим его исследования. Затем нужно щёлкнуть по маленькому квадратику, который представляет цвет, используемый элементом в данный момент.

Переключатель

Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:

Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.

Браузеры по-разному работают с переменными

Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.

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

Цветовые значения, разделённые пробелами

Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.

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

Новый способ описания цветов лучше старого. Рекомендуется пользоваться именно им, так как новые CSS-функции, используемые для описания цвета ( lab() , lch() и color() ), будут работать только с переданными им значениями, разделёнными пробелами. Поэтому полезно будет привыкнуть к такому формату описания цветов, предусмотрев, что несложно, запасной вариант для тех браузеров, которые этот формат не поддерживают.

Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.

Глобальные значения (inherit, initial, unset)

Для того чтобы элемент унаследовал бы цвет от родительского элемента, можно воспользоваться глобальным значением inherit . Для того чтобы сбросить цвет, можно прибегнуть к значениям initial и unset . Рассмотрим пример, который поможет нам понять особенности использования этих значений.

▍Ключевое слово inherit

Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:

Цвет ссылок, используемый по умолчанию, выглядит так:

Если надо — можно, с помощью конструкции color: inherit , сделать так, чтобы ссылка, всё же, унаследовала бы цвет от родительского элемента.

▍Ключевое слово unset

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

Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:

Использование вышеприведённой конструкции позволит сбросить цвет до цвета, который может быть унаследован от элемента .hero . А это — именно то, что нам нужно.

Здесь со всем этим можно поэкспериментировать.

Сценарии использования и практические примеры

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

▍Полупрозрачный RGBA-цвет

Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.

Внутренняя граница

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

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

Полупрозрачный фон

▍Использование HSL-цветов

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

Это может пригодиться в паре ситуаций. Например, тогда, когда нужно сделать так, чтобы светлота цвета кнопки становилась бы меньше при наведении на эту кнопку мыши.

Кнопка становится темнее при наведении на неё указателя мыши

Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.

Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.

Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.

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

Цвет и изменение светлоты

Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.

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

Здесь я определил переменную --primary-h , хранящую сведения о цветовом тоне, и переменную --primary-l , в которую записано значение, представляющее собой базовую светлоту. Самое приятное тут то, что у меня теперь есть возможность настраивать цвет, меняя лишь переменную --primary-l :

Здесь можно найти рабочий пример.

▍Использование ключевого слова currentColor с SVG-иконками

Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.

Значок и текст должны быть одного цвета

Ключевое слово currentColor можно использовать для настройки SVG-атрибута fill , а затем назначить нужный цвет родительскому элементу. Взгляните на следующий HTML-код:

Вот применяемый здесь стиль:

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

Более того, тот же подход можно использовать для того чтобы создавать иконки, заключённые в прямоугольные полупрозрачные области, атрибут fill которых также задаётся с помощью currentColor . Это позволяет использовать CSS-свойство color для решения следующих задач:

1. Назначение цвета иконке.
2. Назначение прямоугольнику полупрозрачного варианта исходного цвета.

Настройка иконки, заключённой в цветной полупрозрачный прямоугольник

Вот соответствующий CSS-код:

Обратите внимание на то, что у элемента <rect> задан атрибут opacity . В разных вариантах иконки меняется лишь значение, соответствующее цветовому тону. Такой подход может оказаться крайне полезным в дизайн-системах, так как он позволяет, не прибегая к каким-то сложным конструкциям, создавать различные варианты значков и согласовывать их цвет с цветом обрамляющих их элементов.

Итоги

Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.

Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?

Тип <color> CSS data type предоставляет цвет в цветовом спектре sRGB. В <color> может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.

В <color> может быть определена любым из следующих способов can.

Примечание: В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS.

Синтаксис

Для типа данных задаётся <color> с помощью одного из следующих параметров.

Примечание: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.

Ключевые цвета

Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например red , blue , black или lightseagreen . Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.

Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
• В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
• Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
• Несколько ключевых слов являются псевдонимами друг для друга:
  • aqua / cyan
  • fuchsia / magenta
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey

  Примечание: Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:

  • CSS Level 1 включал только 16 основных цветов, называемых цветами VGA, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
  • CSS Level 2 добавил ключевое слово orange .
  • Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми ключевыми словами, цветами X11 или цветами SVG.
  • CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.

  Прозрачное ключевое слово

  Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent - это ярлык для rgba (0,0,0,0) .

  Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в градиент , текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением 0 .

  Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: background и border . Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color> .

  currentColor ключевое слово

  Ключевое слово currentColor представляет значение свойства элемента color (en-US) . Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.

  Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color .

  currentColor пример

  RGB цвет

  Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

  Синтаксис

  Примечание: начиная с уровня цветов CSS 4, rgba() является псевдонимом для rgb() . В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

  Пример

  RGB варианты синтаксиса

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

  RGB вариации прозрачности

  Цвет HSL

  Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

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

  Синтаксис

  Цвета HSL выражаются через функциональные обозначения hsl() и hsla() .

  Примечание: Начиная с уровня цветов CSS 4, hsla() является псевдонимом для hsl() . В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

  Функциональная нотация: hsl(H, S, L[, A]) или hsla(H, S, L, A) H (hue) - это <угол> цветового круга, заданного в deg S, rad s, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless <number> он интерпретируется как Градусы, как указано в CSS Color Module Level 3. По определению, red= 0 deg= 360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д. S ( насыщенность ) и L ( лёгкость ) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “ нормально .” A (alpha) can be a <number> between 0 and 1 , or a <percentage> , where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть <number> между 0 и 1 или <percentage> , где число 1 соответствует 100% (полная непрозрачность). Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A) CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

  Examples

  HSL варианты синтаксиса

  Полностью насыщенные цвета

  Нотация	Описание:	Итог
  hsl(0, 100%, 50%)	red
  hsl(30, 100%, 50%)	orange
  hsl(60, 100%, 50%)	yellow
  hsl(90, 100%, 50%)	lime green
  hsl(120, 100%, 50%)	green
  hsl(150, 100%, 50%)	blue-green
  hsl(180, 100%, 50%)	cyan
  hsl(210, 100%, 50%)	sky blue
  hsl(240, 100%, 50%)	blue
  hsl(270, 100%, 50%)	purple
  hsl(300, 100%, 50%)	magenta
  hsl(330, 100%, 50%)	pink
  hsl(360, 100%, 50%)	red

  Более светлая и более тёмная зелень

  Нотация	Описание:	Итог
  hsl(120, 100%, 0%)	black
  hsl(120, 100%, 20%)
  hsl(120, 100%, 40%)
  hsl(120, 100%, 60%)
  hsl(120, 100%, 80%)
  hsl(120, 100%, 100%)	white

  Насыщенная и ненасыщенная зелень

  Нотация	Описание:	Итог
  hsl(120, 100%, 50%)	green
  hsl(120, 80%, 50%)
  hsl(120, 60%, 50%)
  hsl(120, 40%, 50%)
  hsl(120, 20%, 50%)
  hsl(120, 0%, 50%)	gray

  Вариации прозрачности HSL

  Системный цвет

  Не все системные цвета поддерживаются на всех системах. для использования на общедоступных веб-страницах.

  ActiveBorder Активная граница окна. ActiveCaption Активный заголовок окна. Должен использоваться с текстом CaptionText в качестве цвета переднего плана. AppWorkspace Цвет фона интерфейса нескольких документов. Background Фон рабочего стола. ButtonFace Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана. ButtonHighlight Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. ButtonShadow Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу. ButtonText Следует использовать с ButtonFace или ThreeDFace цвет фона. CaptionText Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption . GrayText Серый (отключён) текст. Highlight Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана. HighlightText Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона. InactiveBorder Граница неактивного окна. InactiveCaption Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText . InactiveCaptionText Следует использовать с InactiveCaption неактивным цветом фона заголовка. InfoBackground Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана InfoText . InfoText Цвет текста элементов подсказки. Должен использоваться с и InfoBackground фона. Menu Фон меню. Должен использоваться с MenuText или -moz-MenuBarText строки меню цвет переднего плана. MenuText Текст в меню. Следует использовать с меню Цвет фона. Scrollbar Цвет фона полос прокрутки. ThreeDDarkShadow Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. ThreeDFace Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана. ThreeDHighlight Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. ThreeDLightShadow Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. ThreeDShadow Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Window Фон окна. Следует использовать с WindowText цвет переднего плана. WindowFrame Оконная рама WindowText Текст в windows. Следует использовать с цветом фона окна.

  Расширенные Цвета Системы Mozilla

  -moz-ButtonDefault Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна. -moz-ButtonHoverFace Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана. -moz-ButtonHoverText Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с- -moz-ButtonHoverFace background color. -moz-CellHighlight Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText . Смотрите также -moz-html-CellHighlight . -moz-CellHighlightText Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона moz-CellHighlight background . Смотрите также -moz-html-CellHighlightText выделения ячейки. -moz-Combobox цвет фона для комбинированных полей -moz-ComboboxText . Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-Field . -moz-ComboboxText > цвет текста для комбинированных полей. Следует использовать с цветом фона -moz-Combobox . В версиях до 1.9.2 вместо этого используйте -moz-FieldText . -moz-Dialog Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана - -moz-DialogText . -moz-DialogText Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog . -moz-dragtargetzone -moz-EvenTreeRow цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText . В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также -moz-OddTreeRow . -moz-Field Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана -moz-FieldText . -moz-FieldText Text field text color. Should be used with the -moz-Field , -moz-EvenTreeRow , or -moz-OddTreeRow background color. Текстовое поле цвет текста. Следует использовать с -moz-Field , -moz-EvenTreeRow или -moz-OddTreeRow цветом фона строки дерева. -moz-html-CellHighlight Background color for highlighted item in HTML <select> s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight . цвет фона для выделенного элемента в HTML <select> s. должен использоваться с цветом переднего плана -moz-html-CellHighlight . До Gecko 1.9, используйте -moz-CellHighlightText . -moz-html-CellHighlightText цвет текста для -moz-html-CellHighlight выделенных элементов в HTML <select> s. должен использоваться с цветом фона. До Gecko 1.9, используйте moz-html-CellHighlight . -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-MenuHover Цвет фона для зависших пунктов меню. Часто похожи на Highlight . Следует использовать с moz-MenuHoverText или -moz-MenuBarHoverText при наведении цвет текста переднего плана. -moz-MenuHoverText Text color for hovered menu items. Often similar to HighlightText . Should be used with the -moz-MenuHover background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста HighlightText . Следует использовать с -moz-MenuHover наведите цвет фона. -moz-MenuBarText цвет текста в строках меню. Часто похоже на текст меню " MenuText ". Должен использоваться поверх фона Menu . -moz-MenuBarHoverText Цвет для зависшего текста в строках меню. Часто похоже на -moz-MenuHoverText меню наведения текста. Следует использовать поверх -moz-MenuHover наведите фон. -moz-nativehyperlinktext цвет гиперссылки платформы по умолчанию. -moz-OddTreeRow цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText . В версиях Gecko до 1.9, используйте -moz-Field . Смотрите также -moz-EvenTreeRow . -moz-win-communicationstext следует использовать для текста в объектах с - moz-appearance :- moz-win-communications-toolbox; . -moz-win-mediatext следует использовать для текста в объектах с - moz-appearance :- moz-win-media-toolbox . -moz-win-accentcolor
  Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д. -moz-win-accentcolortext
  Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.

  Расширения Цветовых Предпочтений Mozilla

  -moz-activehyperlinktext Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию. -moz-default-background-color предпочтения пользователя для цвета фона документа. -moz-default-color предпочтения пользователя для цвета текста. -moz-hyperlinktext Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию. -moz-visitedhyperlinktext Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

  Интерполяция

  В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

  Соображения доступности

  Перевод полезной статьи от Buninux о создании цветовой палитры для веб-сайта или приложения. 8 советов по созданию качественных цветовых схем.

  Как создать качественную цветовую палитру для UI komarov.design

  Привет VC, с вами Егор Комаров и сегодня я хочу поделиться интересным материалом и подходом о создании цветовой палитры.

  Цвет повсюду. Работа с цветом — это неотъемлемая часть любого дизайн бренда и современный интерфейс стремится к его узнаваемости. Поэтому выбор и использование цветов для достижения бизнес-целей может оказаться тяжелой задачей для любого дизайнера.

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

  Первичный цвет — это первое с чем стоит определиться.

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

  Единственное правило здесь — это не использовать абсолютно белый или черный цвет.

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

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

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

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

  Семантические цвета используют:

  Этот метод исходит из основного дизайна, но он идеально подходит для цифровых продуктов. Правило 60% + 30% + 10% работает, потому что оно приносит ощущение баланса и помогает глазу плавно перемещаться от одной области CTA (call to action) к другой, направляя пользователя через интерфейс.

  60% — пространства предназначено для основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.

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

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

  Пример, для лучшего помимания правила «60–30–10»:

  Также можно применять цвета в другом порядке, и это все равно будет работать.

  Ключ к хорошему UX — понимание своей аудитории.

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

  Поэтому при выборе цвета важно задать следующие вопросы и ответить на них:

  • Кто ваша целевая аудитория?
  • Сколько им лет?
  • Какая специализация у вашего продукта?
  • Какие эмоции вы хотите, чтобы ваш бренд вызвал?

  Эти вопросы могут и должны повлиять на выбор, поэтому не стоит терять их, выбирая палитру UI и обсуждая свой выбор с командой.

  Использование фотографии, чтобы создать цветовую палитру

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

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

  Примеры для использования:

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

  Используйте контраст в зависимости от целей.

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

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

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

  Однако при проектировании UI высокий уровень контрастности также может быть вредным, если его применять неосторожно. Если текст слишком сильно контрастирует с фоном, то UI будет труднее просмотреть.

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

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

  Несколько советов, которые следует учитывать при разработке цифровых продуктов:

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

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

  Избегайте использования градации цвета в названиях, таких как Голубой или Темно-синий. Вместо этого используйте функциональные слова, которые лучше всего описывают цвет в пользовательском интерфейсе, например, «Положительный», «Предупреждение», «Активный», «Основной синий».

  Color Theory For Designers — узнайте больше о теории цвета и различных типах цветовых схем.

  The Psychology Of Color — узнайте значение каждого цвета.

  Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе

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

  Цвет должен создавать различие между элементами, с достаточным контрастом между ними.

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

  От себя бы я еще добавил пару советов при создании палитры.

  1. Тестируйте сразу альтернативную версию темной темы. Вам необязательно ее создавать для всего проекта. Возьмите пару экранов, сделайте темную версию и убедитесь в том, что ваша палитра сбалансирована и отлично работает как в светлом так и в темном варианте.

  2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов - тем проще будет при разработке.

  3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить "прозрачность" - используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.

  4. Дайте цвету созреть. Иногда, при создании палитры я пару дней даю ей созреть. Я создаю и сохраняю макеты и пару дней подряд открываю их с периодичностью на телефоне. Делаю это в разных сценариях: сразу после пробуждения, на солнце, ночью перед сном. Подобные действия позволяют мне определить, не является ли цвет слишком разрежающим, ярким или наоборот блеклым. Когда, я убеждаюсь в том, что мне цвет нравится во всех сценариях, то продолжаю с ним работать.

  Перевод на русский: Komarov.Design / Алина Остапенко

  ⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Telegram / Instagram / Facebook / Medium/ Linkedin. Там ты найдешь больше интересных материалов о дизайне.

  Автор выдаёт интересные материалы, плюсую.

  Считаю, что прозрачность лучше всего работает с текстом в монохроме и в hover state - в противном случае элементы, которые идут внахлест, будут иметь совсем иной цвет в разных контекстах (цветная шапка с вторичной СТА и тот же элемент на нейтральном фоне). Поэтому лучше иметь плотную заливку на каждый цвет.

  +++
  А ещё не поддерживаю комментарий автора по поводу использования одного значения прозрачности в светлой и тёмной теме. «Он и там и там, будет смотреться хорошо» – я ни разу на практике не видел, чтобы такое случалось :) В тёмной теме цвет должен быть в принципе другого оттенка, менее «яркого» (речь идёт не о характеристике Brightness, а о визуальном восприятии), чтобы снизить нагрузку на зрение.
  Опять же, кмк, лучше захардкодить плотную заливку, подобранную вручную.

  Ну вот один и тот же цвет. Читается и там и там текст. Контраст по алгоритму, допустимый. АА.

  То, что я на практике не встречал, это конечно же не значит, что такого не бывает :) Другое дело, что по моему мнению данный подход менее универсален. Речь идёт больше о "брендовых" цветах, условно – ярко синий цвет, ярко красный и прочие.

  конечно, но в любом случае, в дизайн системах, чем меньше всего - тем лучше.

  Оттенки всё равно же надо записывать, и неважно, используют ли они прозрачность или имеют плотную заливку. Для фронта это так и так +1 переменная. Мы как-то пытались на одном проекте уменьшить количество цветовых токенов, но так и не смогли прийти к идеальному решению.

  Про opacity не совсем понятно. Почему это она предпочтительнее непосредственных оттенков?

  Ну как, у тебя один цвет, белый например. Тебе надо три оттенка для него. Есть разница дополнительных отдельных три цвета менять или один белый? opacity к тому же менять не надо, если грамотно сделано, для темной и светлой темы. ред.

  Не проще ли прописать просто несколько номеров палитры, а не один номер и несколько значений opacity? Так удобнее лично мне и людям.

  Без визуализации не совсем полимаю о чем речь. Оpacity как угодно можно прописывать в гайде. Главное чтобы было понятно и удобно. Главное то, что на фронте, когда ты меняешь один цвет, остальные параметры opacity подтягиваются автоматически.

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

  Я вот думал на тему юзать HSL для палетты. Тогда оттенки легко можно извлечь параметром L сохраняя одинаковые H и S.

  Так мне кажется могут получиться общие кодированные параметры оттенков типо Primary-70, Primary-90 и Secondary-70.

  (И да я согласен что hex читается легче чем hsl)

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

  Не в коем случае не спор за лучший подход, интересен был твой опыт на тему HSL, буду иметь ввиду! Спасибо!

  Спасибо за статью. Интересный материал

  вот же вы ленивые ))) поправил ред.

  Нет :) Как минимум в разделах 4 и 8 остались битые ссылки, ведущие на komarov.design.

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

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

  Насчёт названий цветов в дизайн-системах. Замечал несколько разных подходов:

  1. Прямое название - в честь оттенка (Black, White, etc)
  2. Название по назначению (Comment, Stroke, etc)
  3. Название для состояния (Warning, Danger, etc)
  4. Градация по частоте (Primary, Secondary, etc)
  5. Цвета в зависимости от палитры (Accent, Brand, etc)

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

  Последний апдейт фигмы позволяет вкладывать все уровни друг в друга, что немного снимает боль (ведь ещё есть группировка по теме: Dark, Light, etc), но принципиально проблема однозначного именования цветов не решена.

  Когда смотришь чужие дизайн-системы, понимаешь, что подходы налеплены друг на друга в случайном порядке. Часть цветов названы оттенками, часть – состояниями, часть – в зависимости от палитры и так далее. Использовать это с удобством может только автор самой палитры :)

  Создание изображения в неправильном цветовом режиме может стать проблемой. Рассмотрим чем отличается цветовая модель RGB и цветовая модель CMYK .

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

  
  

  Что такое модель цвета RGB? RGB состоит из значений красного, зеленого и синего цветов. Эта схема более известна как аддитивная модель. Когда свет от экрана проецируется на цвета, он смешивает их вместе на сетчатке глаза, создавая нужные оттенки.

  Цветовая модель rgb это аддитивная модель!

  Аддитивные цвета создаются с помощью метода, который сочетает в себе множество разных оттенков. Красный, зеленый и синий – главные цвета, которые используются в аддитивной модели. Комбинации двух из этих цветов создают дополнительный цвет: голубой, пурпурный или желтый.

  
  

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

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

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

  
  

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

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

  Основной цвет для цветовой модели CMYK – черный ( K ). Добавление этого цвета помогает нейтрализовать изображения и увеличить плотность тени.

  
  

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

  Такие программы, как Photoshop , Illustrator и InDesign , предоставляют пресеты CMYK , которые помогают подобрать лучшую комбинацию настроек печати.

  Почему эти два режима отображаются по-разному?

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

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

  
  

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

  Какой режим нужно использовать?

  
  

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

  Еще одним преимуществом является то, что RGB позволяет работать с файлами меньшего размера. А также, что Photoshop , InDesign и Illustrator базируются на RGB и эта модель поддерживается в web .

  Но если в отпечатанной продукции важна точность цвета, то лучше использовать CMYK . Проектирование в этом цветовом режиме позволит получить более четкое представление о готовом продукте.

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

  Инструменты для конвертирования

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

  Adobe Photoshop , I llustrator и InDesign являются наиболее распространенными программами, используемыми для создания графических проектов. Они ориентированы на работу в режиме RGB .

  Поэтому данные редакторы упрощают преобразование в CMYK и установку конкретной схемы цветопередачи для печати. Это выполняется следующим образом:

  Illustrator: Файл > Цветовой режим документа > CMYK или RGB .

  
  

  InDesign: Окно> Цвет > CMYK или RGB .

  
  

  Пошаговая инструкция по настройке цветовых режимов для печати в Photoshop :

  Шаг 1 . Выберите меню « Редактирование » ( Edit ), затем пункт « Настройка цветов » ( Color Setting ).

  Шаг 2 . Выберите профиль CMYK , наиболее подходящий для печати.

  Шаг 3 . Вы можете выбрать опцию « Больше параметров », чтобы установить схему цветопередачи при преобразовании значений RGB в CMYK . « Перцепционный » метод лучше всего подходит для фотографий, поскольку сохраняет визуальное соответствие с исходным изображением.

  
  

  Шаг 4 . Откройте изображение RGB , которое нужно преобразовать.

  Шаг 5 . Внесите изменения, пока изображение еще находится в режиме RGB .

  Шаг 6 . Выберите меню «Просмотр» > «Предупредить при выходе за пределы цветового охвата , чтобы увидеть какие цвета стали серыми. Это означает, что их невозможно воспроизвести в режиме CMYK . Вместо этих цветов Photoshop будет подбирать ближайшие оттенки для замены в зависимости от схемы цветопередачи, которую вы задали заранее.

  Шаг 7 . Выберите меню «Изображение» > «Режим» >«Цвет CMYK» . Помните, что после преобразования некоторые яркие цвета могут стать тусклыми.

  
  

  Теперь вы знаете, как перевести rgb в cmyk в фотошопе.

  Вот некоторые бесплатные онлайн-сервисы для преобразования цветовых схем:

  А какую цветовую схему используете вы? Поделитесь своим опытом в комментариях!

  Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, дизлайки, подписки, лайки, отклики огромное вам спасибо!

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

  Читайте также:

    
  • Как оплатить в приложение такси максим премиальными
    
  • Приложение люди не работает
    
  • Какие приложения есть для люмия
    
  • Выбранное приложение не существует apple
    
  • Не скачивается расчетный листок из приложения оао ржд