Quick coding notes
Posts Series Tags About English
Quick coding notes

Contents

Palettes - research notes

   1230 words   6 minutes 
/en/posts/palettes/palettes.png

Generating a color palette

While playing with p5.js I often stumble upon a problem of color palette choice. The colors that I use in my artictic/programming playground are (usually) randomly generated. Even though I’m familiar with practical superiority of HSL/HSB over RGB colorscpace and I seldom use RGB in my scripts, I haven’t tried to create a color palette algorithm myself.

I’m sure there are many such algorithms. There are plenty of pages that allow the user to enter a color and they helpfully output a set of matching, somehow related colors that form some kind of a palette. The obvious target users of such pages are:

  • web page designers
  • digital identity experts (read: people that design and draw corporate or personal logos, portfolio templates, brands)
  • painters, graphical artists, designers

I would like to generate such palette myself. Let’s do some quick research.

SO: Algorithm to randomly generate…

Stack Overflow: Algorithm to randomly generate an aesthetically-pleasing color palette gives more than I can digest, but for future reference:

Stack Overflow again: Color schemes generation - theory and algorithm

I’m sure there is a JavaSript library already…

In my humble attempt to learn JavaScript I created a palette generator (github) which uses KolorWheel.js (github).

I also found chroma.js which - looking at some of its data-oriented functions, like chroma.limits - was initially developed by and for data scientist(s). It seems interesting and may be useful for generating similar, equally distant or extrapolated colors.

Color quantization

Another interesting approach in palette generation task is to use a reference image and sample its pixel color values in such a way that the resulting colors seem aesthetically pleasing (this is a psychological problem rather than algorithmic):

Data visualization

When generating color palettes for data vizualisation, it is important to avoid very vibrant or noisy colors and use color set in which colors seem to have equal distance to each other. Each color should also be visually distinct to any other color in a set. An approach taken by Mathieu Jacomy of the Sciences-Po Medialab is documented on a great github page “I want hue”:

  • algorithms using K-Means clustering, e.g. I want hue

There are also usecases for color palettes that - when applied e.g. to coloring a real world maps and marking specific areas with different colors - give the viewer a good intuition about the intensity of the issue being visualized (e.g. cholopleth maps or heat maps).

For types of color schemes see color schemes

Looking for a match

Did you know that the concept of color wheel tought in elementary schools comes from Isaac Newton? It was 1704 when he found out that hues correspond to wavelengths and organized them in a circle. And the cicle is a powerful concept.

It seems that moving around the cicrcle produce “matching” colors in a variety of ways:

  • monochromatic: when a color is already selected, then - operating in HSL/HSB/HSV models - matching colors can be found by drawing a line in 2D space (where horizontal axis shows the saturation and vertical shows the value); and sampling the colors on that line with equal distance. The resulting color set forms monochromatic palette.
  • complementary colors are opposite each other on the color wheel and can be programatically found by using the same saturation and lightness but for a specific hue h1 take h2 value which is half-circle further; if hue is defined in range (0, 360) then h2 can ba calculated as follows: h2 = (h1 + 180) % 360
  • analogous colors: are groups of three colors that are next to each other on the color wheel; this means that for a specific hue h1 and a given, arbitrary angle a we can calculate other hues using formulas: h2 = (h1 + a) % 360 and h3 = (h2 + a) % 360
  • triadic colors: form a triangle on the wheel and are constructed such that ther is a base color and two colors that are 120 degrees and 240 degrees apart from the base color.

Sidenotes

Here are my random notes and links.

How do people perceive colors

The basics are covered in popular science articles. They explain what rodes and cones are, inform about the difference of their capabilities, explain cone types (classified as red, green and blue cones due to theit different sensitivity to specific wavelength). They give a name to the part of the brain where impulses from optic nerve are delivered (thalamus and visual cortex), and the part where it is processed for meaning (prefronral cortex):

A more deep explanation can be found at wikipedia. The article menions trichromatic (a.k.a Young-Helmholtz from the names of the reaserchers) theory as well as opponent process theory which explains how photoreceptors are wired together and transmit difference between responses of cones of different types.

Apart from physiological aspects of vision (conducting the eye’s cells responce to a light frequency), there are also pure psychological aspects of color perception, like:

  • differences in perception when observed object is presented on different background
  • differences resulting from the colors of surrounding objects or the color and the distance of existing light source(s)
  • differences as a result of age, sex or current health conditions of the observer
  • differences that come from knowledge and memories acquired throuthouth the lifetime as well as from the culture

Color choice

There are other aspects of making color plauground usable for human beings. Instead of asking the user to enter a hex color code, it would be much better to provide her with a color picker of some kind.

Initial color

In order to give the user a choice of what the initial color should be, I want to present them a good-looging component. I searched a bit and found:

Use specific online tool

Play with generated images

I imagine following process of interacting with a piece of computer-generated art: Initially, the user is given:

  • a choice to provide initial color and a palette would be generated
  • a set of initial palettes to choose from
  • a set of templates for width and height; or a set of ratios (1:1, 3:4 etc) with some initial size she can change later
  • a configuration of an artpiece (number of elements, frequencies, widths, symmeties, whatever can be configured) After initial graphics is generated, any change of the above attributes can be changed and the image updates automatically. There is also:
  • possibility to save the image and
  • possibility to save the configuration data to a file and
  • possibility to render an image based on the given configuration file data

I assume that the data in configuration file would fully describe the resulting image: it would allow to generate the pixel-perfectly-same image if the same configuration file is provided.

Updated on 2021-12-02
 programowanie, grafika
Back | Home