Painting the walls
From there
Since I used a theme for Hugo, it quickly came to my realisation that it was not personnalized. Here’s the bland old theme :
What I can do is choose my own colors. They’d need to be
AestheticNice to look at- Clear when charting data (pie, lines, maps)
- Colorblind friendly
The only problem is that I don’t know shit about fuck in terms of colors. So, I’ll do what anyone else would be doing in that case : generate color palettes from a picture of a nice stained glass I saw in Krakow a year ago ✨
To here
Apollo
Last November, I visited Krakow. We, with some friends, used some time to go to the stained glass museum between two pierogi orgies. The main piece there is “Apollo”. It’s hard to believe it’s 120 years old, when the design feels so fresh. I’d argue that that would be pretty here.
Process
- I took this apollo picture to canva to generate a color palette.
- I used coolors to check if it makes sense when applied, and if people with color blindness will have trouble or not.
- I put this color palette trough the Learn UI tool to generate intermediate values for the plots.
- I encoded enverything into a nice Hugo shortcode for future reference.
- I added everything to snippets for Echarts, that’ll be usefull later.
I know it has some slight differences with Apollo. It lacks its red and purples, but it feels really nice to me like this.
Color scheme
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