@tiger-ui/color-palette-generator

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

More Examples

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: