Ну, этот ответ стал своим собственным зверем. Много новых версий, это было глупо долго. Большое спасибо всем великим авторам этого ответа. Но, чтобы все было просто для масс. Я заархивировал все версии / историю развития этого ответа на свой 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. Если у кого-то есть математика для другого метода смешивания, пожалуйста, поделитесь.)