Quaternary Hues
2019-12-30
The Quaternary Hues List standardizes names for 24 hues in the RGB color space. Primary, Secondary, and Tertiary colors are well attested historically. This effort is to establish Quaternaries with a greater degree of certainty.
Version 3.0, updated 2023-10-21.
Rationale For the Quaternary Hues List
I wanted a list of Quaternary colors and was surprised that nothing had been established with confidence. I have found existing lists unsatisfactory. Determined to create a fully researched list to answer this question once-and-for-all (at least for myself), I researched and took notes on my decision making process.
First, I found available candidates for each hue. Next, I selected the best based on the following criteria:
- Spectral Colors
- Early attestation (established color definitions favored over novelty)
- Recognizable color names (i.e. Coral over Coquelicot)
- Authoritative sources (i.e. ISCC–NBS)
- Lack of contenders (I chose from available names without inventing new ones)
Primary and Secondary colors can be established with certainty:
Primaries
- Red (0°) - Color at the end of the visible spectrum of light, next to Orange and opposite Violet. It has a dominant wavelength of approximately 625–740 nm.
- Green (120°) - Color between Blue and Yellow on the visible spectrum evoked by light with dominant wavelength of roughly 495–570 nm.
- Blue (240°) - Color between Violet and Green on the spectrum of visible light. It has a dominant wavelength between approximately 450 and 495 nm.
Secondaries
- Yellow (60°) - Color between Orange and Green on the spectrum of visible light with a dominant wavelength of roughly 570–590 nm.
- Cyan (180°) - Color between Green and Blue on the spectrum of visible light with a dominant wavelength of roughly 490–520 nm.
- Magenta (300°) - Variously defined as purplish-red, reddish-purple or mauvish-crimson. On color wheels of the RGB (additive) and CMY (subtractive) color models, it is located midway between red and blue.
Magenta is an extra-spectral color, meaning that it is not a hue associated with monochromatic visible light. Magenta is evoked by light having less power in green wavelengths than in blue/violet and red wavelengths (complements of magenta have wavelength 500–530 nm). An alternate candidate for this color name is Fuchsia, but it is usually considered more purplish than Magenta.
Tertiaries
Tertiaries can be established with near certainty. Additional candidates do not present a serious threat to those selected.
- Orange (30°) - Halfway between Red and Yellow. Spectral color at 590–620 nm.
- Chartreuse (90°) - Halfway between Yellow and Green.
- Spring Green (150°) - Halfway between Green and Cyan.
- Azure (210°) - Halfway between Cyan and Blue.
- Violet (270°) - Halfway between Blue and Magenta. Spectral color at 380–450 nm.
- Rose (330°) - Halfway between Magenta and Red.
Alternate candidates:
Quaternaries
Some Quaternaries can be established with certainty or high confidence. The following are well established and can be considered Certain:
- Amber (45°) - A pure chroma color, halfway between Yellow and Orange.
- Lime (75°) - Color between Chartreuse and Yellow on the color wheel.
- Harlequin (105°) - In modern color terminology, the color halfway between Green and Chartreuse green on the RGB color wheel. Harlequin is a pure spectral color at approximately 552 nm on the visible spectrum.
- Erin (135°) - Color which is halfway between Green and Spring Green on the color wheel.
Alternate candidates:
- Amber (45°): Gold
- Lime (75°): Citron
- Harlequin (105°): Apple Green
- Erin (135°): Shamrock, Emerald, and Irish Green.
The following can be established with High Confidence:
- Coral (15°) 90% certainty - represents the colors of those cnidarians known as precious corals.
- Aquamarine (165°) 90% certainty - Color that is a light bluish tint of Green that is in-between Blue and Spring Green.
- Capri (195°) 90% certainty - A deep shade of Sky Blue which is between Cyan and Azure.
Alternate candidates
- Coral (15°): Coquelicot, Vermilion, and Persimmon
- Aquamarine (165°): Viridian and Turquoise.
- Capri (195°): Celeste, Marian, Blue Celeste, and Sky Blue
Coral had limited contention for Quaternary 15°. The first recorded use of coral as a color name in English was in 1513. Vermilion, though having a much more recognizable color name, is too red. Persimmon is too orange. The previous version of this palette used Coquelicot, but Coral is a better match and easier to pronounce.
Medium Confidence Quaternaries
The following can be established with fairly high confidence, though some discretion is involved.
- Crimson (345°) 80% confidence - A strong, red color, inclining to purple. It originally meant the color of the kermes dye produced from a scale insect, Kermes vermilio, but the name is now sometimes also used as a generic term for slightly bluish-red colors that are between Red and Rose.
- Purple (285°) 70% confidence - Color intermediate between Blue and Red. It is similar to Violet, but unlike Violet, which is a spectral color with its own wavelength on the visible spectrum of light, Purple is a secondary color made by combining Red and Blue.
Crimson has some contenders, but due to general use as "a color between Red and Rose," this was the best fit.
Of these, Purple is most ambiguous. The definition of Purple varies by culture, though it has long been used as a Secondary in the RYB color model. At times it has been considered synonymous with Violet. However, it usually occupies a space closer to red.
- Alternate candidates: Heliotrope, Amethyst, Mulberry, Purpureus, Purpura, Palatinate
Lower Confidence Quaternaries
The following were the most difficult Quaternaries to establish, and represent many hours of research to pinpoint suitable representatives.
- Royal Blue (225°) 60% confidence - Bright shade and a dark shade of azure blue.
- Ultramarine (255°) 60% confidence - Deep blue color pigment which was originally made by grinding lapis lazuli into a powder.
- Byzantium (315°) 60% confidence - Particular dark tone of purple
Royal Blue has a more traditional variation which is darker, which Pantone places at 336° and Mother of All HTML Color Charts at 219°. However, the more modern interpretation is closer to the web color established by the W3C in 1999 which places it at 225°.
There seems to be some agreement that Cerulean belongs here, but I find this unsatisfactory because of the variance I see in the samples. I would place Cerulean at 210° if selecting for a Quaternary. Also, I associate Cerulean with the Winsor & Newton Cerulean Blue oil paint I have used (which it is noticably more Cyanish than 225°).
- Alternate candidates: Cerulean, Savoy Blue, Egyptian Blue, and Cobalt Blue.
Ultramarine The name comes from the Latin ultramarinus, literally "beyond the sea", because the pigment was imported into Europe from mines in Afghanistan by Italian traders during the 14th and 15th centuries.
- Alternate candidate: Indigo.
Indigo's range includes modern-day Blue (240°). In the end, this was a difficult decision and I concede Indigo would have been a reasonable choice for 255°.
Byzantium is a particular dark tone of purple. The first recorded use of byzantium as a color name in English was in 1926. The ISCC-NBS has two listings for Byzantium at 311° and 315°. Because this color could be narrowed down to a small arc, it has been selected over other candidates, which were more difficult to narrow.
There seems to be some agreement that Cerise belongs here, but I would place Cerise at 345° if selecting for a Quaternary because Cerise color examples appear redder than Rose.
Cascading Style Sheets
Cardinal Hue Variables
This simple style sheet includes the 24 hues as single-entries:
- 24 cardinal hues as css variables: Download
Color Variations
- Color Variables only, with Variations: Download
- With Classes for Background, Text, and Borders: Download
The variation style sheets include 13 variations built on the cardinal hues:
- cardinal - hsl(hue, 100%, 50%)
- light - hsl(hue, 100%, 70%)
- lighter - hsl(hue, 100%, 80%)
- lightest - hsl(hue, 100%, 90%)
- tint - hsl(hue, 50%, 95%)
- dim - hsl(hue, 80%, 80%)
- muted - hsl(hue, 60%, 70%)
- medium - hsl(hue, 40%, 60%)
- gray - hsl(hue, 20%, 50%)
- bright - hsl(hue, 100%, 60%)
- dark - hsl(hue, 100%, 40%)
- darker - hsl(hue, 100%, 30%)
- darkest - hsl(hue, 100%, 20%)