HRYB vs. HSL
Color, specifically finding harmonious pairings, has always been tough for me. It’s a subject that’s never really made sense, and is one of the things I’m doing a deep dive on right now in my studies. This essay summarizes some thoughts around common color models and conversions between HSL color angle and traditional color wheel angles.
Color Models
One thing that has taken me by surprise was the number of different ways to represent color numerically. For example, there’s the RGB, CMYk, HSL, RYB, and Pantone are all different approaches for specifying color with different pro’s and con’s:
RGB – The RGB model seems to be the most common model for computer graphics, where the 3 primaries are red, green, and blue. Colors combine additively like light, which means combining colors creates white, and the absence of color is black. Although this approach is efficient for computer graphics, it is very, very unintuitive to use for the artist.
CMYk – The CMYk model is the inverse model to RGB, where the primaries are cyan, magenta, yellow, and black (i.e. key). In the CMYk model, black is created by accumulating color, and white is the absence of color. This approach to color is useful for printing, where the base color of a sheet of paper is white, and inks accumulate to create the multitude of different colors.
Painter’s RYB – The primary colors in RGB are red, yellow, and green. Yet …. red, yellow, and blue are the standard primary colors that artists and children are taught, and also the foundation for standard guidelines and intuitions for the color wheel harmonies. Since paints blend subtractively (i.e. more paint = darker), CMYk is probably closer to this traditional model than RGB. I’m not sure if this has an official name, so I’ve been referencing it as the painter’s RYB in my studies.
HSL – The HSL model rearranges the RGB colors from a cube into a cylinder. Instead of representing colors as a combination 3 primary colors, the HSL model specifies a color using 3 qualities: hue (angular component of the cylinder), saturation (radial component of the cylinder), and lightness (height component of the cylinder). For the artist, transforming the color model from a rectangular coordinate system into a cylindrical coordinate system makes it much simpler to specify a color.
Pantone – The Pantone approach to color is to name every color with a code. Physical color swatches or specialized equipment can be purchased for match colors against the Pantone standard. Although it’s not very useful for creating digital art, this is useful for specifying colors of physical objects, e.g. fashion, graphic design, etc.
Figure 1
RGB blending Venn diagram. The absence of color is black. Colors blend together additively. The accumulation of color creates white. [image source: wikimedia]
Figure 2
CMYk blending Venn diagram. The absence of color is white. Colors blend together subtractively. The accumulation of color creates black. [image source: wikimedia]
Figure 3
RGB/CMYk color models are occupy a rectangular coordinate system. In RGB, the unit vectors (i.e. primary colors / axes) are the red, green, and blue edges of the cube. In CMYk, the unit vectors are the cyan, magenta, and yellow edges of the cube. [image source: wikimedia]
Figure 4
The HSL color model transforms the RGB coordinate system into a cylindrical coordinate system. Hue is the angular component, saturation is the radial component, and lightness is the longitudinal component. [image source: wikimedia]
Figure 5
The HSV color model transforms the RGB coordinate system into a cylindrical coordinate system. Hue is the angular component, saturation is the radial component, and value is the longitudinal component. [image source: wikimedia]
The Preferred Color Model for Generative Art ??
Personally, I’m finding HSL (plus a small tweak) to be most intuitive way to study and handle color. HSL allows the artist to specify color using 3 intuitive components, which contrasts with the 3 mathematical vectors from RGB. Color selection essentially breaks down to answering these 3 questions:
Hue (0-360 degrees) – What color do I want? Blue? Red? Yellow?
Saturation (0-100%) – How rich do I want my color? Straight from the tube? Or very muted and subtle?
Lightness (0-100%) – How bright do I want the color to be? White and bright? Middle gray? Dark shadows? Black?
There is a caveat though. The HSL model, does not play well with the painter’s color wheel, and which makes it hard to use the traditional color harmonies programmatically. The reason lies in the difference in RGB versus the painter’s RYB model, where RGB uses green as a primary color instead of yellow (i.e. at 120 degrees). Because the HSL model is derived from RGB, the angles in the HSL cylinder inherit this quirk.
Figure 6
The HSL color wheel. This shows the hue component of the HSL color model. The wheel starts with red at 0 degrees, and advances clockwise. Each RGB primary (i.e. red, green, and blue) is equally spaced from each other at 0, 120, and 240 degrees respectively. The CMYk primaries are straddled between each pair of RGB primaries. [image source: wikimedia]
The Conversion Formula
The main difference between HSL versus the painter’s color wheel is the position of the second primary color. Red and blue occupy the same location, 0 and 240 degrees, respectively. However, green is in the position of the second primary color (120 degrees) in the HSL model instead of yellow. The net effect of shifting the primary colors is that HSL:
compresses the range of reds, oranges, and yellows,
and stretches out the range of greens, cyans, and blues.
There is no effect on blues, purples, and reds.
To preserve the traditional color wheel approach for color harmonies, my approach so far has been:
Specify hue based on the angles on the painter’s RYB color wheel.
Convert the painter’s RYB color wheel angle into the standard HSL angle with a cubic regression model.
A conversion table of HSL versus color wheel angles was generated to create a regression formula that converts color wheel angles into standard HSL angles. Values were visually determined using the traditional color wheel:
Red - 0 deg (same)
Orange - RYB: 60 deg <=> HSL: 30 deg
Yellow - RYB: 120 deg <=> HSL: 60 deg
Green - RYB: 180 deg <=> HSL: 120 deg
Blue - 240 deg (same)
Purple - 300 deg (same)
Formula 1: Color wheel (RYB) angle to HSL angle
H_HSL = 0.000*x^3 + -0.004*x^2 + 0.667*x, where
x = H_RYB: [0, 240 degrees],
no conversion needed [240, 360 degrees]
Formula 2: Color wheel (RYB) angle to HSL angle
H_RYB = 0.000*x^3 + -0.010*x^2 + 2.400*x, where
x = H_HSL: [0, 240 degrees],
no conversion needed [240, 360 degrees]
These conversion formulas are imperfect and have shortcoming, e.g. luminance is not taken into account. But for now, they have been good enough for continuing my studies in color theory and generative art.
Key Takeaways / TL;DR
There are many different ways to specify the same color. Each color model has its own pro’s and con’s, and the best color model depends largely on the application.
HSL (and/or HSV) appears to be the most intuitive way to specify colors for the artist. There are nuances for HSL v. HSV. I’m most familiar with managing colors with HSL in this manner:
Hue (0-360 degrees) – What color do I want?
Saturation (0-100%) – How rich do I want my color?
Lightness (0-100%) – How bright do I want the color to be?
HSL’s shortcoming is when the artist wants to programmatically define traditional color harmonies from the color wheel. In that case, it is necessary to convert the color wheel angles into the standard HSL angles.