Yotum

📚 Example ╽ 🧒🏼 Author ╽ 🎁 Donation

Introduction

Yotum was created for generate automatic color palletes with js.

Technologies

• Javascript

Installation

npm install -g kruceo/yotum

Getting started

Creating color

import Color from 'yotum'

const red = new Color('#f00')
const green = new Color('#0f08') // with alpha
const blue = new Color([0,0,255]) // with RGB

console.log(red.rgb)
console.log(green.rgba)
console.log(blue.hex)

output:

[255,0,0]
[0,255,0,0.5]
#0000ff

Color Class

Input

The constructor accepts hex and rgb, both with alpha support.

Internal color systems

• RGB
• Hex
• HSB

const color = new Color('f00f')

console.log(color.rgb) // return [255,0,0]
console.log(color.rgba) // return [255,0,0,1]

console.log(color.hex) //return "ff0000"
console.log(color.hexAlpha) //return "ff0000f"

console.log(color.hsb)  //return { hue:0, brightness:100, saturation:100 }
console.log(color.hsba)  //return { hue:0, brightness:100, saturation:100, alpha:100 }

Mixing

Brightness

  const color = new Color('#ff8252')
  const darker = brightness(color,50) //Color with 50% of original bright

Saturation

  const color = new Color('#ff8252')
  const saturated = saturation(color,50) //Color with 50% of original saturation

Hue rotation

  const color = new Color('#ff8252')
  const newColor = hue(color,130) //Color with 130° addition to hue rotation

Geometric hue rotation (Experiment)

  const color = new Color('#f00')
  const newColor = geometricHue(color,90) //the rotation added is sync with color wheel.

Invert

  const color = new Color('#ff8252')
  const inverted = invert(color) //Inverse color of the original

Palletes

Additive

  const color = new Color('#ff8252')
  const pallete = additive(color,25,5) // => [Color x 5]

Difference Between

  const color1 = new Color('#ff8252')
  const color2 = new Color('#0022ff')
  const pallete = diffBetween(color1,color2,10) // => [Color x 10]

Square

  const color = new Color('#ff8252')
  const pallete = square(color,8,25) // => [Color x 8]

Triad

  const color = new Color('#ff8252')
  const pallete = triad(color,4,25) // => [Color x 4]

Analog

  const color = new Color('#ff8252')
  const pallete = analog(color,30,8) // => [Color x 8]

Division

  const color = new Color('#ff8252')
  const pallete = division(color) // => [Color x 5]

Double division

  const color = new Color('#ff8252')
  const pallete = doubleDivision(color) // => [Color x 5]

Shades

  const color = new Color('#ff8252')
  const pallete = shades(color1,10,8) // => [Color x 8]

Author

Visit Kruceo website for more projects: kruceo.com