My color theme is not quit there

Tools

While working on my color variables, I rediscovered that there are tools to extract colors from pictures. Notable tools were:

• Extract palette from image - Coolors
• Color theme from image Adobe Color (rip Adobe)

In parallel, I discovered, via my flatmate, the Gallica BNF collections. It hosts 10 million *digital reproductions* of public domain works.

After a quick browse, I found this really cool Carte gastronomique de la France par A. Bourguignon... Gallica.

Source gallica.bnf.fr / Bibliothèque nationale de France

I thought the pastel colors might work well for my blog's theme, originally centered around sepia.

Process

I used the coolors tool to extract some colors from the image. I had to go manually select certain colors.

Then, I copied the HEX codes into the css-theme-generator from Tobias Berg I mentioned in my last post. I used the luminance reorder, and Voilà:

  /* color-scheme */
  --bg-primary: #271e0e;
  --bg-secondary: #141007;
  --bg-tertiary: #3a2c15;
  --bg-active: #4d3b1b;
  --text-primary: #ddcfaa;
  --text-secondary: #9d9173;
  --text-tertiary: #70654c;
  --border-primary: #796e54;
  --border-secondary: #554a35;
  --success: #5cd69d;
  --error: #f25a5a;
  --warning: #fbca51;
  --accent-primary: #d8b38f;
  --accent-secondary: #a38668;
  --accent-foreground: #1c150a;
  --accent-muted: #53432e;

Btw, I ditched the light theme. I'm owning up to my preferences for dark color palettes in websites.

More changes

I also played around with shapes and layout.

One notable mention is this awesome list Blogger's toolbox Robert Birming.

It helped me find the Modern Font Stacks website again.I had encountered it before but had forgotten to save it as a bookmark.

It's a list of :

System font stack CSS organized by typeface classification for every modern OS

I am sooo happy I found it again.

  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-sans:Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --font-mono: monospace;
  --font-display: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  

What's next

I want to add a bit more color to the website. I'm also not convinced by the browns...

I also might need to fine-tune border colors, secondary and tertiary colors, etc.