Skip to content

Commit

Permalink
Reword things under color harmony
Browse files Browse the repository at this point in the history
  • Loading branch information
facelessuser committed Apr 29, 2022
1 parent e23376b commit 58cca0e
Showing 1 changed file with 33 additions and 23 deletions.
56 changes: 33 additions & 23 deletions docs/src/markdown/harmonies.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,37 @@
# Color Harmonies

In color theory, color harmony refers to the property that certain aesthetically pleasing color combinations have.
Modern day color theory actually originates from as far back as the Renaissance where the first concepts of the color
wheel were defined.
Modern day color theory probably starts with the first color wheel created by Isaac Newton. Based on his observations of
light with prisms, he formed probably the first color wheel. From there, many others built upon this work, sometimes
with opposing ideas.

The original color wheel was created based on the mixing of pigments. As most know, in paint, red, yellow, and blue are
primary colors, and from them, all other hues are created. The traditional model, which we will call the RYB color
space, defined 12 colors that made up the wheel: the primary colors, the secondary colors, and the tertiary colors.
The secondary colors are created by evenly mixing the primary colors, and the tertiary colors are created by evenly
mixing those primary colors with the secondary colors.
The original color wheel, while inspired by what was observed by light was created based on experiments with pigments as
well. As most know, in paint, red, yellow, and blue are considered primary colors. Newton thought this translated to
light as well and stated they were also the primary colors of light. While this isn't actually true, his work was very
important in reshaping how people viewed color.

Over time, the color wheel was refined. The traditional model, which we will call an RYB color model, defined 12 colors
that made up the wheel: the primary colors, the secondary colors, and the tertiary colors. The secondary colors are
created by evenly mixing the primary colors, and the tertiary colors are created by evenly mixing those primary colors
with the secondary colors.

![RYB Color Wheel](images/color-wheel.png)

From this wheel, it was noted that certain colors, based on their relative location on the wheel, were deemed pleasing
when viewed together. This is the idea behind harmonious colors and color schemes created from them.
The idea of color harmonies originates from the idea that colors, based on their relative position on the wheel, can
form more pleasing color combinations.

## Which Color Space is Best for Color Harmonies?

The early work that created the color wheel was based on an RYB color space. In modern TVs and monitors, the RYB color
space is not used. Electronic screens create all their colors with light based methods that mix red, green, and blue
lights. In addition, the human eye perceives colors using red, green, and blue as well.
As we know, these days, there are many color spaces out there, and not all color spaces are created equal.

The early work that created the first color wheel was based on an RYB color model. In modern TVs and monitors, the RYB
color model is not used. Electronic screens create all their colors with light based methods that mix red, green, and
blue lights. In addition, the human eye perceives colors using red, green, and blue as well.

The colors of light generally behave and mix differently than pigments. Most modern color spaces are based on human
perception of light, so RGB based color spaces are quite a bit more common. If we were to compose a color wheel based on
the common sRGB color space, we could simply extract the colors at evenly spaced degrees, 30˚ to be exact.
the common sRGB color space, we could base it off the 3 primary colors of light. Starting with red (0˚), we could
extract the colors at evenly spaced degrees, 30˚ to be exact. This would give us our 12 colors for the sRGB color space.

```playground
HtmlSteps([Color('hsl', [x, 1, 0.5]) for x in range(0, 360, 30)])
Expand Down Expand Up @@ -62,10 +70,10 @@ HtmlSteps(Color('red').harmony('complement', space='hsl'))

## Supported Harmonies

ColorAide currently supports 7 color harmonies: [monochromatic](#monochromatic), [complementary](#complementary),
[split complementary](#split-complementary), [analogous](#analogous), [triadic](#triadic), [square](#tetradic-square),
and [rectangular](#tetradic-rectangular). By default, all color harmonies are calculated with the perceptually uniform
Oklch color space, but other color spaces can be used if desired.
ColorAide currently supports 7 theorized color harmonies: [monochromatic](#monochromatic),
[complementary](#complementary), [split complementary](#split-complementary), [analogous](#analogous),
[triadic](#triadic), [square](#tetradic-square), and [rectangular](#tetradic-rectangular). By default, all color
harmonies are calculated with the perceptually uniform Oklch color space, but other color spaces can be used if desired.

While we use Oklch, we will actually visualize the examples in Okhsl. Oklch is a derivative of Oklch with the lightness
adjusted to match CIELCH and reshaped in a cylindrical form. It is limited to the sRGB gamut only, but it can help
Expand All @@ -88,7 +96,7 @@ hue, very pleasing palettes can be created.
ColorAide will do its best to select colors with sufficient contrast between them. The specified color will usually be
in the middle, but in cases where the color is too close to black or white, it may be offset.

Additionally, the monochromatic harmony is the one color harmony that will accept non-cylindrical color spaces as the
Additionally, the monochromatic harmony is the only color harmony that will accept non-cylindrical color spaces as the
target environment.

![Harmony Monochromatic](images/harmony-mono.png)
Expand All @@ -98,7 +106,7 @@ HtmlSteps(Color('red').harmony('mono'))
```
### Complementary

Complementary uses a dyad of colors at opposite ends of the color wheel.
Complementary harmonies use a dyad of colors at opposite ends of the color wheel.

![Harmony Complementary](images/harmony-complement.png)

Expand All @@ -109,7 +117,7 @@ HtmlSteps(Color('red').harmony('complement'))
### Split Complementary

Split Complementary is similar to complementary, but actually uses a triad of colors. Instead of just choosing one
complement, it splits and chooses two colors on the opposite side.
complement, it splits and chooses two colors on the opposite side that are close, but not adjacent.

![Harmony Split Complementary](images/harmony-split-complement.png)

Expand All @@ -129,7 +137,8 @@ HtmlSteps(Color('red').harmony('analogous'))

### Triadic

Triadic draws an equilateral triangle between 3 colors. For instance, the primary colors have triadic harmony.
Triadic draws an equilateral triangle between 3 colors on the color wheel. For instance, the primary colors have triadic
harmony.

![Harmony Triadic](images/harmony-triadic.png)

Expand All @@ -140,7 +149,7 @@ HtmlSteps(Color('red').harmony('triad'))
### Tetradic Square

Tetradic color harmonies refer to a group of four colors. One tetradic color harmony can be found by drawing a square
between for colors.
between four colors on the color wheel.

![Harmony Tetradic](images/harmony-tetradic.png)

Expand All @@ -150,7 +159,8 @@ HtmlSteps(Color('red').harmony('square'))

### Tetradic Rectangular

The rectangular tetradic harmony is very similar to square except that it draws a rectangle between for colors.
The rectangular tetradic harmony is very similar to the square tetradic harmony except that it draws a rectangle between
four colors instead of a square.

![Harmony Tetradic Rectangular](images/harmony-tetradic-rect.png)

Expand Down

0 comments on commit 58cca0e

Please sign in to comment.