goethe
v2.0.0
Published
Immutable color utility with magic conversion and manipulation.
Downloads
45
Readme
Goethe
Immutable color utility with conversion and manipulation. Basically an immutable version of MoOx/color but fully functional / immutable.
Usage
To install the latest version:
npm install --save goethe
Then? Just go crazy :)
import Color from 'goethe';
const very = Color([10, 230, 40]).lighten(40).clearer(0.1);
const easy = Color('red').mix(very, 0.3).rotate(20).opacity(1);
const usage = easy.red(200).blacken(0.1);
You can call .toString([mode])
manually, but goethe has valueOf set. That means
that the colors can be converted to RGB(A) CSS strings automatically.
Goethe also supports Adam Morse's nicer palette for the web, also known as Colors.css. Here's how to use it:
import Color from 'goethe/lib/with-better-colors';
const blue = Color('blue');
blue.toString('hex') // #0074D9
Note that the npm colors.css
package is listed as an optional dependency for
Goethe.
Constructors
You can input a lot into Goethe's Color
constructor.
CSS Color String
Color('#000000')
Color('blue')
Color('rgb(0, 0, 0)')
RGB or RGBA array
Color([0, 0, 0])
Color([0, 0, 0, 1])
RGB(A) object
Color({ r: 0, g: 0, b: 0, a: 0.5 })
The opacity a
is optional and is set to 1
by default.
Setters
color.red(234)
color.green(234)
color.blue(234)
color.opacity(0.5)
// And for completeness
color.setRed(234)
color.setGreen(234)
color.setBlue(234)
color.setOpacity(0.5)
Getters
color.red()
color.green()
color.blue()
color.opacity()
// For completeness
color.getRed()
color.getGreen()
color.getRed()
color.getOpacity()
color.rgbArray()
color.hsvArray()
color.raw()
color.getRaw()
// Luminance between 0 and 1
color.luminance()
color.isLight()
color.isDark()
// These all convert to { r: 0, g: 0, b: 0, a: 0}
color.toRGB()
color.toRGBA()
color.toObject()
There are some special methods to convert the Color to a string:
.toString()
converts the color to an RGB(A) string by default. You can
change that behavior by setting the argument to one of these modes:
- hex
- percent
- keyword
- hsl
There's also a .valueOf()
method that converts the Color to an RGB(a) string
if JavaScript casts it to a string. This allows you to use the object without
explicitly converting it.
Methods
// Relatively change opacity by a factor
color.clearer(factor)
color.opaquer(factor)
// Relatively change saturation by a factor
color.saturate(factor)
color.desaturate(factor)
// Get the grayscale of a color
color.greyscale()
color.grayscale()
// Rotate hue
color.rotate(deg)
color.invert() // Rotates by 180 degrees
// Relatively change brightness by a factor
color.darken(factor)
color.lighten(factor)
// Returns the contrast ratio of two colors which is a value between 0 and 21
color.contrast(another_color)
// Mixes the second color to the first by the factor
color.mix(another_color, factor)
// Whiten / Blacken color by factor
color.whiten(factor)
color.blacken(factor)
// Copy / Clone color
color.copy()
color.clone()
// Check whether an object is a Color
Color.is(color)