Программно осветлить или затемнить шестнадцатеричный цвет (или RGB, и смешать цвета)

Вот функция, над которой я работал, чтобы программно осветлить или затемнить шестнадцатеричный цвет на определенную величину. Просто передайте строку, например, "3F6D2A"для color ( col) и base10 integer ( amt) для количества, которое будет светлее или темнее. Чтобы затемнить, введите отрицательное число (т.е. -20).

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

function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}


// TEST
console.log( LightenDarkenColor("3F6D2A",40) );

Для разработки используйте здесь более удобную для чтения версию:

function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  var b = ((num >> 8) & 0x00FF) + amt;
  var g = (num & 0x0000FF) + amt;
  var newColor = g | (b << 8) | (r << 16);
  return newColor.toString(16);
}


// TEST
console.log(LightenDarkenColor("3F6D2A", -40));

И, наконец, версия для обработки цветов, которые могут (или не могут) иметь «#» в начале. Плюс настройка для неправильных значений цвета:

function LightenDarkenColor(col,amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col,16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

Итак, теперь это не просто пара строк, но кажется, что это намного проще, и если вы не используете «#» и вам не нужно проверять цвета вне диапазона, это всего лишь пара строк.

Если вы не используете «#», вы можете просто добавить его в код, например:

var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);

Я предполагаю, что мой главный вопрос, я прав здесь? Разве это не охватывает некоторые (нормальные) ситуации?

Ну, этот ответ стал своим собственным зверем. Много новых версий, это было глупо долго. Большое спасибо всем великим авторам этого ответа. Но, чтобы все было просто для масс. Я заархивировал все версии / историю развития этого ответа на свой github . И началось все заново с StackOverflow с самой новой версией. Особая благодарность Майку 'Pomax' Kamermans за эту версию. Он дал мне новую математику.

Эта функция ( pSBC) принимает цвет HEX или RGB. pSBCможет затенить его темнее или светлее или смешать со вторым цветом, а также может передать его прямо через него, но конвертировать из шестнадцатеричного в RGB (Hex2RGB) или из шестнадцатеричного RGB в шестнадцатеричный (RGB2Hex). Все без вас, даже не зная, какой цветовой формат вы используете.

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

Эта функция использует Log Blending или Linear Blending. Тем не менее, он НЕ конвертируется в HSL, чтобы правильно осветлить или затемнить цвет. Следовательно, результаты этой функции будут отличаться от тех функций, которые намного больше и медленнее, которые используют HSL.

jsFiddle с pSBC

github> pSBC Wiki

Особенности:

• Автоматически определяет и принимает стандартные шестнадцатеричные цвета в виде строк. Например: "#AA6622"или "#bb551144".
• Автоматически определяет и принимает стандартные цвета RGB в виде строк. Например: "rgb(123,45,76)"или "rgba(45,15,74,0.45)".
• Оттенки цветов к белому или черному в процентах.
• Смешивает цвета вместе в процентах.
• Делает ли Hex2RGB и RGB2Hex конвертацию одновременно или в одиночку.
• Принимает 3-значные (или 4-значные w / alpha) цветовые коды HEX в форме #RGB (или #RGBA). Это расширит их. Например: "#C41"становится"#CC4411" .
• Принимает и (линейный) смешивает альфа-каналы. Если либо c0цвет (от), либо цвет c1(до) имеет альфа-канал, то возвращаемый цвет будет иметь альфа-канал. Если оба цвета имеют альфа-канал, то возвращаемый цвет будет представлять собой линейную смесь двух альфа-каналов с использованием заданного процента (как если бы это был обычный цветовой канал). Если только один из двух цветов имеет альфа-канал, эта альфа будет просто передана возвращаемому цвету. Это позволяет смешивать / затенять прозрачный цвет, сохраняя уровень прозрачности. Или, если уровни прозрачности также должны смешиваться, убедитесь, что оба цвета имеют альфа. Когда затенение, это пройдет альфа-канал прямо через. Если вам нужна базовая заливка, которая также затеняет альфа-канал, используйте rgb(0,0,0,1)или rgb(255,255,255,1)какc1(до) цвет (или их шестнадцатеричные эквиваленты). Для цветов RGB альфа-канал возвращаемого цвета будет округлен до 3 десятичных знаков.
• Преобразования RGB2Hex и Hex2RGB неявны при использовании смешивания. Независимо от c0(от) цвета; возвращаемый цвет всегда будет в цветовом формате c1(до) цвета, если таковой существует. Если c1цвета нет, передайте его 'c'как c1цвет, и он закрасит и преобразует c0цвет. Если требуется только преобразование, укажите 0также и процент ( p). Если c1цвет пропущен или не stringпередан, он не будет преобразован.
• Вторичная функция также добавлена ​​к глобальной. pSBCrможет быть передан Hex или RGB цвет, и он возвращает объект, содержащий эту информацию о цвете. Это в форме: {r: XXX, g: XXX, b: XXX, a: X.XXX}. Где .r, .gи .bимеют диапазон от 0 до 255. А когда нет альфа - : .a-1. В противном случае: .aимеет диапазон от 0,000 до 1000.
• Для вывода RGB выводится rgba()больше, rgb()когда цвет с альфа-каналом был передан в c0(из) и / или c1(в).
• Незначительная проверка ошибок была добавлена. Это не идеально. Это все еще может привести к сбою или созданию тряски. Но это поймает некоторые вещи. По сути, если структура в некотором смысле неверна или процент не является числом или выходит за рамки, он вернется null. Пример: pSBC(0.5,"salt") == nullгде, как он считает, #saltявляется допустимым цветом. Удалите четыре строки, которые заканчиваются, return null;чтобы удалить эту функцию и сделать ее быстрее и меньше.
• Использует смешивание журналов. Передайте truefor l(4-й параметр), чтобы использовать Linear Blending.

Код:

// Version 4.0
const pSBC=(p,c0,c1,l)=>{
    let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
    if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
    if(!this.pSBCr)this.pSBCr=(d)=>{
        let n=d.length,x={};
        if(n>9){
            [r,g,b,a]=d=d.split(","),n=d.length;
            if(n<3||n>4)return null;
            x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
        }else{
            if(n==8||n==6||n<4)return null;
            if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
            d=i(d.slice(1),16);
            if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
            else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
        }return x};
    h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
    if(!f||!t)return null;
    if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
    else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
    a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
    if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
    else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
}

Применение:

// Setup:

let color1 = "rgb(20,60,200)";
let color2 = "rgba(20,60,200,0.67423)";
let color3 = "#67DAF0";
let color4 = "#5567DAF0";
let color5 = "#F3A";
let color6 = "#F3A9";
let color7 = "rgb(200,60,20)";
let color8 = "rgba(200,60,20,0.98631)";

// Tests:

/*** Log Blending ***/
// Shade (Lighten or Darken)
pSBC ( 0.42, color1 ); // rgb(20,60,200) + [42% Lighter] => rgb(166,171,225)
pSBC ( -0.4, color5 ); // #F3A + [40% Darker] => #c62884
pSBC ( 0.42, color8 ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(225,171,166,0.98631)

// Shade with Conversion (use "c" as your "to" color)
pSBC ( 0.42, color2, "c" ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #a6abe1ac

// RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
pSBC ( 0, color6, "c" ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)

// Blending
pSBC ( -0.5, color2, color8 ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(142,60,142,0.83)
pSBC ( 0.7, color2, color7 ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(168,60,111,0.67423)
pSBC ( 0.25, color3, color7 ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(134,191,208)
pSBC ( 0.75, color7, color3 ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #86bfd0

/*** Linear Blending ***/
// Shade (Lighten or Darken)
pSBC ( 0.42, color1, false, true ); // rgb(20,60,200) + [42% Lighter] => rgb(119,142,223)
pSBC ( -0.4, color5, false, true ); // #F3A + [40% Darker] => #991f66
pSBC ( 0.42, color8, false, true ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(223,142,119,0.98631)

// Shade with Conversion (use "c" as your "to" color)
pSBC ( 0.42, color2, "c", true ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #778edfac

// RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
pSBC ( 0, color6, "c", true ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)

// Blending
pSBC ( -0.5, color2, color8, true ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(110,60,110,0.83)
pSBC ( 0.7, color2, color7, true ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(146,60,74,0.67423)
pSBC ( 0.25, color3, color7, true ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(127,179,185)
pSBC ( 0.75, color7, color3, true ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #7fb3b9

/*** Other Stuff ***/
// Error Checking
pSBC ( 0.42, "#FFBAA" ); // #FFBAA + [42% Lighter] => null  (Invalid Input Color)
pSBC ( 42, color1, color5 ); // rgb(20,60,200) + #F3A + [4200% Blend] => null  (Invalid Percentage Range)
pSBC ( 0.42, {} ); // [object Object] + [42% Lighter] => null  (Strings Only for Color)
pSBC ( "42", color1 ); // rgb(20,60,200) + ["42"] => null  (Numbers Only for Percentage)
pSBC ( 0.42, "salt" ); // salt + [42% Lighter] => null  (A Little Salt is No Good...)

// Error Check Fails (Some Errors are not Caught)
pSBC ( 0.42, "#salt" ); // #salt + [42% Lighter] => #a5a5a500  (...and a Pound of Salt is Jibberish)

// Ripping
pSBCr ( color4 ); // #5567DAF0 + [Rip] => [object Object] => {'r':85,'g':103,'b':218,'a':0.941}

Картинка ниже поможет показать разницу в двух методах наложения:

Микро Функции

Если вы действительно хотите скорость и размер, вам придется использовать RGB, а не HEX. RGB более прост и прост, HEX пишет слишком медленно и имеет слишком много разновидностей для простого двухстрочного (т. Е. Это может быть 3, 4, 6 или 8-значный код HEX). Вам также придется пожертвовать некоторыми функциями, без проверки ошибок, без HEX2RGB и RGB2HEX. Кроме того, вам нужно будет выбрать конкретную функцию (на основе ее имени ниже) для математики смешивания цветов, а также, если вы хотите, чтобы затемнение или смешивание. Эти функции поддерживают альфа-каналы. И когда оба входных цвета имеют альфы, они будут линейно смешаны. Если только у одного из двух цветов есть альфа, он передаст его прямо к полученному цвету. Ниже приведены две невероятно быстрые и небольшие функции лайнера:

const RGB_Linear_Blend=(p,c0,c1)=>{
    var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
    return"rgb"+(x?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+i(e[3]=="a"?e.slice(5):e.slice(4))*p)+","+r(i(b)*P+i(f)*p)+","+r(i(c)*P+i(g)*p)+j;
}

const RGB_Linear_Shade=(p,c)=>{
    var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:255*p,P=P?1+p:1-p;
    return"rgb"+(d?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+t)+","+r(i(b)*P+t)+","+r(i(c)*P+t)+(d?","+d:")");
}

const RGB_Log_Blend=(p,c0,c1)=>{
    var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
    return"rgb"+(x?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+p*i(e[3]=="a"?e.slice(5):e.slice(4))**2)**0.5)+","+r((P*i(b)**2+p*i(f)**2)**0.5)+","+r((P*i(c)**2+p*i(g)**2)**0.5)+j;
}

const RGB_Log_Shade=(p,c)=>{
    var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:p*255**2,P=P?1+p:1-p;
    return"rgb"+(d?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+t)**0.5)+","+r((P*i(b)**2+t)**0.5)+","+r((P*i(c)**2+t)**0.5)+(d?","+d:")");
}

Хотите узнать больше? Прочитайте полную рецензию на github .

PT

(Ps. Если у кого-то есть математика для другого метода смешивания, пожалуйста, поделитесь.)

Я сделал решение, которое работает очень хорошо для меня:

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

Пример облегчения:

shadeColor("#63C6FF",40);

Пример Darken:

shadeColor("#63C6FF",-40);

Вот супер простой вкладыш, основанный на ответе Эрика

function adjust(color, amount) {
    return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}

Примеры:

adjust('#ffffff', -20) => "#ebebeb"
adjust('000000', 20) => "#141414"

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

Например, 20% от значения 200 синего цвета сильно отличается от 20% от значения 40 синего цвета.

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

function adjustBrightness(col, amt) {

    var usePound = false;

    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }

    var R = parseInt(col.substring(0,2),16);
    var G = parseInt(col.substring(2,4),16);
    var B = parseInt(col.substring(4,6),16);

    // to make the colour less bright than the input
    // change the following three "+" symbols to "-"
    R = R + amt;
    G = G + amt;
    B = B + amt;

    if (R > 255) R = 255;
    else if (R < 0) R = 0;

    if (G > 255) G = 255;
    else if (G < 0) G = 0;

    if (B > 255) B = 255;
    else if (B < 0) B = 0;

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return (usePound?"#":"") + RR + GG + BB;

}

Я попробовал вашу функцию, и возникла небольшая ошибка: если какое-то окончательное значение 'r' составляет только 1 цифру, результат выглядит как: 'a0a0a', когда правильное значение, например, '0a0a0a'. Я просто быстро исправил это, добавив это вместо вашего возврата:

var rStr = (r.toString(16).length < 2)?'0'+r.toString(16):r.toString(16);
var gStr = (g.toString(16).length < 2)?'0'+g.toString(16):g.toString(16);
var bStr = (b.toString(16).length < 2)?'0'+b.toString(16):b.toString(16);

return (usePound?"#":"") + rStr + gStr + bStr;

Может быть, это не так хорошо, но это делает работу. Отличная функция, кстати. Как раз то, что мне было нужно. :)

ты думал о преобразовании rgb> hsl? тогда просто двигайте Светимость вверх и вниз? это путь, которым я бы пошел.

Беглый взгляд на некоторые алгоритмы достал мне следующие сайты.

PHP: http://serennu.com/colour/rgbtohsl.php

Javascript: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

РЕДАКТИРОВАТЬ вышеуказанная ссылка больше не действительна. Вы можете просмотреть git hub для источника страницы или суть

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

Несмотря на то, что это неправильный выбор для OP, ниже приводится пример кода, который я изначально предлагал. (Предполагая, что у вас есть функции преобразования rgb / hsl)

var SHADE_SHIFT_AMOUNT = 0.1; 

function lightenShade(colorValue)
{
    if(colorValue && colorValue.length >= 6)
    {
        var redValue = parseInt(colorValue.slice(-6,-4), 16);
        var greenValue = parseInt(colorValue.slice(-4,-2), 16);
        var blueValue = parseInt(colorValue.slice(-2), 16);

        var hsl = rgbToHsl(redValue, greenValue, blueValue);
        hsl[2]= Math.min(hsl[2] + SHADE_SHIFT_AMOUNT, 1);
        var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
        return "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    }
    return null;
}

function darkenShade(colorValue)
{
    if(colorValue && colorValue.length >= 6)
    {
        var redValue = parseInt(colorValue.slice(-6,-4), 16);
        var greenValue = parseInt(colorValue.slice(-4,-2), 16);
        var blueValue = parseInt(colorValue.slice(-2), 16);

        var hsl = rgbToHsl(redValue, greenValue, blueValue);
        hsl[2]= Math.max(hsl[2] - SHADE_SHIFT_AMOUNT, 0);
        var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
        return "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    }
    return null;
}

Это предполагает:

1. У вас есть функции hslToRgbи rgbToHsl.
2. Параметр colorValueпредставляет собой строку в форме #RRGGBB

Хотя, если мы обсуждаем css, существует синтаксис для указания hsl / hsla для IE9 / Chrome / Firefox.

Версия C # ... обратите внимание, что я получаю цветные строки в этом формате # FF12AE34, и мне нужно вырезать #FF.

    private string GetSmartShadeColorByBase(string s, float percent)
    {
        if (string.IsNullOrEmpty(s))
            return "";
        var r = s.Substring(3, 2);
        int rInt = int.Parse(r, NumberStyles.HexNumber);
        var g = s.Substring(5, 2);
        int gInt = int.Parse(g, NumberStyles.HexNumber);
        var b = s.Substring(7, 2);
        int bInt = int.Parse(b, NumberStyles.HexNumber);

        var t = percent < 0 ? 0 : 255;
        var p = percent < 0 ? percent*-1 : percent;

        int newR = Convert.ToInt32(Math.Round((t - rInt) * p) + rInt);
        var newG = Convert.ToInt32(Math.Round((t - gInt) * p) + gInt);
        var newB = Convert.ToInt32(Math.Round((t - bInt) * p) + bInt);

        return String.Format("#{0:X2}{1:X2}{2:X2}", newR, newG, newB);
    }

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

function setLightPercentage(col: any, p: number) {
    const R = parseInt(col.substring(1, 3), 16);
    const G = parseInt(col.substring(3, 5), 16);
    const B = parseInt(col.substring(5, 7), 16);
    const curr_total_dark = (255 * 3) - (R + G + B);

    // calculate how much of the current darkness comes from the different channels
    const RR = ((255 - R) / curr_total_dark);
    const GR = ((255 - G) / curr_total_dark);
    const BR = ((255 - B) / curr_total_dark);

    // calculate how much darkness there should be in the new color
    const new_total_dark = ((255 - 255 * (p / 100)) * 3);

    // make the new channels contain the same % of available dark as the old ones did
    const NR = 255 - Math.round(RR * new_total_dark);
    const NG = 255 - Math.round(GR * new_total_dark);
    const NB = 255 - Math.round(BR * new_total_dark);

    const RO = ((NR.toString(16).length === 1) ? "0" + NR.toString(16) : NR.toString(16));
    const GO = ((NG.toString(16).length === 1) ? "0" + NG.toString(16) : NG.toString(16));
    const BO = ((NB.toString(16).length === 1) ? "0" + NB.toString(16) : NB.toString(16));

    return "#" + RO + GO + BO;}

Следующий метод позволит вам осветлить или затемнить значение экспозиции шестнадцатеричной (шестнадцатеричной) цветовой цепочки:

private static string GetHexFromRGB(byte r, byte g, byte b, double exposure)
{
    exposure = Math.Max(Math.Min(exposure, 1.0), -1.0);
    if (exposure >= 0)
    {
        return "#"
            + ((byte)(r + ((byte.MaxValue - r) * exposure))).ToString("X2")
            + ((byte)(g + ((byte.MaxValue - g) * exposure))).ToString("X2")
            + ((byte)(b + ((byte.MaxValue - b) * exposure))).ToString("X2");
    }
    else
    {
        return "#"
            + ((byte)(r + (r * exposure))).ToString("X2")
            + ((byte)(g + (g * exposure))).ToString("X2")
            + ((byte)(b + (b * exposure))).ToString("X2");
    }

}

Для последнего значения параметра в GetHexFromRGB () передайте двойное значение где-то между -1 и 1 (-1 - черный, 0 - без изменений, 1 - белый):

// split color (#e04006) into three strings
var r = Convert.ToByte("e0", 16);
var g = Convert.ToByte("40", 16);
var b = Convert.ToByte("06", 16);

GetHexFromRGB(r, g, b, 0.25);  // Lighten by 25%;

Как просто оттенить цвет в PHP?

<?php
function shadeColor ($color='#cccccc', $percent=-25) {

  $color = Str_Replace("#",Null,$color);

  $r = Hexdec(Substr($color,0,2));
  $g = Hexdec(Substr($color,2,2));
  $b = Hexdec(Substr($color,4,2));

  $r = (Int)($r*(100+$percent)/100);
  $g = (Int)($g*(100+$percent)/100);
  $b = (Int)($b*(100+$percent)/100);

  $r = Trim(Dechex(($r<255)?$r:255));  
  $g = Trim(Dechex(($g<255)?$g:255));  
  $b = Trim(Dechex(($b<255)?$b:255));

  $r = ((Strlen($r)==1)?"0{$r}":$r);
  $g = ((Strlen($g)==1)?"0{$g}":$g);
  $b = ((Strlen($b)==1)?"0{$b}":$b);

  return (String)("#{$r}{$g}{$b}");
}

echo shadeColor(); // #999999

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

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

var lightness = function(level) {
    if(level === undefined) {
        return Math.max(this.g,this.r,this.b)
    } else {
        var roundedLevel = Math.round(level) // fractions won't work here
        var levelChange = roundedLevel - this.lightness()

        var r = Math.max(0,this.r+levelChange)
        var g = Math.max(0,this.g+levelChange)
        var b = Math.max(0,this.b+levelChange)

        if(r > 0xff) r = 0xff
        if(g > 0xff) g = 0xff
        if(b > 0xff) b = 0xff

        return xolor({r: r, g: g, b: b})
    }
}

var lighter = function(amount) {
    return this.lightness(this.lightness()+amount)
}

См. Https://github.com/fresheneesz/xolor для получения дополнительной информации.

Я давно хотел иметь возможность создавать оттенки / оттенки цветов, вот мое решение JavaScript:

const varyHue = function (hueIn, pcIn) {
    const truncate = function (valIn) {
        if (valIn > 255) {
            valIn = 255;
        } else if (valIn < 0)  {
            valIn = 0;
        }
        return valIn;
    };

    let red   = parseInt(hueIn.substring(0, 2), 16);
    let green = parseInt(hueIn.substring(2, 4), 16);
    let blue  = parseInt(hueIn.substring(4, 6), 16);
    let pc    = parseInt(pcIn, 10);    //shade positive, tint negative
    let max   = 0;
    let dif   = 0;

    max = red;

    if (pc < 0) {    //tint: make lighter
        if (green < max) {
            max = green;
        }

        if (blue < max) {
            max = blue;
        }

        dif = parseInt(((Math.abs(pc) / 100) * (255 - max)), 10);

        return leftPad(((truncate(red + dif)).toString(16)), '0', 2)  + leftPad(((truncate(green + dif)).toString(16)), '0', 2) + leftPad(((truncate(blue + dif)).toString(16)), '0', 2);
    } else {    //shade: make darker
        if (green > max) {
            max = green;
        }

        if (blue > max) {
            max = blue;
        }

        dif = parseInt(((pc / 100) * max), 10);

        return leftPad(((truncate(red - dif)).toString(16)), '0', 2)  + leftPad(((truncate(green - dif)).toString(16)), '0', 2) + leftPad(((truncate(blue - dif)).toString(16)), '0', 2);
    }
};

Ваш подход в порядке :) Я немного упрощаю вашу самую короткую версию (для контроля насыщенности смотрите здесь )

(col,amt)=> (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0)

// Similar to OP shortest version, we not have here # and colors range checking

var LightenDarkenColor = 
     (col,amt) => (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0);    

console.log("3F6D2A light +40 ->", LightenDarkenColor("3F6D2A",40));
console.log("3F6D2A light -40 ->", LightenDarkenColor("3F6D2A",-40));

И версия с проверкой # и цветовых диапазонов

// # and colors range checking

var LightenDarkenColor = 
     (col,amt) => '#'+col.slice(1).match(/../g)
                         .map(x=>(x=+`0x${x}`+amt,x<0?0:(x>255?255:x))
                         .toString(16).padStart(2,0)).join``;

console.log("#3F6D2A light +40 ->", LightenDarkenColor("#3F6D2A",40)); 
console.log("#3F6D2A light -40 ->", LightenDarkenColor("#3F6D2A",-40));

console.log("#3FFD2A light +40 ->", LightenDarkenColor("#3FFD2A",40)); 
console.log("#3F1D2A light -40 ->", LightenDarkenColor("#3F1D2A",-40));

Я тоже сделал простую упаковку. Я использовал выпуклость IR ^ 3, конечно, значения RGB находятся в IN ^ 3, что не является выпуклым, так что это не совсем идеально

Чтобы затемнить я использовал следующее

for (let i = 0; i < rgb.length; i++) {
   rgb[i] = Math.floor(rgb[i] - ratio * rgb[i]);
}

И осветлить

for (let i = 0; i < rgb.length; i++) {
   rgb[i] = Math.ceil(rgb[i] + ratio * (255 - rgb[i]));
}

Вот пакет https://github.com/MarchWorks/colortone

Демо https://colortone.now.sh/

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

Мне нужно было это в C #, это может помочь разработчикам .net

public static string LightenDarkenColor(string color, int amount)
    {
        int colorHex = int.Parse(color, System.Globalization.NumberStyles.HexNumber);
        string output = (((colorHex & 0x0000FF) + amount) | ((((colorHex >> 0x8) & 0x00FF) + amount) << 0x8) | (((colorHex >> 0xF) + amount) << 0xF)).ToString("x6");
        return output;
    }