lyct

Color templates based of the color theory of Lyft and ColorBox.io

Usage no npm install needed!

<script type="module">
  import lyct from 'https://cdn.skypack.dev/lyct';
</script>

README

Lyct

Travis (.com)

Color templates based of the color theory of Lyft

Pronounced like *licked*

Getting Started

import Lyct from 'lyct';

// or

const Lyct = require('lyct')

TODO

  • Lyct
  • LyctOptions
  • LyctCurves
  • LyctColorType
  • LyctColor
  • LyctColorSet

API

Lyct

Lyct([options: LyctOptions]) => Lyct

const lyct = new Lyct();

configure(options: LyctOptions) => null

const options = {
    steps: 7,
    hue: {
        start: 315,
        end: 293,
        curve: LyctCurves.QUAD_EASEIN
    },
    saturation: {
        start: 4,
        end: 90,
        rate: 130,
        curve: LyctCurves.QUAD_EASEOUT
    },
    luminosity: {
        start: 100,
        end: 53,
        curve: LyctCurves.QUAD_EASEOUT
    }
};
lyct.configure(options);

generate([options: LyctOptions]) = LyctColorSet

lyct.generate() // => LyctColorSet<LyctColor>

generateFrom(color: LyctColor, [options: LyctOptions]) => LyctColorSet

lyct.generateFrom(my_color) // => LyctColorSet<LyctColor>

LyctOptions

All options and their default values. When passing options into a function, only changes from the default need to be passed.

{
    steps: 11,
    hue: {
        start: 315,
        end: 293,
        curve: LyctCurves.QUAD_EASEIN
    },
    saturation: {
        start: 4,
        end: 90,
        rate: 130,
        curve: LyctCurves.QUAD_EASEOUT
    },
    luminosity: {
        start: 100,
        end: 53,
        curve: LyctCurves.QUAD_EASEOUT
    }
}

LyctCurve

Available curves and their values

{
    QUAD_EASEIN: 'Quad - EaseIn',
    QUAD_EASEOUT: 'Quad - EaseOut',
    QUAD_EASEINOUT: 'Quad - EaseInOut',
}

LyctColorType

Available color types and their values

{
    HEX: 'hex',
    RGB: 'rgb',
    HSL: 'hsl',
}

LyctColor

LyctColor(type: string, color: string) => LyctColor

const my_color = LyctColor("hex", "#e413c3");

convert_to(type: string) => string

my_color.convert_to(LyctColorType.HEX); // => "#e413c3"

LyctColorSet

LyctColorSet(color1: LyctColor, color2: LyctColor, ...) => LyctColorSet

const my_color_set = LyctColorSet(my_color);

LyctColorSet(colors: array) => LyctColorSet

const my_color_set = LyctColorSet([my_color]);

convert_all_to(type: string) => array

my_color_set.convert_all_to(LyctColorType.RGB) // => ["rgb(255, 242, 252)", "rgb(253, 187, 237)" .... ]