There is a demo available at https://alexandru-postolache.github.io/p5.colorGenerator/demo

ColorGenerator is a p5.js-based library that allows you to generate various color schemes (shades, tints, monochromatic, complementary, triadic, etc.) from a base color. The library works in HSB (Hue, Saturation, Brightness) color mode and provides easy methods to generate and manipulate color schemes.

• Generate random base colors or use predefined ones.
• Create multiple color schemes: complementary, triadic, tetradic, analogous, split complementary, and more.
• Generate shades, tints, and monochromatic palettes.
• Designed for use with p5.js, utilizing its color management features.

You can include the library in your p5.js project in two ways:

1. Download the p5.colorGenerator.js file and include it locally:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="path/to/p5.colorGenerator.js"></script>

2. Use the CDN link to include the library directly:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alexandru-postolache/p5.colorGenerator@latest/p5.colorGenerator.js"></script>

To start generating color schemes, instantiate a ColorGenerator object. You can either pass a base color or let the generator create a random one.

let colorGen = new ColorGenerator(); // Random base color
let colorGen = new ColorGenerator('#ff5733'); // Base color in hex

Generates an array of shades by decreasing brightness. The base color is darkened to produce nr number of shades. The optional limit parameter specifies the minimum brightness.

let shades = colorGen.getShades(5); // Generate 5 shades

Example usage in a p5.js sketch:

let colorGen = new ColorGenerator('#ff5733');
let shades = colorGen.getShades(5);

shades.forEach((shade, index) => {
    fill(shade);
    rect(index * 100, 0, 100, 100); // Draw squares with the shades
});

Generates an array of tints by increasing brightness. The base color is lightened to produce nr number of tints. The optional limit parameter specifies the maximum brightness.

let tints = colorGen.getTints(5); // Generate 5 tints

Example:

let tints = colorGen.getTints(5);

tints.forEach((tint, index) => {
    fill(tint);
    rect(index * 100, 0, 100, 100);
});

Generates a monochromatic palette by adjusting both saturation and brightness. The number of colors is controlled by nr, and you can optionally increase saturation and/or brightness.

let mono = colorGen.getMonochromatic(5, true, false); // Generate 5 monochromatic colors with increasing saturation

Example:

let mono = colorGen.getMonochromatic(5, true, false);

mono.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

Returns an array with the base color and its complementary color (opposite on the color wheel).

let complementary = colorGen.getComplementary();

Example:

let complementary = colorGen.getComplementary();

complementary.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

Generates a triadic color scheme (three colors evenly spaced 120 degrees apart on the color wheel).

let triadic = colorGen.getTriadic();

Example:

let triadic = colorGen.getTriadic();

triadic.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

Generates an analogous color scheme by producing colors next to the base color on the color wheel. The optional degree parameter defines the distance between the colors (default is 30 degrees).

let analogous = colorGen.getAnalogous();

Example:

let analogous = colorGen.getAnalogous(30);

analogous.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

Generates a split complementary color scheme (two colors adjacent to the complementary color). The degree parameter defines how far the colors are from the base complementary color.

let splitComp = colorGen.getSplitComplementary();

Example:

let splitComp = colorGen.getSplitComplementary();

splitComp.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

Generates a tetradic color scheme (four colors, two complementary pairs). The result is four evenly spaced colors on the color wheel.

let tetradic = colorGen.getTetradic();

Example:

let tetradic = colorGen.getTetradic();

tetradic.forEach((color, index) => {
    fill(color);
    rect(index * 100, 0, 100, 100);
});

let colorGen;

function setup() {
    createCanvas(600, 200);
    colorGen = new ColorGenerator('#ff5733'); // Initialize with base color

    let shades = colorGen.getShades(5);
    
    shades.forEach((shade, index) => {
        fill(shade);
        rect(index * 100, 0, 100, 100); // Draw shades
    });
}

This project is licensed under the MIT License.