Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Сделать цвет темнее или светлее с помощью javascript: цвет в формате hsl

Задача: Есть общий цвет блока. Нужно с помощью javascript вычислить цвет для заголовка такого же оттенка, но более темный.

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

Запись одного и того же цвета в разных форматах:

  • HEX: #117fb9
  • RGB: rgb(17, 127, 185)
  • HSL: hsl(201, 91%, 73%)

HSL расшифровывается как hue, saturation, lightness - тон, насыщенность и светлота. Первый параметр - это градусы цветового круга, может принимать значение от 0 до 360. Второй и третий параметры - процент, от 0 до 100. При получении цвета в формате hsl можно легко манипулировать со светлостью цвета, изменяя только последний 3-ий параметр.

Для перевода цвета в формат hsl воспользуемся формулами перевода из wikipedia.org. Обычно цвет хранится в формате HEX. А для перевода на понадобится запись цвета в формате RGB.

HEX формат цвета - это сокращенная запись цвета в формате RGB, но представленная в шестнадцатеричной формате. Каждая пара знаков обозначает по очереди содержание красного (r), зеленого (g) и голубого (b) цветов. В нашем примере цвет #117fb9 соответственно это 11( r ), 7f( g ), и b9 ( b ). При переводи этих трех чисел в десятеричный формат, получается: 17( r ), 127( g ) и 185( b ).


//функция перевода цвета из формата hex в массив hsl
function hexToHsl(color){  

    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); 
    let r = parseInt(result[1], 16) / 255;
    let g = parseInt(result[2], 16) / 255;
    let b = parseInt(result[3], 16) / 255;

    let cmin = Math.min(r, g, b);
    let cmax = Math.max(r, g, b);
    let delta = cmax - cmin;

    let hue, saturation, lightness;
    if(delta == 0){
        hue = 0;
    }else if(cmax == r && g >= b ){
        hue = (g - b) / delta;
    }else if(cmax == r && g < b ){
        hue = (g - b) / delta + 6;
    }else if(cmax == g) {
        hue = (b - r) / delta + 2;
    } else {
        hue = (r - g) / delta + 4;
    }
    hue = Math.round(hue * 60);

    lightness = ((cmax + cmin) / 2) * 100;
    lightness = Math.round(lightness);

    lightness = noMiddleColor(lightness);

    if(delta == 0 || lightness == 0){
        saturation = 0;
    }else{
        saturation = (delta / (1 - Math.abs(1 - (cmax + cmin)))) * 100;
    }
    if (saturation < 0) {
        saturation += 100;
    }
    saturation = Math.round(saturation);

    return Array(hue, saturation, lightness);
}

//функция для получения более темного или более светлого цвета того же оттенка и насыщенности.
//при положительном значении procent цвет будет светлее, при отрицательном - темнее.
function hslPerc(color, procent){
    let l = color[2];
    l = parseInt(l+l*procent/100);
    if(l > 100){l = 100;}
    return Array(color[0], color[1], l);
}

//функция возвращающая цвет в строчном формате из массива
function hslColor(color){
    return 'hsl('+color[0]+','+color[1]+'%,'+color[2]+'%)';
}
let color='#117fb9';
let darkColor = hslPerc(hexToHsl(color), -30);
element.style.color = hslColor(darkColor);

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