Color Schemes
Posted on 2024-09-25
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:
}
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:
}
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 thergb()
! This lets you add transparency like this:
}
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):
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