color-token

color-token

simple tonal palettes generator with javascript

How to use

import { createTonalPalettes } from "color-token";

const colorPalette = createTonalPalettes("gray", "#cdcdcd");

console.log(colorPalette.gray500);

Utils

Color Picker

• brightness

  use Color Model YUV

  import { ColorPicker } from "color-token";
  console.log(ColorPicker.brightness("#3f2ed2")); // 75.955
  

• luminance

  use Color Model YIQ

  import { ColorPicker } from "color-token";
  console.log(ColorPicker.luminance("#3f2ed2")); // 69.779
  

• saturation

  use Color Model HSL

  import { ColorPicker } from "color-token";
  console.log(ColorPicker.saturation("#3f2ed2")); // 0.6456692913385826
  

Color Adjustment

• opacity

  import { ColorAdjustment } from "color-token";
  console.log(ColorAdjustment.opacity("#3f2ed2", 0.5));
  

• brightness

  import { ColorAdjustment } from "color-token";
  console.log(ColorAdjustment.brightness("#3f2ed2", -0.2));
  

• blendColors

  import { ColorAdjustment } from "color-token";
  console.log(ColorAdjustment.blendColors("#3f2ed2", "#a1fe23", 0.4));
  

• gray

  import { ColorAdjustment } from "color-token";
  console.log(ColorAdjustment.gray("#3f2ed2"));
  

Support Color Model

• rgb
• hex
• hsl
• lab
• cmyk
• yiq
• yuv
• yCbCr