Color palette

Disclaimer

This article was originally written in French. The AI may have screwed up some bits. If you understand French, please change the website language for a better experience.

Objective

Originally, I wanted to create a site, emybo.com (probably a broken link), which was intended to end my boredom. After barely writing 3-4 articles, I had a revelation, partly due to a serious car accident, and partly thanks to the good advice of this man:

I was, and still am, interested in data analysis. I don’t rule out asking myself some incongruous questions, seeing them through to the end, and posting the results here. But it’s no longer a priority.

To create beautiful graphs (who doesn’t love beautiful graphs?), I was looking for a few qualities:

Note

I’m missing a plotting and interactivity tool. I started using Apache Echarts with Hugo. I’ll find something that pairs well with Zola and Duckquill before possibly proposing a pull request to Daudix, the theme’s author. Ideally, something interactive and animated to encourage visitors to explore and better understand the results I’ll publish.

Now, all that’s left is to get to work!

Process

Here’s my trigger. Isn’t it magnificent?

Photo of Apollo by Stanisław Wyspiański, with its beautiful yellows, greens, and blues
Apollo by Stanisław Wyspiański, Stained Glass Museum, Krakow
  1. I used this photo and Canva to generate a color palette.
  2. With Coolors, I checked if the set was coherent and accessible to colorblind people. Now that I think about it, I should have it validated by someone who knows this subject better than I do.
  3. To extract intermediate values for the graphs, I used Learn UI tool.
  4. I made a small shortcode to easily have the palette at hand.
  5. Once I’ve decided on my visualization tool, I’ll integrate it with other shortcodes 😊.

Final Result

This sample seems to have gradients, but they are just optical illusions! Here’s what you see:

  1. The 5 colors of the palette, mainly for nominal data (categories).
  2. A neutral diverging scale, mainly for ordinal data (where I don’t want to assume that one side is better than the other).
  3. A monochromatic scale, mainly for ordinal data (where I can hypothesize about the direction from 0).
  4. A diverging scale, mainly for ordinal data (centered around a value serving as a reference point).
  5. There is no scale for cardinal data, but I can extrapolate one using just two points from my existing scales.

Eerie-black (#192324)

Pear (#C4E035)

Verdigris (#58ADA6)

Lapis Lazuli (#3266A1)

Sea Green (#408C56)

#C4E035

#75D95B

#00CD82

#00BCA3

#00A9B9

#0094C1

#007DB8

#3366A1

#C4E035

#67D762

#00C88E

#00B3B0

#009BC0

#0081BA

#3366A1

#C4E035

#50D56B

#00C09D

#00A5BC

#0087BD

#3366A1

#C4E035

#1DD079

#00B3B0

#008FC0

#3366A1

#C4E035

#00C88E

#009BC0

#3366A1

#C4E035

#00B3B0

#3366A1

#3266A1

#3679B0

#3F8DBD

#4DA0C9

#5EB3D4

#73C6DF

#8AD9E9

#A2ECF4

#BCFFFF

#3266A1

#377CB2

#4292C0

#54A8CE

#6ABEDA

#83D4E6

#9FEAF2

#BCFFFF

#3266A1

#3880B4

#4799C5

#5EB3D4

#7ACDE2

#9AE6F0

#BCFFFF

#3266A1

#3A85B8

#50A4CB

#6FC2DC

#94E1ED

#BCFFFF

#3266A1

#3F8DBD

#5EB3D4

#8AD9E9

#BCFFFF

#3266A1

#4799C5

#7ACDE2

#BCFFFF

#3266A1

#5EB3D4

#BCFFFF

#C4E035

#CFE45D

#D9E77E

#E2EB9D

#EAEFBB

#F1F3D9

#F6F6F6

#D8DDE8

#B9C3DA

#9AABCB

#7B93BD

#5A7CAF

#3366A1

#C4E035

#D1E464

#DDE98A

#E7EDAF

#EFF2D3

#F6F6F6

#D1D8E5

#ADBAD4

#889DC3

#6181B2

#3366A1

#C4E035

#D4E66E

#E2EB9D

#EEF1CA

#F6F6F6

#C8D0E1

#9AABCB

#6B88B6

#3366A1

#C4E035

#D9E77E

#EAEFBB

#F6F6F6

#B9C3DA

#7B93BD

#3366A1

#C4E035

#E2EB9D

#F6F6F6

#9AABCB

#3366A1

#C4E035

#F6F6F6

#3366A1

Go to Top