Feature: Color Harmonies

[EricRovell]

Color Harmonies

Summary

Add a new interface methods for generating color harmonies.

Motivation

This feature provides an easy way to get good color combinations for the user. For example, to generate accent color or create a color palette on the fly.

Detailed design

The idea is to extend current interface or provide the functionality with a plugin. All methods returns new Colord instances (if there are more than one, an array of instances).

import { colord } from "colord";

const color = colord("#DC3522");

color()
  .analogous()
  .map(color => color.toHex()); // -> [ "#dc3522", "#dc2259", "#dc2234", "#dc3522", "#dc5a22", "#dc7F22" ]

color()
  .monochromatic();
  .map(color => color.toHex()); // ->  [ "#dc3522", "#070201", "#320c08", "#5c160e", "#872115", "#b12b1b" ]

color().complimentary(); // -> "#22c9dc"

color()
  .splitcomplimentary()
  .map(color => color.toHex()); // -> [ "#dc3522", "#22dc92", "#226cdc" ]

color()
  .triadic()
  .map(color => color.toHex()); // -> [ "#dc3522", "#22dc35", "#3522dc" ]

color()
  .tetradic()
  .map(color => color.toHex()); // -> [ "#dc3522", "#6cdc22", "#22c9dc", "#9222dc" ]

color()
  .rect()
  .map(color => color.toHex()); // -> [ "#dc3522", "#c9dc22", "#22c9dc", "3522dc" ]

If the feature looks promising to you, after discussion of API interface and should it be the part of core package or part of the plugin, I would like to implement this feature.

[omgovich]

Hi, I'm not sure I understand the use cases for that functionality. In my opinion, developers are often looking for a tool creating color shades instead of harmonies, but probably the suggested functionality might be helpful for someone, so I don't mind adding this to the package, but it definitely should be a plugin (not in the core) and I would merge all the types into one method (like here) to keep the docs compact.

import { colord, extend } from "colors";
import harmonies from "colord/plugins/harmonies";

extend([harmonies])

colors('#dc3522').harmonies('analogous').map(c => c.toHex()); // [ "#dc3522", "#dc2259", "#dc2234", "#dc3522", "#dc5a22", "#dc7F22" ]
//            or .harmonize(

[EricRovell]

I was thinking about tints and shades too and it was on my list for suggestions. I have got the idea about one method, it would be more compact indeed. Still, I am not sure what to do with the "complimentary" case. it returns just one color. Should it return the original and complimentary both via array for consistency?

[omgovich]

Yeah, I think it should.

[EricRovell]

Alright. I will try to implement this plugin then. I might use it for myself too :)