shade-generator
v1.2.7
Published
Generate tints and shades easily.
Downloads
12,712
Readme
shade-generator
This will output a Record<Shade, string>
.
const colorMap = ShadeGenerator.hue("#ff0000").shadesMap("hex");
You can use it like so.
const StyledComponent = styled.div`
background-color: ${color['300']};
margin: 8px;
padding: 16px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
`;
This also works.
const color = ShadeGenerator.hue("#ff0000").shade("10").hex();
Pass a config to fine tune the output
const config: Record<Shade, number> = {
"10": 0.9,
"20": 0.8,
"30": 0.7,
"40": 0.6,
"50": 0.5,
"60": 0.4,
"70": 0.3,
"80": 0.2,
"90": 0.1,
"100": 0,
"200": 0.9,
"300": 0.8,
"400": 0.7,
"500": 0.6,
"600": 0.5,
"700": 0.4,
"800": 0.3,
"900": 0.2,
"1000": 0.1,
};
// You can, for example, change shade 50 to be "50": 0.55
const color = ShadeGenerator.hue("#ff0000").config(config).shade("10").hex();
const colorMap = ShadeGenerator.hue("#ff0000").config(config).shadesMap("hex");
Checkout other formats
...shadesMap("rgba");
...shadesMap("hsl");
...shadesMap("hex");
...rgba();
...hsl();
...hex();
See it in action here.
Enjoy ♥️