Onaltılık bir rengi (veya rgb ve renkleri karıştır) Programlı Olarak Açıklaştırma veya Koyulaştırma

İşte onaltılık bir rengi belirli bir miktarda programlı olarak açıklaştırmak veya koyulaştırmak için üzerinde çalıştığım bir işlev. Sadece "3F6D2A"renk ( col) ve bir base10 tamsayı ( amt) gibi bir dizeyi , açıklık veya koyulaştırma miktarı için iletin . Koyulaştırmak için negatif bir sayı (yani -20) girin.

Bunu yapmamın nedeni, şimdiye kadar bulduğum tüm çözümlerden dolayı, sorunu aşırı derecede karmaşıklaştırıyor gibiydi. Ve sadece birkaç satır kodla yapılabileceğini düşünüyordum. Herhangi bir sorun bulursanız veya bunu hızlandıracak ayarlamalarınız varsa lütfen bize bildirin.

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) );

Geliştirme kullanımı için burada okunması daha kolay bir sürümdür:

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));

Ve son olarak başlangıçta "#" olabilecek (veya olmayabilir) renkleri işlemek için bir sürüm. Ayrıca uygun olmayan renk değerleri için ayarlama:

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);
}

Tamam, şimdi sadece birkaç satır değil, ama çok daha basit görünüyor ve "#" kullanmıyorsanız ve aralık dışındaki renkleri kontrol etmeniz gerekmiyorsa, sadece birkaç satır.

"#" Kullanılmıyorsa, kodu aşağıdaki gibi ekleyebilirsiniz:

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

Sanırım asıl sorum şu, burada doğru muyum? Bu bazı (normal) durumları kapsamıyor mu?

Bu cevap kendi canavarı oldu. Birçok yeni versiyon, aptallaşmaya başlamıştı. Bu cevaba katkıda bulunan çok sayıda herkese çok teşekkürler. Ama kitleler için basit tutmak için. Bu cevabın evriminin tüm versiyonlarını / geçmişini github'ım için arşivledim . Ve burada en yeni sürümle StackOverflow üzerinde temiz başladı. Bu sürüm için Mike 'Pomax' Kamermans'a özel bir teşekkürler . Bana yeni bir matematik verdi.

Bu işlev ( pSBC) bir HEX veya RGB web rengi alacaktır. pSBCdaha koyu veya daha açık bir şekilde gölgeleyebilir veya ikinci bir renkle karıştırabilir ve aynı zamanda Hex'ten RGB'ye (Hex2RGB) veya RGB'den Hex'e (RGB2Hex) dönüştürebilir. Hangi renk formatını kullandığınızı bile bilmeden hepsi.

Bu, özellikle birçok özelliği göz önüne alındığında gerçekten hızlı, muhtemelen en hızlı çalışır. Yapımı uzun zaman aldı. Bütün hikayeyi github'ımda görün . Gölgelendirmek veya karıştırmak için mümkün olan en küçük ve en hızlı yolu istiyorsanız, aşağıdaki Mikro İşlevlere bakın ve 2 katmanlı hız iblislerinden birini kullanın. Yoğun animasyonlar için harikalar, ancak buradaki bu sürüm çoğu animasyon için yeterince hızlı.

Bu işlev Günlük Karıştırma veya Doğrusal Karıştırma kullanır. Bununla birlikte, bir rengi düzgün bir şekilde aydınlatmak veya koyulaştırmak için HSL'ye dönüşmez. Bu nedenle, bu işlevden elde edilen sonuçlar HSL kullanan çok daha büyük ve daha yavaş işlevlerden farklı olacaktır .

psBC ile jsFiddle

github> pSBC Wiki

Özellikleri:

• Standart Hex renklerini dizeler biçiminde otomatik olarak algılar ve kabul eder. Örneğin: "#AA6622"veya "#bb551144".
• Dizeler biçimindeki standart RGB renklerini otomatik olarak algılar ve kabul eder. Örneğin: "rgb(123,45,76)"veya "rgba(45,15,74,0.45)".
• Renkleri yüzde beyaz veya siyah olarak gölgeler.
• Renkleri yüzde olarak harmanlar.
• Hex2RGB ve RGB2Hex aynı anda mı, yoksa solo mu.
• #RGB (veya #RGBA) biçiminde 3 basamaklı (veya 4 basamaklı alfa) HEX renk kodlarını kabul eder. Onları genişletecek. Örneğin: "#C41"olur "#CC4411".
• Kabul eder ve (Doğrusal) alfa kanallarını karıştırır. Ya durumunda c0(arasından), renk ya da c1(to) renk bir alfa kanalı, daha sonra dönen bir renk bir alfa kanalı olacaktır. Her iki renk de alfa kanalına sahipse, döndürülen renk, verilen yüzdeyi (tıpkı normal bir renk kanalı gibi) kullanarak iki alfa kanalının doğrusal bir karışımı olacaktır. İki renkten yalnızca birinin alfa kanalı varsa, bu alfa sadece döndürülen renge geçirilir. Bu, saydamlık seviyesini korurken saydam bir rengi karıştırmaya / gölgelemeye izin verir. Saydamlık düzeylerinin de karışması gerekiyorsa, her iki rengin de alfa olduğundan emin olun. Gölgelendirirken, alfa kanalını düz geçirir. Ayrıca alfa kanalı gölgelendirir temel gölgeleme isterseniz, o zaman kullanabilir rgb(0,0,0,1)veya rgb(255,255,255,1)senkronize ederc1renk (veya onaltılık eşdeğerleri). RGB renkleri için, döndürülen rengin alfa kanalı 3 ondalık basamağa yuvarlanır.
• RGB2Hex ve Hex2RGB dönüşümleri, karıştırma kullanılırken örtüktür. c0Rengi ne olursa olsun ; döndürülen renk, varsa (daima c1) rengin renk formatında olacaktır. c1(To) rengi yoksa, renk 'c'olarak c1iletin ve c0renk ne olursa olsun gölgede kalır ve dönüşür . Yalnızca dönüşüm isteniyorsa, 0yüzde ( p) olarak da iletin. Eğer c1renk atlanırsa veya olmayan stringgeçilen, bu dönüştürmek olmaz.
• Global'e de ikincil bir fonksiyon eklenir. pSBCrHex veya RGB renginden geçirilebilir ve bu renk bilgisini içeren bir nesne döndürür. Bu, {r: XXX, g: XXX, b: XXX, a: X.XXX} biçimindedir. Nerede .r, .gve .b0 ila 255 aralığındadır. Ve alfa olmadığında: .a-1'dir. Aksi takdirde: .a0.000 ila 1.000 aralığındadır.
• RGB çıkış için, bu çıkışları rgba()üzerinde rgb()bir alfa kanalı ile bir renk geçirildi zaman c0ve / veya () c1(to).
• Küçük Hata Kontrolü eklendi. Mükemmel değil. Hala çökebilir veya jibberish oluşturabilir. Ama bazı şeyleri yakalayacak. Temel olarak, yapı bazı şekillerde yanlışsa veya yüzde bir sayı veya kapsam dışı değilse, geri döner null. Bir örnek:, pSBC(0.5,"salt") == nulldüşündüğü gibi #saltgeçerli bir renktir. return null;Bu özelliği kaldırmak ve daha hızlı ve daha küçük yapmak için biten dört satırı silin .
• Günlük Karıştırma kullanır. Geçiş trueiçin de lDoğrusal Blending kullanmak (4 parametre).

Kod:

// 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)
}

Kullanımı:

// 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}

Aşağıdaki resim, iki karıştırma yöntemindeki farkı göstermeye yardımcı olacaktır:

Mikro Fonksiyonlar

Gerçekten hız ve boyut istiyorsanız, HEX yerine RGB kullanmanız gerekir. RGB daha basit ve basittir, HEX çok yavaş yazıyor ve basit bir iki astar için çok fazla lezzet içeriyor (IE. 3, 4, 6 veya 8 haneli HEX kodu olabilir). Ayrıca bazı özellikleri feda etmeniz gerekir, hata kontrolü, HEX2RGB veya RGB2HEX yoktur. Ayrıca, renk harmanlama matematiği için ve gölgelendirme veya karıştırma istiyorsanız, belirli bir işlev seçmeniz gerekecektir (aşağıdaki işlev adına göre). Bu işlevler alfa kanallarını destekler. Ve her iki giriş rengi de alfa içerdiğinde, bunları Doğrusal Karıştıracaktır. İki renkten yalnızca birinde alfa varsa, doğrudan ortaya çıkan renge doğru geçirir. Aşağıda inanılmaz derecede hızlı ve küçük olan iki astar işlevi bulunmaktadır:

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:")");
}

Daha fazla bilgi mi istiyorsunuz? Tam writeup oku github .

PT

(Ps Başka bir karıştırma yöntemi için matematik varsa, lütfen paylaşın.)

Benim için çok iyi çalışan bir çözüm hazırladım:

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;
}

Örnek Açıklaştır:

shadeColor("#63C6FF",40);

Örnek Karart:

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

İşte Eric'in cevabına dayanan süper basit bir astar

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));
}

Örnekler:

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

Ben senin fonksiyonuna göre kullandım. Yüzde adımlarını kullanmayı tercih ediyorum çünkü bu benim için daha sezgisel.

Örneğin, 200 mavi değerinin% 20'si 40 mavi değerinin% 20'sinden çok farklıdır.

Her neyse, işte benim değişikliğim, orijinal işleviniz için teşekkürler.

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;

}

İşlevinizi denedim ve küçük bir hata oluştu: Bazı son 'r' değeri sadece 1 basamaksa, doğru değer '0a0a0a' olduğunda sonuç 'a0a0a' gibi gelir. Ben sadece dönüş yerine bunu ekleyerek hızlı bir şekilde düzeltildi:

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;

Belki çok hoş değil ama işi yapıyor. Harika fonksiyon, BTW. Tam ihtiyacım olan şey. :)

bir rgb> hsl dönüşümü hakkında düşündünüz mü? sonra sadece Parlaklığı yukarı ve aşağı hareket ettirin. işte böyle giderdim.

Bazı algoritmalar için hızlı bir bakış bana aşağıdaki siteleri getirdi.

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

Yukarıdaki bağlantıyı DÜZENLE artık geçerli değil. Sayfa kaynağı veya özü için git hub'ını görüntüleyebilirsiniz

Alternatif olarak başka bir StackOverflow sorusu bakmak için iyi bir yer olabilir.

Bu OP için doğru seçim olmasa da, aslen önerdiğim kodun bir yaklaşımı aşağıdadır. (Rgb / hsl dönüştürme işlevleriniz olduğunu varsayarsak)

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;
}

Bu varsayım:

1. Sen işlevlere sahiptir hslToRgbve rgbToHsl.
2. Parametre #RRGGBBcolorValue biçimindeki bir dizedir

Her ne kadar css'i tartışıyorsak IE9 / Chrome / Firefox için hsl / hsla belirtmek için bir sözdizimi vardır .

C # Sürüm ... # FF12AE34 bu biçimde renk dizeleri alıyorum ve #FF kesmek gerekir unutmayın.

    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);
    }

Rengi belirli bir parlaklık seviyesine değiştirmek istedim - rengin ne kadar parlak olursa olsun - işte iyi görünen basit bir JS işlevi, ancak daha kısa olabileceğinden eminim

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;}

Aşağıdaki yöntem, Onaltılık (Onaltılık) renk dizesinin pozlama değerini açmanıza veya koyulaştırmanıza olanak tanır:

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 () içindeki son parametre değeri için, -1 ile 1 arasında bir yerde çift değer girin (-1 siyah, 0 değişmez, 1 beyazdır):

// 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'de basit gölge rengi nasıl?

<?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

JQuery bağımlılığını kaldırmak için mükemmel xcolor kitaplığının bir bağlantı noktasını yaptım. İçinde renklerin aydınlatılması ve koyulaştırılması dahil bir ton fonksiyon vardır.

Gerçekten, hex'i RGB'ye dönüştürmek, renkleri aydınlatmak veya koyulaştırmaktan tamamen ayrı bir işlevdir. Lütfen KURU şeyler tutun. Her durumda, bir RGB renge sahip olduğunuzda, RGB değerlerinin her birine istediğiniz ışık seviyesi ile sahip olduğunuz ışık seviyesi arasındaki farkı ekleyebilirsiniz:

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)
}

Daha fazla kaynak için https://github.com/fresheneesz/xolor adresine bakın .

Uzun zamandır renk tonları / renk tonları üretmek istedim, işte JavaScript çözümüm:

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);
    }
};

Yaklaşımınız iyi :) En kısa versiyonunuzu biraz basitleştiriyorum (doygunluk kontrolü için buraya bakın )

(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));

Ve # ve renk aralıklarını kontrol eden sürüm

// # 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));

Ben de basit bir paket yaptım. IR ^ 3 dışbükeyliğini kullandım, elbette, RGB değerleri dışbükey olmayan IN ^ 3'te, bu yüzden gerçekten mükemmel değil

Koyulaştırmak için aşağıdakileri kullandım

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

Ve hafifletmek için

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

İşte https://github.com/MarchWorks/colortone paketi

Demo https://colortone.now.sh/

-1 oranını geçerseniz bir şeyler yaptığım yolla, oran 1 ise siyah, Beyaz ile sonuçlanırsınız. Oran olarak 0'ı geçmek rengi değiştirmez

C # 'a ihtiyacım vardı, .net geliştiricilerine yardımcı olabilir

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;
    }