Ну, этот ответ стал своим собственным зверем.Много новых версий, это было глупо долго.Большое спасибо всем великим авторам этого ответа.Но, чтобы все было просто для масс.Я заархивировал все версии / историю развития этого ответа на свой github .И все началось с новой версии StackOverflow.Особая благодарность Майку 'Pomax' Kamermans за эту версию.Он дал мне новую математику.
Эта функция (pSBC) будет принимать цвета HEX или RGB.pSBC может затенить его темнее или светлее или смешать со вторым цветом, а также может передать его прямо через него, но конвертировать из шестнадцатеричного в RGB (Hex2RGB) или из шестнадцатеричного RGB в 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 преобразование вв то же время или в одиночку.
- Принимает трехзначные (или четырехзначные w / alpha) цветовые коды HEX в форме #RGB (или #RGBA).Это расширит их.Например:
"#C41" становится "#CC4411". - Принимает и (линейно) смешивает альфа-каналы.Если у цвета
c0 (from) или цвета c1 (to) есть альфа-канал, то возвращаемый цвет будет иметь альфа-канал.Если оба цвета имеют альфа-канал, то возвращаемый цвет будет представлять собой линейную смесь двух альфа-каналов с использованием заданного процента (как если бы это был обычный цветовой канал).Если только один из двух цветов имеет альфа-канал, эта альфа будет просто передана возвращаемому цвету.Это позволяет смешивать / затенять прозрачный цвет, сохраняя уровень прозрачности.Или, если уровни прозрачности также должны смешиваться, убедитесь, что оба цвета имеют альфа.Когда затенение, это пройдет альфа-канал прямо через.Если вам нужна базовая заливка, которая также затеняет альфа-канал, используйте rgb(0,0,0,1) или rgb(255,255,255,1) в качестве цвета c1 (to) (или их шестнадцатеричных эквивалентов).Для цветов RGB альфа-канал возвращаемого цвета будет округлен до 3 десятичных разрядов. - Преобразования RGB2Hex и Hex2RGB неявны при использовании смешивания.Независимо от цвета
c0 (от);возвращаемый цвет всегда будет в формате цвета c1 (to), если он существует.Если цвет c1 (to) отсутствует, то передайте 'c' в качестве цвета c1, и он закрасит и преобразует цвет c0.Если требуется только преобразование, то передайте 0 в качестве процента (p).Если цвет c1 пропущен или передан ложный текст, он не будет преобразован. - В глобальную добавлена также вторичная функция.
pSBCr может быть передан цвет Hex или RGB, и он возвращает объект, содержащий эту информацию о цвете.Это в форме: {r: XXX, g: XXX, b: XXX, a: X.XXX}.Где .r, .g и .b имеют диапазон от 0 до 255. А когда нет альфа: .a равно -1.В противном случае: .a имеет диапазон от 0,000 до 1.000. - Для вывода RGB выводится
rgba() более rgb(), когда цвет с альфа-каналом был передан в c0 (from) и / или c1 (to). - Добавлена проверка незначительных ошибок.Это не идеально.Это все еще может привести к сбою или созданию тряски.Но это поймает некоторые вещи.По сути, если структура в некотором смысле неверна или процент не является числом или выходит за рамки, он вернет
null.Пример: pSBC(0.5,"salt") == null, где, как он думает, #salt является допустимым цветом.Удалите четыре строки, которые заканчиваются return null;, чтобы удалить эту функцию и сделать ее быстрее и меньше. - Использует смешивание журналов.Передайте
true in для l (4-й параметр) для использования линейного смешивания.
Код:
// 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=pSBCr(c0),P=p<0,t=c1&&c1!="c"?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,d=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)+d;
}
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,d=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)+d;
}
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. Если у кого-то есть математика для другого метода смешивания, пожалуйста, поделитесь.)