Ophelia Colours and Fonts

Fonts and text colours

The fonts used to create the Ophelia plots are:

Nunito Sans for most text
Crimson Pro for titles and headings

I recommend using these fonts in presentations also. Note that Crimson Pro renders smaller than Nunito Sans. Please ensure you adjust text sizes accordingly.

The text colours used with the plots are:

#10090E (r = 16, g = 9, b = 14) for the titles
#2B2529 (r = 43, g = 37, b = 41) for all other text

I recommend using the Dark text colour (#10090E, r = 16, g = 9, b = 14) as the default text colour for presentations and documents.

Background colour

The (optional) background colour in the plots is #FEFCF7 (r = 254, g = 252, b = 247). This colour could work nicely as a background colour for presentations.

Dataviz colours

The full set of anchor colours used as anchors in the Ophelia dataviz design system is this:

dark_text: #10090E (r = 16, g = 9, b = 14)
light_text: #2B2529 (r = 43, g = 37, b = 41)
background: #FEFCF7 (r = 254, g = 252, b = 247)
deep_purple: #2B1725 (r = 43, g = 23, b = 37)
dark_red: #56242b (r = 86, g = 36, b = 43)
purple: #4f3c78 (r = 79, g = 60, b = 120)
gold: #d3970a (r = 211, g = 151, b = 10)
pink: #e0b5ba (r = 224, g = 181, b = 186)
light_blue: #7691b1 (r = 118, g = 145, b = 177)
dark_green: #375248 (r = 55, g = 82, b = 72)
na_value: #6A686F (r = 106, g = 104, b = 111)
grid_lines: #F1F1F2 (r = 241, g = 241, b = 242)
background: #FEFCF7 (r = 254, g = 252, b = 247)
bright_gold: #f6b535 (r = 246, g = 181, b = 53)
pale_green: #afb9b5 (r = 175, g = 185, b = 181)
pale_purple: #BAABB6 (r = 186, g = 171, b = 182)
pale_pink: #F2E1E3 (r = 242, g = 225, b = 227)

We can stretch the dataviz palette to 32 colours, as follows. When using fewer colours, try to pick ones which are evenly spaced throughout this spectrum.

#2b1725 (r = 43, g = 23, b = 37)
#331a26 (r = 51, g = 26, b = 38)
#3c1c27 (r = 60, g = 28, b = 39)
#441f28 (r = 68, g = 31, b = 40)
#4c212a (r = 76, g = 33, b = 42)
#55242b (r = 85, g = 36, b = 43)
#552837 (r = 85, g = 40, b = 55)
#542d46 (r = 84, g = 45, b = 70)
#523155 (r = 82, g = 49, b = 85)
#513664 (r = 81, g = 54, b = 100)
#4f3a73 (r = 79, g = 58, b = 115)
#60486a (r = 96, g = 72, b = 106)
#7a5955 (r = 122, g = 89, b = 85)
#936b3f (r = 147, g = 107, b = 63)
#ad7d2a (r = 173, g = 125, b = 42)
#c68e15 (r = 198, g = 142, b = 21)
#d49a1b (r = 212, g = 154, b = 27)
#d7a03d (r = 215, g = 160, b = 61)
#d9a65f (r = 217, g = 166, b = 95)
#dcab81 (r = 220, g = 171, b = 129)
#deb1a3 (r = 222, g = 177, b = 163)
#d9b3b9 (r = 217, g = 179, b = 185)
#c5acb8 (r = 197, g = 172, b = 184)
#b0a5b6 (r = 176, g = 165, b = 182)
#9c9eb4 (r = 156, g = 158, b = 180)
#8797b2 (r = 135, g = 151, b = 178)
#748fae (r = 116, g = 143, b = 174)
#688399 (r = 104, g = 131, b = 153)
#5c7785 (r = 92, g = 119, b = 133)
#4f6a71 (r = 79, g = 106, b = 113)
#435e5c (r = 67, g = 94, b = 92)
#375248 (r = 55, g = 82, b = 72)

The colour palettes used by the scale_colour/fill_ophelia functions are based on the following anchor colours. When using the R package and creating a visualisation with more colours than the number provided, the scale_colour/fill_ophelia functions interpolate between the colours. We have done that above to get to the set of 32 colours. If you wish to create additional palettes from the anchors below, I recommend using the chroma.js palette helper to do so. The link provided contains the colours used as anchors to get to the set of 32. You can swap the colours to those used as anchors in each of these palettes:

default

#2B1725 (r = 43, g = 23, b = 37)
#56242b (r = 86, g = 36, b = 43)
#4f3c78 (r = 79, g = 60, b = 120)
#d3970a (r = 211, g = 151, b = 10)
#e0b5ba (r = 224, g = 181, b = 186)
#7691b1 (r = 118, g = 145, b = 177)
#375248 (r = 55, g = 82, b = 72)

cool_colours

#375248 (r = 55, g = 82, b = 72)
#7691b1 (r = 118, g = 145, b = 177)
#afb9b5 (r = 175, g = 185, b = 181)

warm_colours

#2B1725 (r = 43, g = 23, b = 37)
#e0b5ba (r = 224, g = 181, b = 186)
#d3970a (r = 211, g = 151, b = 10)

neg_to_pos

#2B1725 (r = 43, g = 23, b = 37)
#F2E1E3 (r = 242, g = 225, b = 227)
#f6b535 (r = 246, g = 181, b = 53)

greens

#375248 (r = 55, g = 82, b = 72)
#afb9b5 (r = 175, g = 185, b = 181)

purples

#2B1725 (r = 43, g = 23, b = 37)
#BAABB6 (r = 186, g = 171, b = 182)

If you get stuck…

That happens, don’t worry! Feel free to give me a shout at help@cararthompson.com.

All the information you need to align plots created with other tools, presentations, and other documents with the Ophelia aesthetic