The Problem
If you’re like me you get random ideas for ways to structure html or new ways to build something with css. In the process I always want to quickly add some colors whether to test some design element or just highlight an element using it’s background or border. This is quick prototyping so I don’t want to take the time and go find a pretty color’s hex code or create any sort of color scheme. I also prefer to stick to named colors so while I’m moving the css around I can easily spot which color is the one I am looking for (as opposed to trying to parse hex codes in my head, blegh).
This leaves me with two options for color in my prototypes/snippets.
- Memorize hex codes that are easy to identify (
#FF0000for red,#00FF00for green,#343434for a nice gray, etc.) - Memorize css color names
The second option is the more pleasant one for code readability and typing. I generally choose this option but I was frustrated relying on colors like red, green, blue and so on. The actual values for these base “pure” colors in css are ugly and do not blend well together leading to prototypes that look harsh or hurt my eyes.
The solution!
The answer may seem obvious to some of you and it is. I just had to find a set of color names that I could memorize that already go together then I don’t have to worry about harsh designs or memorizing hex codes! I opted to go with a pastel set that covers the rainbow so there’s enough variety I can use in designs and they’re soft on the eyes.
The colors I chose are:
pinkpeachpufflightyellowpalegreenlightcyanpowderbluethistle
