Color Palette Generator
**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.
## Installation
Install the package in your project directory with:
### npm:
```
npm install @tiger-ui/color-palette-generator
```
### yarn:
```
yarn add @tiger-ui/color-palette-generator
```
# Examples
Let's make an example on a [React](https://react.dev/) project:
```tsx
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 (
Darker
Main
Light
);
}
```
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:
```tsx
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 (
Darker
Main
Light
);
}
```
output:
```
main color: #1746d1
dark color: #1236a3
light color: #3360e9
contrast color: #c4d3ff
```
# More Examples
```tsx
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 (
{myColors.map((color) => (
Darker
Main
Light
))}
);
}
```
output:
