Color Schemes

Posted on Wednesday 25th of September, 2024

Let's talk about color schemes on my website!

The CSS

If you haven't noticed, I'm using Tailwind colors. Yes, that Tailwind. Why? I like having a clear palette of colors, which is the one thing that forsaken EMCAScript library does right.

If you look at my CSS (I don't minimize it!) you will see at the start:

:root {
    --dull-lavender-50: 247 244 254;
    --dull-lavender-100: 239 235 252;
    --dull-lavender-200: 227 218 250;
    --dull-lavender-300: 206 189 245;
    --dull-lavender-400: 180 151 238;
    --dull-lavender-500: 155 109 229;
    --dull-lavender-600: 140 77 218;
    --dull-lavender-700: 124 59 198;
    --dull-lavender-800: 104 49 166;
    --dull-lavender-900: 87 42 136;
    --dull-lavender-950: 54 25 92;

    --steel-gray-50: 243 243 250;
    --steel-gray-100: 233 234 246;
    --steel-gray-200: 214 214 239;
    --steel-gray-300: 189 189 228;
    --steel-gray-400: 167 162 215;
    --steel-gray-500: 148 138 202;
    --steel-gray-600: 131 114 185;
    --steel-gray-700: 113 96 162;
    --steel-gray-800: 93 80 131;
    --steel-gray-900: 77 69 106;
    --steel-gray-925: 55 49 76;
    --steel-gray-950: 34 30 46;
    --steel-gray-975: 17 15 23;
}

These aren't the color schemes that come with Tailwind, just the system that Tailwind uses for it's color schemes. And I'm not really sure where the actual code came from (probably some SaaS site that went pay-to-win) but I think it's a pretty decent way to pick colors for your website.

How to use this

In your real CSS, you don't want to be using these wordy variables. You should abstract over them. Here's a great way to do that:

:root {
    /* You need this here! View the MDN page for `light-dark()` if you're curious. */

    color-scheme: light dark;

    --bg: light-dark(
        rgb(var(--dull-lavender-200)), /* Light */
        rgb(var(--steel-gray-950))     /* Dark  */
    ); /* The syntax highlighter doesn't like this snippet. Sorry! */


    --text: light-dark(
        rgb(var(--steel-gray-900)),
        rgb(var(--dull-lavender-200))
    );
}

This lets you pick your light and dark colors together! Much better than a media query. Here's some good design tips if you're doing that: CSS Tricks 🔗

Make sure...

Make sure you use the rgb() representation, not the hex (or use hsl). And leave out the rgb()! This lets you add transparency like this:

.whatever {
    color: rgb(var(--steel-gray-50) / 50%);
}

It's a little weird to look at, but it's better than having to make --steel-gray-50-transparent.

The tool to do this for you

There's hundreds of tools out there to make configs for you (here's my favorite). It doesn't really matter which one you pick, as long as it outputs hex codes.

Here's some glue to convert between Tailwind configs to CSS (just in case you don't have some weird Emacs macro to do this for you):

Color name:

Your Tailwind Config:

Please make sure you format it like the example above. You can leave whitespace or quotes or whatever.

This button will work on the placeholder, if you wanna play around.

Hex to HSL Source:

https://www.jameslmilner.com/posts/converting-rgb-hex-hsl-colors/

Hex to RGB Source:

https://codepen.io/othmanDes/pen/VWRLrP

I hacked this together just for you, dear reader :3