mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 23:50:52 +01:00
darken hex colour
This commit is contained in:
parent
6ee4a7ee78
commit
4a58b16962
@ -20,6 +20,29 @@ const lightenHexColor = (hex, percent) =>
|
|||||||
return '#' + result.padStart(6, '0');
|
return '#' + result.padStart(6, '0');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const darkenHexColor = (hex, percent) =>
|
||||||
|
{
|
||||||
|
// Remove the hash symbol if present
|
||||||
|
hex = hex.replace(/^#/, '');
|
||||||
|
|
||||||
|
// Convert hex to RGB
|
||||||
|
let r = parseInt(hex.substring(0, 2), 16);
|
||||||
|
let g = parseInt(hex.substring(2, 4), 16);
|
||||||
|
let b = parseInt(hex.substring(4, 6), 16);
|
||||||
|
|
||||||
|
// Calculate the darkened RGB values
|
||||||
|
r = Math.round(Math.max(0, r - 255 * percent));
|
||||||
|
g = Math.round(Math.max(0, g - 255 * percent));
|
||||||
|
b = Math.round(Math.max(0, b - 255 * percent));
|
||||||
|
|
||||||
|
// Convert RGB back to hex
|
||||||
|
const result = ((r << 16) | (g << 8) | b).toString(16);
|
||||||
|
|
||||||
|
// Make sure result has 6 digits
|
||||||
|
return '#' + result.padStart(6, '0');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
const generateShades = (colors) =>
|
const generateShades = (colors) =>
|
||||||
{
|
{
|
||||||
for (let color in colors)
|
for (let color in colors)
|
||||||
@ -31,7 +54,8 @@ const generateShades = (colors) =>
|
|||||||
for (let i = 0; i < shades.length; i++)
|
for (let i = 0; i < shades.length; i++)
|
||||||
{
|
{
|
||||||
let shade = shades[i];
|
let shade = shades[i];
|
||||||
extended[shade] = lightenHexColor(hex, shades[(shades.length - 1 - i) ] / 1000);
|
extended[shade] = lightenHexColor(hex, shades[(shades.length - 1 - i) ] / 950);
|
||||||
|
extended[-shade] = darkenHexColor(hex, shades[(shades.length - 1 - i) ] / 950)
|
||||||
}
|
}
|
||||||
|
|
||||||
colors[color] = {
|
colors[color] = {
|
||||||
@ -40,6 +64,8 @@ const generateShades = (colors) =>
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(colors)
|
||||||
|
|
||||||
return colors;
|
return colors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user