Статьи

Как рассчитать более светлые или более темные шестнадцатеричные цвета в JavaScript

Март 1, 2019

Использовать цвета в HTML, CSS и JavaScript легко. Однако часто необходимо программно генерировать цвета, т.е. вам нужен цвет, который на 20% ярче, чем # 123, или на 10% темнее, чем #abcdef.

CSS3 предоставляет отличное решение: HSL. Вместо того, чтобы использовать цвета hex или RGB, вы можете установить оттенок, насыщенность, яркость (или яркость ) и, при необходимости, непрозрачность, например 


color: hsla(50, 80%, 20%, 0.5);
background-color: hsl(120, 100%, 50%);

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

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

Существуют различные алгоритмы для изменения яркости цвета. Многие преобразовывают RGB в HSL, а затем обратно, что является довольно запутанным вычислением для сценариев на стороне клиента. Поэтому я написал быстрое и простое кросс-браузерное решение на JavaScript. ColorLuminance принимает два параметра:

  • hex — шестнадцатеричное значение цвета, такое как «#abc» или «# 123456» (хеш необязательный)
  • lum — коэффициент светимости, то есть -0.1 — на 10% темнее, 0.2 — на 20% светлее и т. д.

Полный код: 

 
function ColorLuminance(hex, lum) {

	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;

	// convert to decimal and change luminosity
	var rgb = "#", c, i;
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ("00"+c).substr(c.length);
	}

	return rgb;
}

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

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

 
ColorLuminance("#69c", 0);		// returns "#6699cc"
ColorLuminance("6699CC", 0.2);	// "#7ab8f5" - 20% lighter
ColorLuminance("69C", -0.5);	// "#334d66" - 50% darker
ColorLuminance("000", 1);		// "#000000" - true black cannot be made lighter!

Пожалуйста, просмотрите демонстрационную страницу ; градиент цвета генерируется с использованием серии из 100 элементов div

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

84
Share: