пудровый цвет в фотошопе код

Содержание

Таблица цветовых кодов RGB

Палитра цветов RGB

Таблица цветовых кодов RGB

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

Шестнадцатеричный: #
Красный:
Зеленый:
Синий:

Цветовое пространство RGB

Красный, зеленый и синий используют по 8 бит каждый, которые имеют целочисленные значения от 0 до 255. Это дает 256 * 256 * 256 = 16777216 возможных цветов.

RGB ≡ красный, зеленый, синий

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

Когда красный пиксель установлен на 0, светодиод выключен. Когда красный пиксель установлен на 255, светодиод будет полностью включен.

Любое значение между ними устанавливает частичное излучение светодиода.

Цветовой формат и расчет RGB

Код RGB имеет формат 24 бита (биты 0..23):

КРАСНЫЙ [7: 0] ЗЕЛЕНЫЙ [7: 0] СИНИЙ [7: 0]
23 16 15 8 7

Примеры расчетов

Белый цвет RGB

White RGB code = 255*65536+255*256+255 = #FFFFFF

Синий цвет RGB

Blue RGB code = 0*65536+0*256+255 = #0000FF

Красный цвет RGB

Red RGB code = 255*65536+0*256+0 = #FF0000

Зеленый цвет RGB

Green RGB code = 0*65536+255*256+0 = #00FF00

Серый цвет RGB

Gray RGB code = 128*65536+128*256+128 = #808080

Желтый цвет RGB

Yellow RGB code = 255*65536+255*256+0 = #FFFF00

Источник

Разбираемся с цветами, палитрами, фильтрами CSS и не только

7cfc62bbdc8a4cf94975d279ceb1440e

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

Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке.

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

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

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

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

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

c6f37dbee12edfd7c1caae9c62c174dc

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

Художники использовали этот тип частоты света ещё до того, как у нас появились мониторы. Сёра и пуантилисты использовали красный и зелёный цвета, чтобы получить жёлтый, на таких картинах, как «La Grande Jatte» (хотя сам Сёра предпочитал термин «хромо-люминаризм»). Другие люди называют подход дивизионизмом.

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

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

Битовая глубина 2 даст 4 цвета, и так далее, пока мы не достигнем битовой глубины 32, хотя обычно мониторы, отображающие веб-страницы, имеют плотность 24 битовой глубины и 16 777 216 цветов, — это True Color и альфа-канал.

True Color называется так потому, что наши глаза различают 10 000 000 уникальных цветов, а значит, 24-бит, безусловно, позволяет это. В этой 24-битной глубине по 8 бит отводится на красный, зелёный и синий цвета. Остальные используются для прозрачности или альфа-каналов.

Значения цвета

Последний раздел иллюстрирует, что rbga(x, x, x, y); передаёт информацию, но давайте разберём цветовые значения немного подробнее и покажем некоторые другие свойства и их использование. Цвета в канале RGB задаются в диапазоне 0-255.

Hex (шестнадцатеричные цвета)

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

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

Читайте также:  коды тн вэд отслеживание

Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 в десятичной системе счисления. Первый байт — красный, творой байт — зелёный, а байт 3 — синий.

Шестнадцатеричная система называется так потому, что в ней используется система оснований 16. В качестве значений используются диапазоны от 0-9 и от A-F, причём 0 — наименьшее значение, а F — наибольшее, то есть #00000 — чёрный, а #FFFFFF — белый.

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

image loaderТрёхмерное представление HSL

Оттенок вращается на 360 градусов, полный круг, а насыщенность и светлота — это проценты от 0 до 100. Представьте себе колесо, в центре которого находится плотное и насыщенное содержимое. Эта демонстрация довольно хорошо отражает систему.

image loaderhttps://css-tricks.com/examples/HSLaExplorer/

Если вы не особенно опытны в работе с цветом, hsla() позволяет использовать некоторые довольно простые правила для приятных эффектов для разработчиков. Подробнее об этом — в разделе “Генеративный цвет”.

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

Именованные цвета имеют репутацию неудобных из-за неточных названий.

Самые яркие, «знаменитые» примеры: тёмно-серый на самом деле светлее серого, а лайм и лайм-грин — совершенно разные цвета. Есть даже игра, где нужно угадать название цвета в вебе, созданная Крисом Хеилманном.

В давние времена chucknorris был кроваво-красным цветом (сейчас он поддерживается только в HTML, насколько я могу судить), это был мой любимый цвет.

Именованные цвета могут быть полезны в быстрой демонстрации, но обычно разработчики используют Sass или другие препроцессоры для хранения значений цветов в формате hex, rgba или hsla и сопоставления их с названиями цветов, используемых в компании.

Переменные цвета

Хорошая практика — хранить переменные цвета и никогда не использовать их напрямую, вместо этого отображая их на переменные с более осмысленными именами, вот так:

currentColor

Это невероятно полезно для систем иконок, либо шрифтовых SVG-иконок. Вы можете установить currentColor в качестве значения по умолчанию для заливки, обводки или цвета, а затем использовать семантически подходящие классы CSS для стилизации.

Препроцессоры

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

А ниже несколько интересных вещей, которые мы можем сделать с помощью Sass:

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

Свойства цвета

Прямоугольник и тень текста

Свойства box-shadow и text-shadow принимают значение цвета. Тени текста принимают 2 или 3 значения, h-shadow (горизонтальная тень), v-shadow (вертикальная тень) и необязательный радиус размытия.

Градиенты

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

Синтаксис градиентов не так уж сложно написать, но мне очень нравится работать с этим генератором градиентов, потому что он создаёт сложное свойство фильтра, поддерживая IE6-9. Есть ещё один очень красивый Open Source генератор.

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

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

Градиентный текст возможен только в webkit. Вот простой код на CSS-Tricks.

Генеративные цвета

Я использую его, чтобы сгенерировать эти цвета:

А также этот, с другим диапазоном (прокрутите очень быстро):

JavaScript

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

Смешение цветов и режимы смешения фонов

Если вы использовали эффекты слоёв в Photoshop, то, вероятно, знакомы с режимами смешивания (наложения). Почти каждый сайт в 90-е годы использовал их (мой тоже). Режимы смешивания и фонового наложения позволяют соединить два разных многослойных изображения, при этом доступно 16 режимов.

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

021acc6151e9074ed9d37ec154537ff2

Если вы хотите прослыть настоящим занудой, знайте, что формулы для режимов наложения зависят от типа эффекта. Например, multiply — это destination source = backdrop. Другие эффекты — это вариации простой математики с вычитанием, умножением, сложением и делением. Формула линейного эффекта — A+B-1, а эффекта Color Burn — это 1-(1-B)*A.

Вот более обширная документация, а ниже простая демонстрация, иллюстрирующая работу цвета в таких эффектах:

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

Фильтры

Фильтры CSS предоставляют множество классных цветовых эффектов, а также возможность взять цветное изображение и сделать его серым. На CSS-Tricks есть замечательный ресурс, который показывает, как они работают, и хорошо поддерживается браузерами. У Беннета Фили вы найдёте хорошую галерею фильтров.

Фильтры и режимы размытия могут работать вместе! Уна Кравец создала этот классный инструмент под названием CSS Gram, комбинируя некоторые эффекты, чтобы создать фильтры из Instagram. В конце есть хорошая документация.

Читайте также:  почему не работает чит энджин

feColorMatrix

В другой статье Уна исследует создание этих изображений через feColorMatrix, — примитива фильтра в SVG, который также может применяться к элементам HTML. Он очень мощный и позволяет точно настроить цвет. Как следует из названия, базовая разметка feColorMatrix использует матрицу значений, а применяется она через её относительный id.

Матрицу можно расширить и отрегулировать оттенок, насыщенность и так далее:

В статье Уны подробно рассматриваются все возможности этого инструмента. Ещё больше информации об этом и многих других сумасшедших цветах SVG, а также об инструментах градиента в книге Амелии Белами-Ройд от O’Reilly или в исследовательской демонстрации Майка Муллани.

67ea30bd6705cc8334f590acbddea36e

Доступность и другие замечания

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

Доступность цвета можно измерить многими инструментами. Ниже некоторые из моих любимых:

Также очень хорошо с самого начала настроить свою палитру так, чтобы она была доступной [контрастной].

Color Safe — отличный инструмент, который помогает в этом. Как только вы всё подготовите, WAVE (Web Accessibility Tool) поможет оценить веб-страницу.

Цвет и атмосфера

Атмосфера влияет на цвет. Знать это довольно важно, если вы собираетесь создать хоть какую-то иллюзию глубины. Предметы ближе к вам более насыщены и контрастны. Предметы дальше более размыты.

b14175deeaf9959221cba4cddab4a51eЛандшафт подчёркивает зависимость контраста от расстояния

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

7577f9a36ff069a181cacb7a9e7dfe7a

Нативный ввод цвета

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

Отобразит элемент выбора цветов, например такой:

image loader

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

Этот пен Ноя Блона показывает, как использовать его в сочетании с цветовым фильтром hue в CSS, чтобы выбирать части изображения динамически и изменять цвета. Оставшаяся часть изображения — это градации серого, поэтому она не затрагивается, что довольно умно.

Полезное

Color Highlighter Plugin для Sublime Text я использую, чтобы увидеть, какой цвет интерпретирует браузер. Мне нравится использовать <"ha_style": "outlined">.

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

Бенджамин Найт написал аналог Adobe Color при помощи d3 на CodePen, инструмент довольно крут и заслуживает внимания.

Если вы хотите, чтобы веб делал за вас тяжёлую работу (а кто этого не хочет?), посмотрите на Coolors, настолько простой, насколько это возможно.

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

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

Продолжить изучение цветов, чтобы стать профессиональным веб-разработчиком, вы можете на наших курсах:

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

image loaderПрофессии и курсы

Data Science и Machine Learning

Источник

· Инструмент для подбора цветов и генерации цветовых схем ·

eeee

Схема:
Насыщенность/Яркость

e

Схема:
Контрастность

e

Выбранный Вариант:
Насыщенность/Яркость

eeeee

Постоянный адрес текущей цветовой схемы:

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

Источник

Как вставить код цвета в фотошопе

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

Ищем цвет существующей точки

placeholder260 gray

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

Читайте также:  код тн вэд картона

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

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

placeholder260 gray

Для чего нужен инструмент «Цветовой эталон»?

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

promo max 19

Смена палитры цветов

Вместо палитры цветов Adobe можно пользоваться палитрой цветов операционной системы или палитрой сторонней разработки.

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

Добавление и удаление образцов цвета

Можно добавлять или удалять образцы цвета на панели «Образцы».

Можно также добавить образец цвета из палитры цветов, нажав кнопку «Добавить в образцы».

Добавление цвета в панель «Образцы»

Нажмите кнопку «Новый образец» ( ) на панели «Образцы». Либо выберите «Новый образец» из меню панели «Образцы».

Поместите указатель мыши над пустым местом в нижней строке панели «Образцы» (он превратится в инструмент «Заливка») и щелкните, чтобы добавить цвет. Введите имя нового цвета и нажмите кнопку »ОК».

wc swatches palette 1483547278747

(Только Creative Cloud) Выберите «Загрузить образцы» в меню панели. Затем в окне «Загрузить» перейдите к файлу HTML, CSS или SVG, и нажмите кнопку «ОК». Photoshop считает цветовые значения, указанные в документах. Данная функция распознает следующий синтаксис цветов HTML/CSS: #112233, #123, rgb (1, 2, 3), rgba (1, 2, 3, 4), hsb (1, 2, 3) и hsba (1, 2, 3, 4).

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

Во многих случаях удобно не только получить цвет, передаваемый в Интернете без искажений, но и иметь возможность получить его обозначение для использования на web-странице. Это можно сделать при помощи специального поля. В нем отображается HTML-код текущего цвета. При помощи его контекстного меню можно скопировать код или вставить его в поле (тем самым выбрать новый цвет). Таким образом, у вас есть возможность непосредственно поместить код цвета в HTML-документ или загрузить его из HTML в Фотошоп. Вы также можете задать код цвета вручную, просто введя его с клавиатуры.

ПРИМЕЧАНИЕ. Для выполнения операций с полем ввода необходимо выделить содержащийся в нем текст.

Пользователи, предпочитающие выбирать цвет при помощи панели Цвет (Color), также могут использовать безопасную палитру и различные цветовые модели. Выбрать режим можно при помощи меню, появляющегося после нажатия на кнопку со стрелкой. Это меню изображено на рис. 3.9. В нем находятся команды выбора способа представления цвета (RGB, CMYK, Lab и т. д.), команда копирования в буфер обмена HTML-кода цвета (Копировать как HTML (Copy Color as HTML)), команды выбора режима спектра, расположенного на панели, а также команда Безопасный для Web спектр (Make Ramp Web Safe). При подготовке web-графики особенно полезной может оказаться команда Ползунки цветов Web (Web Color Sliders). После ее вызова при помощи ползунков, задающих цветовые составляющие, выбирается только «безопасный» цвет. На рис. 3.10 изображена панель Цвет (Color) в режимах Ползунки RGB (RGB Sliders) и Ползунки цветов Web (Web Color Sliders).

3 9

Рис. 3.9. Меню настройки панели Colors

3 10a

Рис. 3.10. Панель Color в режимах RGB Sliders (слева) и Web Color Sliders (справа)

Обратите внимание на символ несоответствия выбранного цвета безопасной палитре, отображаемый в режиме выбора безопасных цветов. Щелкнув на нем, вы сможете принять для использования предложенный программой эквивалент. Вы также можете выбирать безопасные цвета из спектра, вызвав предварительно из меню панели команду Безопасный для Web спектр (Make Ramp Web Safe).

СОВЕТ. Вызвать панель Цвет (Color) на экран можно при помощи команды Окно > Показать Цвет (Window > Show olors).

ПРИМЕЧАНИЕ. При переводе панели Цвет (Colors) в безопасный режим вы сможете выбирать из фиксированного набора цветов «безопасной» палитры. Возможные значения цветовых составляющих отмечены на ползунках штрихами.

Несмотря на то, что окно выбора цвета и панель Цвет (Color) предоставляют возможность работы с безопасной палитрой, гораздо удобнее выбирать стандартные цвета при помощи панели Каталог (Swatches) (см. рис. 3.11). Она вызывается на экран командой Окно > Показать Каталог (Window > Show Swatches).

Переключить панель в режим отображения безопасных цветов можно, выбрав из ее меню одну из следующих команд: Web Hues.aco, Web Safe Colors.aco или Web Spectrum.aco.

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

3 11

Рис. 3.11. Панель Swatches

Нажав кнопку Создать образец цвета переднего плана (Create new swatch of foreground color), расположенную на панели Каталог (Swatches), вы можете создать из цвета переднего плана новый образец. Чтобы удалить образец, перетащите его при помощи мыши на специальную кнопку, расположенную на той же панели.

СОВЕТ. Вы можете в любой момент вернуть панель Каталог (Swatches) в исходное состояние. Для этого достаточно вызвать из ее меню команду Сбросить каталог (Reset Swatches). Также полезно знать, что каталоги цветов, поставляемые с программой, находятся в подкаталоге PresetsColor Swatches каталога, в который был установлен Фотошоп.

Источник

Поделиться с друзьями
admin
Здоровый образ жизни: советы и рекомендации
Adblock
detector