Color Palette Generator is a handy package that creates dark, light and contrasting colors for your colors. You can also change the intensity of your dark and light colors as you wish.
Install the package in your project directory with:
npm install @tiger-ui/color-palette-generator
yarn add @tiger-ui/color-palette-generator
Let's make an example on a React project:
import { Color } from '@tiger-ui/color-palette-generator';
import Box from '../../components/Box';
import Paragraph from '../../components/Paragraph';
export default function MyComponent() {
const myColors = new Color('#1746d1');
console.log('main color: ', myColors.main);
console.log('dark color: ', myColors.dark);
console.log('light color: ', myColors.light);
console.log('contrast color: ', myColors.contrast);
return (
<Box display="flex" width="100%" justifyContent="center" my={10}>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.dark}
>
<Paragraph color={myColors.contrast}>Darker</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.main}
>
<Paragraph color={myColors.contrast}>Main</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.light}
>
<Paragraph color={myColors.contrast}>Light</Paragraph>
</Box>
</Box>
);
}output:
main color: #1746d1
dark color: #1541c3
light color: #184adf
contrast color: #ffffff
You can change the intensity of the dark and light colors. You can also customize the Contrast color:
import { Color } from '@tiger-ui/color-palette-generator';
import Box from '../../components/Box';
import Paragraph from '../../components/Paragraph';
export default function MyComponent() {
const myColors = new Color(
'#1746d1',
{
darkColorIntensity: 10, // default: 3 (%3)
lightColorIntensity: 10, // default: 3 (%3)
contrastDarkValue: '#000a26',
contrastLightValue: '#c4d3ff',
},
);
console.log('main color: ', myColors.main);
console.log('dark color: ', myColors.dark);
console.log('light color: ', myColors.light);
console.log('contrast color: ', myColors.contrast);
return (
<Box display="flex" width="100%" justifyContent="center" my={10}>
<Box display="flex" key={myColors.main}>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.dark}
>
<Paragraph color={myColors.contrast}>Darker</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.main}
>
<Paragraph color={myColors.contrast}>Main</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={myColors.light}
>
<Paragraph color={myColors.contrast}>Light</Paragraph>
</Box>
</Box>
</Box>
);
}output:
main color: #1746d1
dark color: #1236a3
light color: #3360e9
contrast color: #c4d3ff
import { Color } from '@tiger-ui/color-palette-generator';
import Box from '../../components/Box';
import Paragraph from '../../components/Paragraph';
export default function MyComponent() {
const myColors = [
new Color('#1746d1'), // blue
new Color('#d11717'), // red
new Color('#d1cb17'), // yellow
new Color('#17d136'), // green
]
return (
<Box display="flex" justifyContent="center">
<Box my={10}>
{myColors.map((color) => (
<Box display="flex" key={color.main}>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={color.dark}
>
<Paragraph color={color.contrast}>Darker</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={color.main}
>
<Paragraph color={color.contrast}>Main</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={color.light}
>
<Paragraph color={color.contrast}>Light</Paragraph>
</Box>
</Box>
))}
</Box>
</Box>
);
}output: