Как узнать тон цвета по коду на JavaScript

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

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

Конвертирование кода цвета в формат RGB

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

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

function colorToRGBA(color) {
    var cvs, ctx;
    cvs = document.createElement('canvas');
    cvs.height = 1;
    cvs.width = 1;
    ctx = cvs.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

Проверка и получение тональности цвета

function rgb2hsl(HTMLcolor) {
    HTMLcolor = colorToRGBA(HTMLcolor)

    r = HTMLcolor[0] / 255;
    g = HTMLcolor[1] / 255;
    b = HTMLcolor[2] / 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;
    if (max == min) {
	h = s = 0;
    } else {
	var d = max - min;
	s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	switch (max) {
	     case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	     case g: h = (b - r) / d + 2; break;
	     case b: h = (r - g) / d + 4; break;
	}
	h /= 6;
     }
     return [h, s, l]; // H - цветовой тон, S - насыщенность, L - светлота
}

Указание условий для тона цвета

В функции changeColor мы указываем условия в зависимости от тона. В моём случае 2 типа тона, светлый и тёмный, вы можете увеличить условия.

function changeColor (HTMLcolor) {
     e = rgb2hsl(HTMLcolor);
     if ((e[0]<0.55 && e[2]>=0.5) || (e[0]>=0.55 && e[2]>=0.75)) {
	colorText = '#000000'; // черный
     } else {
	colorText = '#FFFFFF'; // белый
     }
	
     return colorText
}