1. Three-digit code

Turns out that the first value of each pair is the important one when determining colour, so you can shorten the standard six-digit hex code to just three digits.

That’s easy enough to do in your head, but the function dh_shorten() does it for you:

hex_code <- "#F2D359"
short_code <- dehex::dh_shorten(hex_code)
short_code

## [1] "#FD5"

As it happens, the short code is still recognised by interpreters, but it’s often expanded double up each value to get back to six. So #FD5 is technically #FFDD55 rather than the original #F2D359, but that doesn’t really matter for our purposes.

2. RGB graph

The values in the shortcode encode an ‘amount’ of red, green and blue. The lowest value is 0 and the highest is F, which is hexadecimal for 15. The higher the value, the more that’s ‘mixed’ into the final colour.

You can use dh_graph() to create this for you automatically. Rather than generate a plot though, we can just print a cute bar graph to the console. We’re only using it for reference, after all.

dehex::dh_graph(
  short_code,
  adorn_h = FALSE, adorn_s = FALSE, adorn_l = FALSE
)

## #FD5
## R ████████████████
## G ██████████████░░
## B ██████░░░░░░░░░░

The output is a horizontal chart showing the values of red (R), green (G) and blue (B) encoded by the hex short code. Each bar is made from 16 unicode block elements (i.e. 0 to 15), which are ‘filled’ to represent the amount of each colour.

If you’re using RStudio, this will print in colour, thanks to the {crayon} package (although you can turn it off with the argument crayon = FALSE). That looks like this using RStudio’s default light theme:

Or, using a dark theme:

Perhaps you’re wondering what the adorn_* arguments do in dh_graph(). They add extra information to the output that will help us in steps 3 to 5. I’ll switch these on as we go through those next steps.

3. Hue

For our purposes, hue is basically a name we give a colour, like ‘orange’. We’re going to compare the ‘profile’ or ‘shape’ of our RGB graph to a number of others to determine which one most closely resembles ours.

For simplicity, we stick only to the primary, secondary and tertiary colours in the RGB colour system: red, green and blue; yellow, cyan, magenta; orange, chartreuse, aquamarine, azure, violet and rose. We also include a special case: grey.⁵

The {dehex} package has a built in guide that will print RGB graphs for each of these colours. Since this is a guide for hue, you pass the argument "H". I’ve hidden the output, since there are 13 graphs.

dehex::dh_guide("H")

## red
## R ████████████████ H 3
## G █░░░░░░░░░░░░░░░ H 1.5
## B █░░░░░░░░░░░░░░░ H 1.5
## 
## green
## R █░░░░░░░░░░░░░░░ H 1.5
## G ████████████████ H 3
## B █░░░░░░░░░░░░░░░ H 1.5
## 
## blue
## R █░░░░░░░░░░░░░░░ H 1.5
## G █░░░░░░░░░░░░░░░ H 1.5
## B ████████████████ H 3
## 
## yellow
## R ████████████████ H 2.5
## G ████████████████ H 2.5
## B █░░░░░░░░░░░░░░░ H 1
## 
## cyan
## R █░░░░░░░░░░░░░░░ H 1
## G ████████████████ H 2.5
## B ████████████████ H 2.5
## 
## magenta
## R ████████████████ H 2.5
## G █░░░░░░░░░░░░░░░ H 1
## B ████████████████ H 2.5
## 
## orange
## R ████████████████ H 3
## G █████████░░░░░░░ H 2
## B █░░░░░░░░░░░░░░░ H 1
## 
## chartreuse
## R █████████░░░░░░░ H 2
## G ████████████████ H 3
## B █░░░░░░░░░░░░░░░ H 1
## 
## aquamarine
## R █░░░░░░░░░░░░░░░ H 1
## G ████████████████ H 3
## B █████████░░░░░░░ H 2
## 
## azure
## R █░░░░░░░░░░░░░░░ H 1
## G █████████░░░░░░░ H 2
## B ████████████████ H 3
## 
## violet
## R █████████░░░░░░░ H 2
## G █░░░░░░░░░░░░░░░ H 1
## B ████████████████ H 3
## 
## rose
## R ████████████████ H 3
## G █░░░░░░░░░░░░░░░ H 1
## B █████████░░░░░░░ H 2
## 
## grey
## R █████████░░░░░░░ H 2
## G █████████░░░░░░░ H 2
## B █████████░░░░░░░ H 2

You can see that I’ve added a value to the end of each bar, which represents the ranking of the RGB values. This follows the logic of the rank() function in base R: 1 is smallest, 3 is largest and ties are the average of the shared ranks. However, I’ve increased the tolerance for ties.⁶

Which of the graphs in the hue guide most closely resemble our colour?

You might be able to see by eye that it’s probably yellow, but we look at our graph again but this time with adorn_h set to TRUE (the default).

dehex::dh_graph(
  short_code,
  adorn_h = TRUE, adorn_s = FALSE, adorn_l = FALSE
)

## #FD5
## R ████████████████ H 2.5
## G ██████████████░░ H 2.5
## B ██████░░░░░░░░░░ H 1

So, we have an RGB hue ranking of 2.5-2.5-1, which indeed matches the ‘yellow’ ranks in the guide, even if the RGB values are not exactly the same.

I admit this step is quite clunky and it doesn’t help that there’s so many plots to compare against. It’s easier I think when you have a colour wheel arrangement to look at, like in DeSandro’s talk. Remember: with {dehex}’s help, you just need to look at the ranking values at the end of each bar.

4. Saturation

Now we repeat the process for saturation. This time we’re going to compare the range of RGB values. This is easier because there’s only three (‘saturated’, ‘washed’ and ‘muted’) plus grey (i.e. zero range).

This time we pass "S" for the saturation guide:

dehex::dh_guide("S")

## saturated
## R ████████████████
## G █████████░░░░░░░
## B █░░░░░░░░░░░░░░░
## S ████████████████
## 
## washed
## R █████████████░░░
## G █████████░░░░░░░
## B ████░░░░░░░░░░░░
## S ░░░██████████░░░
## 
## muted
## R ██████████░░░░░░
## G █████████░░░░░░░
## B ███████░░░░░░░░░
## S ░░░░░░████░░░░░░
## 
## grey
## R █████████░░░░░░░
## G █████████░░░░░░░
## B █████████░░░░░░░
## S ░░░░░░░░█░░░░░░░

This time there’s an additional bar for saturation, labelled ‘S’, that indicates the range of RGB values covered by each level of saturation. We can compare the saturation of our colour with the adorn_s argument set to TRUE.

dehex::dh_graph(
  short_code,
  adorn_h = FALSE, adorn_s = TRUE, adorn_l = FALSE
)

## #FD5
## R ████████████████
## G ██████████████░░
## B ██████░░░░░░░░░░
## S ░░░░░███████████

So, that’s roughly the range of the ‘washed’ category of saturation.

5. Lightness

Finally, we do the same for the lightness of the colour (‘light’, ‘middle’ and ‘dark’. You can total up the values, where higher values are lighter, but I’ve chosen to mark the mean value in {dehex} because I think it’s easier to interpret from the graph format.

Provide "L" for lightness to the dh_guide() function:

dehex::dh_guide("L")

## light
## R ████████████████
## G ███████████████░
## B ██████████████░░
## L ░░░░░░░░░░░░░░█░
## 
## middle
## R ██████████░░░░░░
## G █████████░░░░░░░
## B ████████░░░░░░░░
## L ░░░░░░░░█░░░░░░░
## 
## dark
## R ████░░░░░░░░░░░░
## G ███░░░░░░░░░░░░░
## B ██░░░░░░░░░░░░░░
## L ░░█░░░░░░░░░░░░░

And again, here’s the chart for our colour showing a column for lightness:

dehex::dh_graph(
  short_code,
  adorn_h = FALSE, adorn_s = FALSE, adorn_l = TRUE
)

## #FD5
## R ████████████████
## G ██████████████░░
## B ██████░░░░░░░░░░
## L ░░░░░░░░░░░█░░░░

Yep, slightly on the higher end, so it’s a lighter colour.

Solution

If you followed these steps, you’ll have seen that #F2D359 is roughly ‘light washed yellow’.

So, {dehex} can therefore be used as a ‘training device’ to guide you through this process.

The idea is that you remember the hue shapes (relatively hard because there’s lots), the saturation ranges (i.e. wider range means more saturated) and lightness averages (i.e. higher is lighter) from the guides and compare your colour to those.

You can check your answer (or cheat, of course) by using dh_solve(). I showed this earlier in the post, but it also has the option to see all the matching charts for hue, saturation and lightness:

dehex::dh_solve(hex_code, graphs = TRUE)

## input code: #FD5
## R ████████████████ H 2.5
## G ██████████████░░ H 2.5
## B ██████░░░░░░░░░░ H 1
## S ░░░░░███████████
## L ░░░░░░░░░░░█░░░░
## 
## hue: yellow
## R ████████████████ H 2.5
## G ████████████████ H 2.5
## B █░░░░░░░░░░░░░░░ H 1
## 
## saturation: washed
## R █████████████░░░
## G █████████░░░░░░░
## B ████░░░░░░░░░░░░
## S ░░░██████████░░░
## 
## lightness: light
## R ████████████████
## G ███████████████░
## B ██████████████░░
## L ░░░░░░░░░░░░░░█░

## [1] "light washed yellow"

Here you can see the selected guides that best matched the input.