Css darken: Dynamically change color to lighter or darker by percentage CSS

background-blend-mode | WebReference

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

Краткая информация

Значение по умолчанию	normal
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

background-blend-mode: normal | multiply | screen | overlay | darken | lighten 
  | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue 
  | saturation | color | luminosity

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.

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

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

normal

Обычный. Не используется смешивание цветов. Режим по умолчанию.

multiply

Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным.

screen

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

overlay

Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета.

darken

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

lighten

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

color-dodge

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

color-burn

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

hard-light

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

soft-light

Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения.

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

difference

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

exclusion

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

hue

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

saturation

Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета.

color

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

luminosity

Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.

Песочница

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

div {
  min-height: 300px;
  background: 
    url(image/animate-bg2.png) 400px center no-repeat,
    url(image/animate-bg1.jpg) 0 -200px no-repeat;
  background-blend-mode: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-blend-mode</title> <style> body { background: /* Параметры фонового изображения */ url(/example/image/aquaria. jpg) center / cover no-repeat fixed, linear-gradient(#00A8DE, #FFF) fixed; /* Градиент */ background-blend-mode: luminosity; /* Режим наложения */ } </style> </head> <body> </body> </html>

В данном примере к <body> добавляется фоновое изображение, растянутое на всё окно браузера, плюс вертикальный линейный градиент от голубого до белого цвета. В результате смешивания фонового изображения и градиента получается однотонное изображение, которое постепенно становится чёрно-белым. Результат примера продемонстрирован на рис. 1.

Рис. 1. Вид фона

Объектная модель

Объект.style.backgroundBlendMode

Примечание

Safari до версии 10 и iOS Safari до версии 10.3 не поддерживают значения hue, saturation, color и luminosity.

Спецификация

Спецификация	Статус
Compositing and Blending Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

		35	22	7. 1	10.1	30

	62		8	10.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Цвет и фон

См. также

• mix-blend-mode

mix-blend-mode ⚡️ HTML и CSS с примерами кода

normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity

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

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

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

Конечный цвет — результат multiply, если нижний цвет темнее или screen, если нижний цвет светлее. Этот режим смешивания эквивалентен hard-light, но со слоем обмена.

Конечный цвет состоит из самых темных значений каждого цветового канала.

Конечный цвет состоит из самых светлых значений каждого цветового канала.

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

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

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

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

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

Конечный цвет похож на hard-light, но мягче. Этот режим смешивания ведет себя аналогично hard-light. Эффект подобен сиянию рассеянного прожектора на заднем плане.

Конечный цвет — результат вычитания более темного из двух цветов из более светлого. Черный слой не действует, а белый слой инвертирует цвет другого слоя.

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

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

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

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

Конечный цвет имеет яркость верхнего цвета, используя оттенок и насыщенность нижнего цвета. Этот режим смешивания эквивалентен color, но при этом слои меняются местами.

Осветление или затемнение цвета CSS в Ruby on Rails

Осветление или затемнение заданного цвета является обычным требованием при разработке пользовательского интерфейса. Например, у нас будет кнопка со свойством box-shadow , которая темнее, чем кнопка background-color . Большинство таких стилей будут поставляться вместе с основными таблицами стилей. Также удобно иметь способы динамической генерации CSS в случае настраиваемых пользователем тем. Вот несколько способов осветлить и затемнить заданный HEX-цвет в Ruby.

Примечание : Хотя в качестве примера используется HEX, вы можете использовать любое определение цвета в своем понимании.

Если ваши потребности статичны и не меняются никакими пользовательскими настройками (т. е. стилями, хранящимися в базе данных), вы можете использовать помощники Sass lighten и darken .

Пример: app/assets/stylesheets/themes/default.sass

 $default-color: #4f99a6
.btn
  .btn-по умолчанию
    цвет фона: $ по умолчанию цвет
    box-shadow: 0 3px 0 затемнить ($ default-color, 15%)
 

Динамическое использование — представления и помощники

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

Saas в представлениях Haml

HAML поддерживает включение стилей Sass в представления. Он также поддерживает интерполяцию переменных ruby. В результате вы можете легко вставлять переменные Ruby в блоки Saas без особых усилий.

Пример: app/views/layouts/tenant.html.haml

 sass:
$default-color: #{current_tenent.theme.colors.default}
.btn
  .btn-по умолчанию
    цвет фона: $ по умолчанию цвет
    box-shadow: 0 3px 0 затемнить ($ default-color, 15%)
 

Slim

К сожалению, интеграция Slim с Saas не поддерживает вставку переменных. Однако он поддерживает переменную инъекцию в уценке, текстиле и rdoc. Надеюсь, они поддержат его в будущем.

В проектах с шаблонами Slim я использую другой подход. Это…

1. Иметь шаблон ERB для создания необходимого Sass (например: app/layouts/tenant/_theme.erb )
2. Вспомогательный метод для рендеринга шаблона и преобразования его в CSS

Шаблон Ex ERB app/views/layouts/tenant/_theme.erb

 $default-color: <%= theme.colors. default %>
.btn
  .btn-по умолчанию
    цвет фона: $ по умолчанию цвет
    box-shadow: 0 3px 0 затемнить ($ default-color, 15%)
 

Вспомогательный метод Ex

 def render_tenant_theme
  sass = визуализировать 'макеты/тенант/тема', тема: current_tenant.theme_data
  SassC::Engine.new(sass, синтаксис: :sass).render
конец
 

Plain Ruby

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

Проверьте репозиторий Github, чтобы узнать все его параметры. Его легко следовать и задокументировать.

 затемнение по умолчанию (html_code, процент = 85)
    Цвет::РГБ
      .from_html(html_code)
      .darken_by(в процентах)
      .html
  конец
 

Заключение

Эта статья является ответом на статью Джоэла Фридлендера «Осветление или затемнение шестнадцатеричного цвета в Ruby on Rails». Статье уже почти 10 лет, и я вижу, что младшие разработчики все еще ссылаются на нее и делают пиарщики, изобретая велосипед. Когда я проверил, почему, оказалось, что это первый результат, когда вы ищете что-то вроде рубиновый цвет темнее .

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

Как использовать цвет HSL в CSS на профессиональном уровне

При оформлении фасадов не имеет значения, используете ли вы CSS, Sass, стилизованные компоненты, эмоции, CSS-модули или что-то еще. Вы часто используете HEX или RGB для определения цвета. Это неправильно? Нет. Можешь сделать лучше? Да, в самом деле!

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

Что такое HSL (Hue Saturation Lightness)?

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

Как прочитать код цвета?

Чтобы прочитать цвет, сначала вам нужно взглянуть на оттенок (первая позиция в цветовом коде). Это диапазон от 0 до 360°. Что касается цветового круга, 0° соответствует красному цвету, 120° — зеленому, 240° — синему.

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

Далее идет насыщенность, 0% соответствует серому, 100% соответствует максимальной интенсивности. Последнее — легкость. 0% означает, что цвет черный, потому что полностью отсутствует свет, 50% — нейтральный цвет, 100% — белый. 380° соответствует 20°, а -120° соответствует 240°

Заинтересованы в других тенденциях разработки внешнего интерфейса? 🤔

Обязательно ознакомьтесь с нашим масштабным отчетом о состоянии интерфейса в 2022 году!

Дайте мне мою бесплатную копию

Что такого интересного в HSL?

Одним из самых больших преимуществ использования HSL является его удобочитаемость. Вам не нужно тратить много часов, чтобы научиться читать HEX-код. Кроме того, это намного проще, чем представить себе RGB.

CSS-переменные с HSL

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

Для вторичного цвета я добавил 180 к оттенку. Почему? Потому что теперь первичный и вторичный цвета являются дополнительными. Это базовая теория цвета. Посмотрите видео ниже. Это потрясающе! Посмотрев это, вы поймете преимущество HSL перед RGB или HEX.

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

Темные темы в последнее время очень популярны — это одна из главных функций в ряде приложений. Как тогда переключаться между светлой и темной темами? Конечно, с помощью Sass или даже чистого CSS (переключение некоторого класса «темной темы» с помощью JavaScript). В чем недостаток этого решения? Гораздо больше кода CSS.

Так что, возможно, вместо этого вам следует попробовать следующее решение.

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

Читаемость (опять же… 😉)

Предположим, у вас есть кнопка. Эта кнопка имеет текст белого цвета и фон этого цвета:  rgb(30, 144, 255) . Теперь предположим, что вы хотите сделать этот фон темнее при наведении курсора, чтобы увеличить его контраст.

Какой цвет использовать?

• A. RGB (30, 193, 255)
• B. RGB (107, 181, 255)
• C. RGB (178, 34, 143)
• D. RGB (178, 143)
• D. RGB (178, 34, 143)
• D. RGB (178, 34, 143) 0, 105, 209)

Сложно сказать, правда?

Теперь давайте проделаем то же самое с HSL. Базовый цвет: hsl(210, 100%, 56%) .

Какой цвет самый подходящий?

• A. hsl(197, 100%, 56%)
• B. hsl(210, 100%, 71%)
• C. hsl(315, 68%, 9044 %) 9044 028
• D. hsl(210, 100%, 41%)

Теперь процент правильных ответов должен быть значительно выше. Очевидно, ответ будет D.

Цветовая палитра

По сути, то, что вы делаете с Sass, можно сделать с помощью CSS. Вам нужно что-то облегчить? Просто добавьте немного яркости. Нужно сделать темнее? Вычтем это. Дополнить? Добавьте 180 к оттенку. И теперь, когда Sass заканчивается — у вас все еще есть переменные CSS. Триада? Просто добавьте 120 к первому цвету и 240 ко второму. Аналогичные цвета? Работа с переменной степени. 🙃

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

Как проверить код HSL для вашего RGB/HEX?

Chrome DevTools — замечательный инструмент. Просто осмотрите элемент с нужным вам цветом, найдите стиль (цвет, фоновый цвет и т. д.) и, удерживая кнопку Shift, щелкните квадратик с палитрой цветов. Он идет в таком порядке: HEX -> RGB -> HSL. Действительно хорошая функция.

Переключение между цветовыми кодами в Chrome DevTools

Если вы не хотите тратить время на поиск стиля для определенного цвета, вы можете просто открыть DevTools и добавить новый стиль color в element.style . Затем введите любой желаемый цвет ( красный — самый короткий 😉).

После этого откройте палитру цветов и щелкните цвет, значение (или значения) которого вы хотите узнать.

Прозрачность HSL

Работает точно так же, как и с RGB, просто добавьте альфа-канал со значением от 0 до 1. Это так же просто, как в примере ниже.

hsla(220, 70%, 45%, 0,3)

Как видите, HSL — это круто.