- Notifications
You must be signed in to change notification settings - Fork2
Typescript Color Scheme Generation Library
License
do0dleman/do0dle-colors
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 iscurrently ~3kB.
You can check color scheme generation web app based on this libraryhere.
Install with any prefered package manager such asnpm.
npm i do0dle-colors
ImportColor object
import{Color}from'do0dle-colors'
CreateColor instance
constcolor=newColor('#ff440e')
UsegetColorScheme and specify amount of colors in color scheme
constcolors=color.getColorScheme(10)
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 changedcolor.getAnalogous(10)// but you can specify more parametersconststep=10color.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 themhere.
You can createColor instance via:
- hex string:
newColor('#ff0ae7')
- css rgb, hsl or oklch property:
newColor('rgb(255 10 231)')newColor('rgb(255, 10, 231)')newColor('hsl(306deg 100% 52%)')newColor('hsl(0.85turn 100% 52%)')newColor('oklch(74% .63 210)')newColor('oklch(74% .63 3.67rad)')
- hsl, rgb or oklch array:
//non-normalized color datanewColor([255,10,231],'rgb')newColor([306,100,52],'hsl')//Normalized color datanewColor([1,0.039,0.906],'rgb',true)newColor([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 degreesnewColor([.56,.12,240])newColor([.56,.12,240],'OkLCh')
You can getColor's color value as:
- css oklch property string:
constcolor=newColor([.54,.34,121])color.getCssOklch()// 'oklch(54% 34% 121)'
- css hsl property string:
constcolor=newColor([306,100,52],'hsl')color.getCssHsl()// 'hsl(306deg 100% 52%)'
- css rgb property string:
constcolor=newColor([306,100,52],'hsl')color.getCssRgb()// 'rgb(255 10 231)'
- hex string:
constcolor=newColor([306,100,52],'hsl')color.getCssHex()// '#FF0AE7'
- OkLCh array:
constcolor=newColor([.54,.34,121])color.getOkLChArray()// [.54, .34, 121]
- hsl array:
constcolor=newColor([306,100,52],'hsl')color.getHslArray()// [306, 100, 52]
- rgb array:
constcolor=newColor([306,100,52],'hsl')color.getRgbArray()// [255, 10, 231]
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]
See theLICENSE file for license rights and limitations (MIT).
About
Typescript Color Scheme Generation Library