0.0.1-a • Published 2 years ago

@phantom-factotum/colorutils v0.0.1-a

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

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 distinctgoldenRatio 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 reachedrandomSchemes 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)
  • darkenColor(color,ratio)
  • 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)