tesk9 / palette / Palette.Generative

Generate a palette by hue

complementary : SolidColor -> SolidColor

Find the color opposite the color you pass in on the color wheel.

E.g., if you pass in a reddish color, you should expect to get back a tealish color.

Ellie example

triadic : SolidColor -> ( SolidColor, SolidColor )

Find the other two colors in the triadic scheme defined by the color passed in.

Triadic color schemes are evenly-spaced, so each of the three colors is 120 degrees from the others.

The internet says this scheme will be vibrant, and that you should mostly use one of the three colors and only use the other two for accents.

Ellie example

splitComplementary : Basics.Float -> SolidColor -> ( SolidColor, SolidColor )

Build a three-color scheme by rotating the same amount from the initial color in both directions.

triadic, the evenly-spaced 3-color scheme, can be defined in terms of this function:

triadic color =
    splitComplementary 120 color

Initial rotation is clamped between 0 and 180.

Ellie example

square : SolidColor -> ( SolidColor, SolidColor, SolidColor )

Find four equally-spaced colors along the color wheel starting from the passed-in color.

Ellie example

tetratic : Basics.Float -> SolidColor -> ( SolidColor, SolidColor, SolidColor )

Find four colors along the color wheel starting from the passed-in color.

This differs from the square helper in that our values aren't equally spaced -- we are selecting colors on the color wheel with a rectangle. We can actually define square in terms of this function as follows:

square color =
    tetratic 60 color

We'll rotate the number of degrees passed in along the color wheel to find our first color. Then we'll rotate the "length" of the rectangle -- as much as we need to in order to make it all the way around.

Initial rotation is clamped between 0 and 180.

Ellie example

Generate a palette by lightness

monochromatic : Basics.Float -> SolidColor -> List SolidColor

Create a monochromatic palette. The Float argument is size of the Lightness steps that you'd like in the palette.

If you wanted a grayscale palette, and you wanted it to have five colors, you could do something like this:

grayscalePalette =
    monochromatic 20 black

Colors will be arranged from darkest to lightest.

Ellie example