hclwizard.org Open in urlscan Pro
138.232.16.219  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * 
   
 * Navigation

 * HCL
   
   * BACK
   
   * HCL
   * HCL Color Space
   * Color Palettes
   * Somewhere over the Rainbow
 * 
 * Online Apps
   
   * BACK
   
   * Online Apps
   * Palette Creator
   * Deficiency Emulator
   * Color Picker
 * 
 * Software
   
   * BACK
   
   * Software
   * R colorspace
   * Python colorspace
 * 
 * References
 * 

 * 
 * Get in Touch
 * 
 * Search
   

Sequential
#Dark Mint



Palette Creator

»Design your own color palette based on HCL principles.«

Deficiency Emulator

»Do your figures work for viewers with color vision deficiencies?«

Color Picker

»Select and export colors using the HCL color space.«


HCL COLOR SPACE

The hclwizard provides tools for manipulating and assessing colors and palettes
based on the underlying colorspace software (available in R and Python). It
leverages the HCL color space: a color model that is based on human color
perception and thus makes it easy to choose good color palettes by varying three
color properties: Hue (= type of color, dominant wavelength) - Chroma (=
colorfulness) - Luminance (= brightness). As shown in the color swatches below
each property can be varied while keeping the other two properties fixed.

Hue
 * 
 * 
 * 
 * 
 * 

Chroma
 * 
 * 
 * 
 * 
 * 

Luminance
 * 
 * 
 * 
 * 
 * 




COLOR PALETTES

For color coding data visualizations it is crucial to choose a palette that
appropriately captures the underlying information. Three types are commonly
distinguished: Qualitative palettes for coding categorical information, i.e.,
where no particular ordering of categories is available and every color should
receive the same perceptual weight. Sequential palettes for coding
ordered/numeric information, i.e., where colors go from high to low (or vice
versa). Diverging palettes for coding numeric information around a central
neutral value, i.e., where colors diverge from neutral to two extremes. The type
of palette is determined by luminance differences (= light-dark contrasts, or
the lack thereof), as shown in the version below, desaturated to a grayscale.

Qualitative (Set 2)
 * Color
 * 
 * 
 * 
 * 
 * 

 * Gray
 * 
 * 
 * 
 * 
 * 

Sequential (Blues 3)
 * Color
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Gray
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Diverging (Green-Brown)
 * Color
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Gray
 * 
 * 
 * 
 * 
 * 
 * 
 * 




EXAMPLES

By choosing suitable trajectories along the hue, chroma, and luminance axes of
the HCL color space, a wide variety of HCL-based color palettes can be designed.
Some further examples are provided below.

Qualitative
 * Pastel 1
 * 
 * 
 * 
 * 
 * 

 * Dark 3
 * 
 * 
 * 
 * 
 * 

 * Harmonic
 * 
 * 
 * 
 * 
 * 

Sequential (single-hue)
 * Purples 3
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Reds 3
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Greens 3
 * 
 * 
 * 
 * 
 * 
 * 
 * 


Sequential (multi-hue)
 * Purple-Blue
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Viridis
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * ag_Sunset
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Diverging
 * Blue-Red 3
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Green-Orange
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * Cork
 * 
 * 
 * 
 * 
 * 
 * 
 * 




SOMEWHERE OVER THE RAINBOW

The go-to palette in many software packages is - or used to be until rather
recently - the so-called rainbow: a palette created by changing the hue in
highly-saturated RGB colors. This has been widely recognized as having a number
of disadvantages including: abrupt shifts in brightness, misleading for viewers
with color vision deficiencies, too flashy to look at for a longer time. For
more details and further pointers see “The End of the Rainbow” by Hawkins et al.
(2014) or “Somewhere over the Rainbow: How to Make Effective Use of Colors in
Meteorological Visualizations” by Stauffer et al. (2015) as well as the
#endrainbow hashtag on Twitter.

In a nutshell, the (in-)famous RGB rainbow palette is virtually always a poor
choice and properly balanced qualitative, sequential, or diverging palettes -
such as the HCL-based palettes provided here - are preferable. Despite such
alternatives becoming more and more widely available the rainbow palette is
unfortunately still widely used. Below we show some wild-caught examples,
highlight their problems (e.g., by desaturation to grayscale or by emulating
color vision deficiencies), and suggest better alternatives.


WOULD BOB ROSS APPROVE?

When you see a (scientific) data visualization with a rainbow, ask yourself:
Would Bob Ross approve of this?

Most likely not. In contrast, choosing a HCL-based palette instead will yield
less flashy colors that change smoothly...very much in the spirit of The Joy of
Painting.




HEATMAP FROM THE GRAMMAR OF GRAPHICS

Even in the excellent book "The Grammar of Graphics" by Wilkinson (2005), the
rainbow palette is used in one of the first figures, depicting a heatmap of a
bivariate kernel density estimate.

The original palette changes back and forth between dark and light colors and
works poorly for colorblind viewers. A better alternative would be a sequential
heat colors palette. It goes from light to dark and hence also works well for
colorblind viewers.

→ ←
 * Alternative (deutan)
 * Original
 * Original (desaturated)
 * Original (deutan)
 * Alternative (heat colors)
 * Alternative (desaturated)


WEATHER MAP

Weather forecasts are often communicated through shaded maps. As an example the
dewpoint temperature forecast (NOAA EMC) from a certain FV3 Global Forecast
System (GFS) product is shown. It does not use a standard rainbow but the
palette is also composed of highly-saturated colors with a wide range of hues.

The original palette abruptly changes hue, chroma, and luminance and hence does
not convey a continuous temperature scale. Instead the HCL-based sunset palette
is also built from a wide range of hues but changes hue, chroma, and luminance
smoothly. This also works well in grayscale or for colorblind viewers.

→ ←
 * Alternative (deutan)
 * Original
 * Original (HCL spectrum)
 * Original (desaturated)
 * Original (deutan)
 * Alternative (sunset colors)
 * Alternative (HCL spectrum)
 * Alternative (desaturated)


«We don't make mistakes; we just have happy accidents. And that's when you
really experience the joy of painting.»  Bob Ross, source: Wikiquotes.org

Contact:

If not stated differently the content of this webpage is licenced under the
Creative Commons Attribution 3.0 Unported License

This website is hosted and supported by the Universität Innsbruck.