Picking colors
Creating a color scheme can be a pain in the ass. A lot of 'color scheme' websites, such as Adobe color and coolors give you 5 colors. My general advice is always to start with only three colors:
- A pop or primary color
- A neutral dark (not black)
- A neutral light (this can be white)
This is by far the easiest way to start with a color scheme which will always look nice. As far as the dark one, try to avoid pure black, but instead go with a really dark color, like I did with my text on this site.
Choosing my colors
In this case though, early on I thought it'd be nice to have a different color scheme for each section of the site, so I needed to find 5 colors that worked well together, but that were disinct. I started by using coolors to get me in the right direction, and then I created a mood board in Illustrator where I tweaked those colors until I found something I liked.
You'll notice I was still focused on my newsletter at the time. I still hadn't decided I'd make this a blog!
Dealing with a lot of colors can be hard
Remember my advice above that 3 colors is a good place to start? The more colors you have, the harder it is to work with. It can work really well, but often doesn't. I needed each color to have a similar saturation and intensity. I deviated a little, as clearly the 'brand' color is more intense than the 'newsletter' one, but I needed colors that looked like they belonged together.
The easy part is the neutral colors. I needed some that would be very neutral, because I needed them to work with all of my other colors. The light neutral color is a bit blueish, and I don't really use it anywhere. I still have this color in my Sass file, but I haven't used it yet. It doesn't really work the way I wanted it to, so at one point it'll probably get switched out with a lighter, and more neutral gray.
The variations of my colors
As you can see, I have light and dark versions of all my colors, plus a few gradients.
It's always useful having light and dark versions of your main colors to use, whether it's for hover states or something else. The gradients look nice, and I had a few ideas for them, but I haven't used any yet. I like how they look though, I find they work well, so I might pull them out sometime in the future still!
I eneded up doing something a little different for the light and dark versions of the colors than the ones you see above (plus apart from the blue one, I think the dark are just too dark). I don't have much need for the variations yet, but I like having them handy.
For all of that though, I built out a Sass map to easily access my colors when coding things. More details on that will have to wait until the next post though.
Overall, I'm happy with how the color scheme of the website turned out and how each section is unique to the other. And if you're wondering about the Community colors, they'll be showing up, I just haven't had the time to flesh that part of the site out yet!