Skip to content

Latest commit

 

History

History
152 lines (124 loc) · 3.63 KB

README.md

File metadata and controls

152 lines (124 loc) · 3.63 KB
Raw

do0dle-colors

do0dle-colors is a color scheme generation library with no dependencies that uses OkLCh under the hood to generate color schemes.

Note that there is an error ~0.1 (depending on color) in conversion from OkLab color space into an RGB color space.

The bundle size is currently ~3kB.

You can check color scheme generation web app based on this library here.

Instalation

Install with any prefered package manager such as npm.

npm i do0dle-colors

Usage

Import Color object

import { Color } from 'do0dle-colors'

Create Color instance

const color = new Color('#ff440e')

Use getColorScheme and specify amount of colors in color scheme

const colors = color.getColorScheme(10)

Generation methods

You can specify color scheme generation method

color.getColorScheme(10, 'monochromatic')

Or using distinct methods for more customization

// similar to color.getColorScheme(10, 'analogous')
// but only hue is being changed 
color.getAnalogous(10) 

// but you can specify more parameters
const step = 10
color.getAnalogous(10, step)

You can get an array of avalible generation methods

import { genMethods } from 'do0dle-colors'

Here is the table of avalible generation methods:

Color scheme
analogous
complimentary
monochromatic
quadratic
split complimentary
tetraidic
triadic

You can learn more about them here.

Color constructors

You can create Color instance via:

  • hex string:
new Color('#ff0ae7')
  • css rgb, hsl or oklch property:
new Color('rgb(255 10 231)')
new Color('rgb(255, 10, 231)')

new Color('hsl(306deg 100% 52%)')
new Color('hsl(0.85turn 100% 52%)')

new Color('oklch(74% .63 210)')
new Color('oklch(74% .63 3.67rad)')
  • hsl, rgb or oklch array:
//non-normalized color data
new Color([255, 10, 231], 'rgb')
new Color([306, 100, 52], 'hsl')

//Normalized color data
new Color([1, 0.039, 0.906], 'rgb', true)
new Color([0.85, 1, 0.52], 'hsl', true)

// isNormalized is not considered with oklch
// Lightness and Chroma must be in [0;1] 
// and hue must be in degrees
new Color([.56, .12, 240])  
new Color([.56, .12, 240], 'OkLCh')

Color get methods

You can get Color's color value as:

  • css oklch property string:
const color = new Color([.54, .34, 121])
color.getCssOklch() // 'oklch(54% 34% 121)'
  • css hsl property string:
const color = new Color([306, 100, 52], 'hsl')
color.getCssHsl() // 'hsl(306deg 100% 52%)'
  • css rgb property string:
const color = new Color([306, 100, 52], 'hsl')
color.getCssRgb() // 'rgb(255 10 231)'
  • hex string:
const color = new Color([306, 100, 52], 'hsl')
color.getCssHex() // '#FF0AE7'
  • OkLCh array:
const color = new Color([.54, .34, 121])
color.getOkLChArray() // [.54, .34, 121]
  • hsl array:
const color = new Color([306, 100, 52], 'hsl')
color.getHslArray() // [306, 100, 52]
  • rgb array:
const color = new Color([306, 100, 52], 'hsl')
color.getRgbArray() // [255, 10, 231]

Color Conversion Functions

If you need to convert one color type to another directly you can used provided conversion functions:

import { ConversionFunctions } from 'do0dle-colors'
ConversionFunctions.hslToRgb([306, 1, .52]) // [255, 10, 231]

License

See the LICENSE file for license rights and limitations (MIT).