https://github.com/kruceo/yotum
Color and palletes generator.
https://github.com/kruceo/yotum
color color-picker hex hsb hue rgb
Last synced: 14 days ago
JSON representation
Color and palletes generator.
- Host: GitHub
- URL: https://github.com/kruceo/yotum
- Owner: Kruceo
- Created: 2023-02-22T11:16:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T13:06:50.000Z (almost 2 years ago)
- Last Synced: 2024-07-18T16:09:44.116Z (almost 2 years ago)
- Topics: color, color-picker, hex, hsb, hue, rgb
- Language: JavaScript
- Homepage:
- Size: 228 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Yotum
## **Introduction**
Yotum was created for generate automatic color palletes with js.
## **Technologies**
* Javascript
## **Installation**
```
npm install -g kruceo/yotum
```
## **Getting started**
### Creating color
```js
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:
```js
[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
```js
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
```js
const color = new Color('#ff8252')
const darker = brightness(color,50) //Color with 50% of original bright
```
### Saturation
```js
const color = new Color('#ff8252')
const saturated = saturation(color,50) //Color with 50% of original saturation
```
### Hue rotation
```js
const color = new Color('#ff8252')
const newColor = hue(color,130) //Color with 130° addition to hue rotation
```
### Geometric hue rotation ***(Experiment)***
```js
const color = new Color('#f00')
const newColor = geometricHue(color,90) //the rotation added is sync with color wheel.
```
### Invert
```js
const color = new Color('#ff8252')
const inverted = invert(color) //Inverse color of the original
```
## **Palletes**
### Additive
```js
const color = new Color('#ff8252')
const pallete = additive(color,25,5) // => [Color x 5]
```
### Difference Between
```js
const color1 = new Color('#ff8252')
const color2 = new Color('#0022ff')
const pallete = diffBetween(color1,color2,10) // => [Color x 10]
```
### Square
```js
const color = new Color('#ff8252')
const pallete = square(color,8,25) // => [Color x 8]
```
### Triad
```js
const color = new Color('#ff8252')
const pallete = triad(color,4,25) // => [Color x 4]
```
### Analog
```js
const color = new Color('#ff8252')
const pallete = analog(color,30,8) // => [Color x 8]
```
### Division
```js
const color = new Color('#ff8252')
const pallete = division(color) // => [Color x 5]
```
### Double division
```js
const color = new Color('#ff8252')
const pallete = doubleDivision(color) // => [Color x 5]
```
### Shades
```js
const color = new Color('#ff8252')
const pallete = shades(color1,10,8) // => [Color x 8]
```
## Author
Visit Kruceo website for more projects: kruceo.com
