@phantom-factotum/colorutils

Color Generator

Dynamically generate colors create simple schemes, and do simple color manipulation

Usage

import {
  colorGenerator,
  colorManipulators,
  logColors,
  colorSchemes,
} from "@phantom-factotum/colorgenerator";

const totalColors = 28;
const startColor = "#5432FC";
const genConfig = {
  generatorType: "randomSchemes",
  startColor,
};
const printConfig = {
  printColors: true,
  // colors per line when printing
  itemsPerLine: 6,
  // whether to show hexCode when printing
  showHexCode: true,
};
const logText = text => {
  logColorText(text, {
    textColor: "#2446DD",
    bgColor: "#7E8FDE",
  });
};

logText("Printing colors with console");
const colors = colorGenerator(totalColors, genConfig);
console.log(colors);

logText("Colors printed using chalk");
logColors(colors, printConfig);

logText("Generating tetradic color scheme from", startColor);
const colorScheme = colorSchemes.getTetradicScheme(startColor);
logColors(colorScheme);

let lightenedColors = colors.map(color =>
  colorManipulators.lightenColor(color, 0.15)
);
logText("Generated colors, but a little lighter:");
logColors(lightenedColors, printConfig);

let darkenedColors = colors.map(color =>
  colorManipulators.darkenColor(color, 0.18)
);
logText("Generated colors, but a little  darker:");
logColors(darkenedColors, printConfig);

---

colorGenerator(length,generatorConfig)

• length: <number>
• generatorConfig: <object>
  Properties shared by all generators:
  • generatorType: <"goldenRatio | "randomSchemes |"random">
  • startColor: <string> first color in list

  goldenRatio

  Uses the golden ratio in HSV color space to distance colors. Color distance isnt checked, but colors usually are distinct
  goldenRatio config properties:
  • startHue: <number> [0-1] If startColor is provided, then startHue will be startColor's hue
  • hueOffset: <number>
  • saturation: <number> [0-1]
  • useRandom: <boolean> introduces random variations to colors
  • variationRatio: <number> [0-1] that determines useRandom maximum color variation

  randomScheme

  Grabs a random color, generates the triadic scheme for that color, removes similar colors, and repeats until desired length is reached
  randomSchemes config properties:
  • thresholdLevelAttempts: <number> number of times to attempt getting colors before decreasing threshold level
  • attemptMultipler: <number> each time the threshold level decreases thresholdLevelAttempts will be multiplied by this value
  • startThreshold: <string | number>

  random

  Grabs random colors. Does not attempt to remove similar colors

returns <array> of hexcodes

---

function logColors(colors,config)

• colors: <array> list of hexcodes
• printConfig: <object>
  • itemsPerLine: <number>
  • showHexCode: <boolean> print hexcode
  • invertTextColor:<boolean> print text in background color complement

returns <array> of logColorText

---

function logColorText(text,config)

• text: <string>
• config: <object>
  • bgColor:<string> hexcode
  • textColor:<string> hexcode
  • printColor:<boolean> whether to log result

returns <string> manipulated with chalk.js to log colors

---

colorManipulators

Object containing color manipulator functions:

• lightenColor(color,ratio)
  • ratio: <number> [0-1] (recommend [0-0.5])
• darkenColor(color,ratio)
  • ratio: <number> [0-1] (recommend [0-0.5])
• alterHSVByRatio(color,{h,s,v})
  • h | s | v : <number> [0-1]
• setColorOpacity(color,opacity)
  • opacity: <number> between 0-1
• RGBAToHex(rgba)
  • rgba: <string> rgba string
• blend(color1,color2,alpha)
  • color1 | color2 <string>
  • alpha <number> [0-1] blend value

---

colorSchemes

Object containing scheme functions. Every scheme returns <array>

• getComplementary(color)
• getTetradicScheme(color)
• getTriadicScheme(color)
• getNeutralScheme(color)
• getAnalogousScheme(color)
• getAllSchemes(color)