Color choices are a major part of any website's design, both for personality and accessibility. Here are some good rules of thumb for picking a good set of colors.
- Think of colors in terms of Hue, Saturation, and Brightness. Hue is the literal color being used (green, red, etc). Saturation is the color's intensity, and less saturation brings the color closer to gray. Brightness is the level of white in a color - no brightness is black, and full brightness is white.
- When you need to create more contrast, modify the saturation and brightness as needed. For example, a background for white text should have high saturation and less brightness. But a background for dark should should have less saturation and more brightness.
- When selecting supporting colors for a base color, use a color wheel. A color wheel tool can give you better options based on your needs, and you don't risk picking a color that won't work well with your base. You can complimentary, analogous, or triadic colors for any base color.
- When matching colors to fonts, start by defining different adjectives and emotions. Pair everything else from there.
- When laying translucent black on other colors: the less brightness the color has, the more opaque the black must be to appear.
- Never use gray text on colored backgrounds to reduce contrast! It’s better to just make that color slightly closer to the background color. You can either pick a specific color, or use a white/black with reduced opacity.
- Don’t always give buttons a background color. Buttons low on the hierarchy can use a transparent one. Secondary buttons can just have borders, and tertiary buttons can skip the background or border altogether.
Need to find good colors? Try Dribble’s Color Search or The New Defaults.