🌓 color-variants

Generate light and dark variants of a color

Usage

Install

npm install color-variants

Import

// ES modules
import colorVariants from 'color-variants'
 
// CommonJS
const colorVariants = require('color-variants').default

Use

colorVariants({
  base: '#f00',
  light: { steps: 4, lighten: 0.9, hueShift: 20, saturate: -0.1 },
  dark: { steps: 2, darken: 0.5, hueShift: -10, saturate: 0.5 },
})
// [
//   '#FEEEE7',
//   '#FCC2AF',
//   '#FB8C76',
//   '#FD4C3C',
//   '#FF0000', <- base
//   '#BF0000',
//   '#800000',
// ]

Inspiration

• scale by Hayk An
• palx by Brent Jackson

Further reading

• Color in UI Design: A (Practical) Framework by Erik D. Kennedy
• Color schemes - Programming Design Systems by Rune Madsen