Skip to content
AdawatAdawat
العربية
Adawat

How to Choose Colors for Your Website or Project

4 min read

To choose website colors, start from one main color that fits your subject, build a small palette around it with the color palette generator, check that your text is readable with a contrast checker, and write the final colors down as CSS variables. Most good palettes use one main color, one or two neutrals and a single accent.

This guide walks through that process in order, with the numbers that matter for readability, so you can choose colors with reasons rather than by guessing.

Steps

It helps to know who the site is for and what feeling it should give. Write two or three words, such as “calm, trustworthy, modern”.

  1. 1

    Pick the main color

    Choose one color that matches your subject and audience. If you have a logo, use its strongest color. If you work from a photo, extract its colors and pick the one that stands out.

  2. 2

    Generate a palette around it

    Open the palette generator, lock your main color and try the harmony modes: analogous for calm, complementary for contrast, monochrome for a clean look. Press Space until the palette feels balanced.

  3. 3

    Assign roles

    Decide which color is the background, which is the text, which is the main brand color and which is the accent for buttons and links. Keep the accent for the few things you want noticed.

  4. 4

    Check the contrast

    Use the color converter and contrast checker on each text and background pair. Aim for at least 4.5:1 for normal text and 3:1 for large text. Use “Suggest a passing color” to nudge a color just enough.

  5. 5

    Test on a real page

    Put the colors on a real page or a mock-up and look at it on your phone and your computer, in a bright room and a dim one. Colors look different on different screens.

  6. 6

    Save them as variables

    Export the palette as CSS variables or a Tailwind config and use the names in your stylesheet, so you can change a color in one place later.

The 60-30-10 rule of thumb

A simple balance that works for many designs is about 60% a neutral background, 30% a secondary color and 10% an accent. It is a guideline, not a law, but it protects you from the most common mistake: using too many strong colors at once. The accent works because it is rare.

Why lightness matters more than hue

People notice differences in lightness before differences in hue, which is why a palette built from evenly spaced lightness steps looks organised. The palette generator works in OKLCH, a color space designed so that equal changes in lightness look equal, which keeps palettes balanced. A light neutral, a dark neutral and a mid-tone brand color give you the structure of almost any interface.

Accessibility and meaning

Contrast is not decoration: low-contrast text is hard to read for many people and in bright light. Do not use color as the only way to show something, such as red for an error with no icon or text. Colors also carry different associations in different cultures and industries, so test your choices with the people you are designing for.

Common problems

  • The palette looks muddy or flat

    The colors may be too close in lightness. Make one clearly lighter and one clearly darker, and keep the accent more saturated than the rest.

  • Text on the brand color is hard to read

    Check the pair with the contrast checker. Often the fix is to darken the background a little, or to use black or white text, which the palette tool suggests for every swatch.

  • There are too many colors

    Reduce to one brand color, two neutrals and one accent. Use tints and shades of the same hue instead of new colors.

  • The colors look different on another device

    Screens differ in brightness and calibration. Choose colors with enough contrast that small differences do not matter, and test on at least two devices.

Color Converter

Frequently asked questions

How many colors should a website have?

Usually one brand color, one or two neutrals for backgrounds and text, and one accent, plus tints and shades of those. More than that tends to look busy.

What contrast ratio do I need for text?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1.

Can I get colors from a photo?

Yes. Upload the photo in the image color picker to see its dominant colors, then open them in the palette generator.

Related guides