programming javascript Darken color Darken css JavaScript color functions Random color js

Hướng dẫn javascript darken color - làm tối màu javascript

Vâng, câu trả lời này đã trở thành con thú của riêng nó. Nhiều phiên bản mới, nó đã trở nên ngu ngốc. Rất cám ơn tất cả những người đóng góp lớn cho câu trả lời này. Nhưng, để giữ cho nó đơn giản cho quần chúng. Tôi đã lưu trữ tất cả các phiên bản/lịch sử của sự tiến hóa của câu trả lời này cho GitHub của tôi. Và bắt đầu nó sạch sẽ trên Stackoverflow ở đây với phiên bản mới nhất. Một lời cảm ơn đặc biệt dành cho Mike 'Pomax' Kamermans cho phiên bản này. Anh ấy đã cho tôi toán học mới.

Hàm này [pSBC] sẽ lấy màu web Hex hoặc RGB. pSBC có thể che bóng tối hơn hoặc sáng hơn, hoặc trộn nó với màu thứ hai, và cũng có thể chuyển nó qua phải nhưng chuyển từ Hex sang RGB [hex2RGB] hoặc RGB sang HEX [RGB2HEX]. Tất cả mà không có bạn thậm chí biết bạn đang sử dụng định dạng màu nào.

Điều này chạy rất nhanh, có lẽ là nhanh nhất, đặc biệt là xem xét nhiều tính năng của nó. Đó là một thời gian dài trong quá trình thực hiện. Xem toàn bộ câu chuyện trên github của tôi. Nếu bạn muốn cách hoàn toàn nhỏ nhất và nhanh nhất có thể để che bóng hoặc pha trộn, hãy xem các chức năng vi mô bên dưới và sử dụng một trong những con quỷ tốc độ 2 lin. Chúng rất tốt cho các hoạt hình mạnh mẽ, nhưng phiên bản này ở đây đủ nhanh cho hầu hết các hình ảnh động.

Chức năng này sử dụng pha trộn nhật ký hoặc pha trộn tuyến tính. Tuy nhiên, nó không chuyển đổi thành HSL để làm sáng đúng hoặc tối màu. Do đó, kết quả từ chức năng này sẽ khác với các hàm lớn hơn và chậm hơn nhiều sử dụng HSL.results from this function will differ from those much larger and much slower functions that use HSL.

JSfiddle với PSBC

github> wiki psbc

Features:

  • Tự động phát hiện và chấp nhận màu HEX tiêu chuẩn dưới dạng chuỗi. Ví dụ: "#AA6622" hoặc "#bb551144".
  • Tự động phát hiện và chấp nhận màu RGB tiêu chuẩn dưới dạng chuỗi. Ví dụ: "rgb[123,45,76]" hoặc "rgba[45,15,74,0.45]".
  • Màu sắc màu trắng hoặc đen theo tỷ lệ phần trăm.
  • Trộn màu với nhau theo tỷ lệ phần trăm.
  • HEX2RGB và RGB2HEX có chuyển đổi cùng một lúc, hoặc solo.
  • Chấp nhận 3 chữ số [hoặc 4 chữ số w/ alpha] Mã màu Hex, ở dạng #RGB [hoặc #RGBA]. Nó sẽ mở rộng chúng. Ví dụ: "#C41" trở thành 
    // 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}
    0.
  • Chấp nhận và [tuyến tính] pha trộn các kênh alpha. Nếu màu 
    // 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}
    1 [từ] hoặc màu 
    // 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}
    2 [đến] có kênh alpha, thì màu trả về sẽ có kênh alpha. Nếu cả hai màu có kênh alpha, thì màu được trả về sẽ là sự pha trộn tuyến tính của hai kênh alpha sử dụng tỷ lệ phần trăm được đưa ra [giống như nó là một kênh màu bình thường]. Nếu chỉ có một trong hai màu có kênh alpha, alpha này sẽ được truyền qua màu được trả về. Điều này cho phép người ta pha trộn/tô màu một màu trong suốt trong khi duy trì mức độ trong suốt. Hoặc, nếu các mức độ trong suốt cũng nên pha trộn, hãy đảm bảo cả hai màu có bảng chữ cái. Khi tô bóng, nó sẽ vượt qua kênh alpha thẳng qua. Nếu bạn muốn có bóng cơ bản cũng tạo ra kênh alpha, thì hãy sử dụng 
    // 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}
    3 hoặc 
    // 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}
    4 làm màu 
    // 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}
    2 [đến] của bạn [hoặc tương đương hex của chúng]. Đối với các màu RGB, kênh alpha màu được trả lại sẽ được làm tròn đến 3 số thập phân.
  • Chuyển đổi RGB2HEX và HEX2RGB được ẩn khi sử dụng pha trộn. Bất kể màu 
    // 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}
    1 [từ]; Màu được trả về sẽ luôn ở định dạng màu của màu 
    // 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}
    2 [đến], nếu một người tồn tại. Nếu không có màu 
    // 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}
    2 [đến], thì hãy truyền 
    // 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}
    9 dưới dạng màu 
    // 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}
    2 và nó sẽ che bóng và chuyển đổi bất kỳ màu nào 
    // 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}
    1. Nếu chỉ chuyển đổi chỉ mong muốn, thì hãy vượt qua 
    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{
    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{
    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{
    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 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}
    2 bị bỏ qua hoặc không có -____ 25 được truyền vào, nó sẽ không chuyển đổi.
  • Một chức năng thứ cấp cũng được thêm vào toàn cầu. 
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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 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}
    1 [từ] và/hoặc 
    // 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}
    2 [đến].
  • Kiểm tra lỗi nhỏ đã được thêm vào. Nó không hoàn hảo. Nó vẫn có thể gặp sự cố hoặc tạo ra tiếng cười. Nhưng nó sẽ bắt được một số thứ. Về cơ bản, nếu cấu trúc sai theo một số cách hoặc nếu tỷ lệ phần trăm không phải là số hoặc ngoài phạm vi, nó sẽ trả lại pSBC6. Một ví dụ: pSBC7, trong đó như nó nghĩ pSBC8 là một màu hợp lệ. Xóa bốn dòng kết thúc bằng pSBC9 để loại bỏ tính năng này và làm cho nó nhanh hơn và nhỏ hơn.
  • Sử dụng nhật ký nhật ký. Vượt qua pSBC0 trong pSBC1 [tham số thứ 4] để sử dụng pha trộn tuyến tính.

Code:

// 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"||p1||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[n4]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>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>=0,a=f?a #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}

Hình ảnh dưới đây sẽ giúp hiển thị sự khác biệt trong hai phương pháp pha trộn:

Chức năng vi mô

Nếu bạn thực sự muốn tốc độ và kích thước, bạn sẽ phải sử dụng RGB chứ không phải Hex.RGB đơn giản và đơn giản hơn, Hex viết quá chậm và có quá nhiều hương vị cho một lớp hai đơn giản [ví dụ: nó có thể là mã hex 3, 4, 6 hoặc 8 chữ số].Bạn cũng sẽ cần phải hy sinh một số tính năng, không kiểm tra lỗi, không hex2rgb cũng như RGB2HEX.Đồng thời, bạn sẽ cần chọn một chức năng cụ thể [dựa trên tên chức năng của nó bên dưới] cho toán học pha trộn màu và nếu bạn muốn tạo bóng hoặc trộn.Các chức năng này hỗ trợ các kênh alpha.Và khi cả hai màu đầu vào đều có bảng chữ cái, nó sẽ pha trộn tuyến tính.Nếu chỉ có một trong hai màu có alpha, nó sẽ truyền thẳng qua màu kết quả.Dưới đây là hai hàm lót cực kỳ nhanh và nhỏ:

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

Bài Viết Liên Quan

Blackpink Grammy 2023
Hướng dẫn python write list to excel column - python ghi danh sách vào cột excel
Hướng dẫn python keyboard codes - mã bàn phím python
Hướng dẫn date format in php with month name - định dạng ngày trong php với tên tháng
Hướng dẫn dùng gnupg trong PHP
Hướng dẫn what is javascript string interpolation? - nội suy chuỗi javascript là gì?
Hướng dẫn mysql split string multiple rows - mysql tách chuỗi nhiều hàng
Schulferien bayern 2024/25
Hướng dẫn create a gui application to find the area of a circle python - tạo ứng dụng gui để tìm diện tích hình tròn python
Hướng dẫn can we convert dataframe to string in python? - chúng ta có thể chuyển đổi khung dữ liệu thành chuỗi trong python không?
Hướng dẫn export list of posts wordpress - xuất danh sách bài viết wordpress
Lịch nghỉ tết của các trường đại học 2023
Hướng dẫn how to change css in laravel - cách thay đổi css trong laravel
Hướng dẫn can you use if statements or while loops within a function in python? - bạn có thể sử dụng các câu lệnh if hoặc các vòng lặp trong một hàm trong python không?
Hướng dẫn cài linux trên win 7
Hướng dẫn best html obfuscator - trình mã hóa html tốt nhất
Hướng dẫn python black options - tùy chọn màu đen trăn
Hướng dẫn python read memory of another process - python đọc bộ nhớ của một tiến trình khác
How many days until February 9, 2023
Hướng dẫn how do you pass a value in python? - làm thế nào để bạn chuyển một giá trị trong python?

Toplist mới

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
6 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
6 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
6 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
6 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
6 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
6 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
6 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
6 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
6 tháng trước

Bài mới nhất

Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024
Phần mềm khắc phụ lỗi wifi trên an năm 2024
Chủng chuẩn e.coli atcc 25922 là gì năm 2024
Phục hồi nút erase trong cs6 bị lỗi năm 2024
Chương trình giải toán giải toán đại số năm 2024
Học hỏi những điểm tốt tiếng anh là gì năm 2024
Dì ruột bán cháu ở thường xuân thanh hóa năm 2024
Kiến bu quần lót là hiện tượng gì năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Bài Tập Địa Điểm Hay Mẹo Hay Học Tốt Nghĩa của từ Công Nghệ Khỏe Đẹp bao nhiêu Top List Tiếng anh Bao nhiêu Sản phẩm tốt Xây Đựng Ngôn ngữ javascript Ở đâu Đại học Hướng dẫn Bài tập Tại sao Dịch So Sánh Máy tính Món Ngon mẹo hay Bao lâu Thế nào So sánh Khoa Học Vì sao Lớp 9 Lớp 10