How to Create a Color Palette for Your Brand, Step by Step

A brand colour palette needs five things: one primary colour people will remember, one accent, a set of neutrals for text and backgrounds, lighter and darker versions of each for buttons and states, and a contrast check so every text pair is readable. For proportions, the 60-30-10 rule of thumb is a good start: about 60% neutral, 30% supporting colour and 10% strong accent.

You can do all of it free with the site's colour palette generator, shades and tints generator and contrast checker. Below, each step is worked through for one example: a home tiffin service in Pune whose owner wants a warm orange.

What a complete palette contains

Many small businesses stop at "logo colour plus black". Trouble starts when they need a hover colour, a light background for an offer banner or a grey for small print, and each one is picked by eye on a different day. Planning the set once avoids that.

Step 1: Choose one primary colour

Start from what the business is and who buys from it. Warm oranges and reds are common for food, blues for finance and services, greens for health, farming and freshness. These are conventions, not laws, so also look at your nearest competitors: if they all use red, an orange or green helps you stand out on a crowded listing.

Check the candidate against white and black straight away in the contrast checker. Our orange, #E85D04, scores 3.50:1 with white text and 6.00:1 with black. That tells you early that white text on the pure orange works only for large text (about 24 px, or 18.5 px bold) and not for a 16 px button label. You do not need to reject the colour; step 4 fixes it with a darker shade.

Step 2: Find an accent with the palette generator

Paste the primary into the colour palette generator. It converts the colour to HSL, keeps the saturation and lightness, and turns the hue around the colour wheel to give five partners. For #E85D04:

The last column shows the tool's main limit. Every swatch has the same HSL lightness as the orange, yet they range from a yellow that almost vanishes on white to a violet nearly as dark as navy. HSL lightness is not how bright a colour looks; the guide to tints, shades and colour scales explains why. Use the generator for hue ideas, then adjust each colour's lightness.

Pick one scheme rather than mixing all of them. The complementary colour is the usual accent because it contrasts most with the primary. Here it is a blue, #048FE8, but at 3.44:1 it is too light for link text on white. Its 20% shade from the shades and tints generator, #0372BA, reaches 5.10:1 and makes a good link colour.

Step 3: Add neutrals

Neutrals do most of the work on any website: background, body text, captions, borders and dividers. Pure grey can look cold next to a warm brand colour, so we took a warm grey, #78716C, and ran it through the shades and tints generator:

The tool's palest step is an 80% tint, so the background came from a second pass: feeding #E4E3E2 back in and taking its 80% tint gives #FAF9F9. Note which grey can do which job. The divider grey is fine for decoration but too faint to mark the edge of a form field, which needs 3:1 under WCAG criterion 1.4.11; #938D89 meets that.

Step 4: Build tints and shades for interface states

Now run the primary through the shades and tints generator. It mixes the colour with white (tints) or black (shades) in 20% steps and returns nine swatches. The useful ones for #E85D04:

This step fixes the problem from step 1. The button uses the 20% shade, which still reads as the brand orange next to the logo, and its hover state uses the 40% shade so the change is visible. One trap: the 20% shade as text on the pale tint gives only 4.06:1, so text on banners uses the 40% shade.

Step 5: Apply the 60-30-10 rule of thumb

The 60-30-10 idea is borrowed from interior design: about 60% of a space in a dominant colour, 30% in a secondary colour and 10% in an accent. It is a rule of thumb, not a standard, but it stops every colour being used equally, which tends to look busy. On the tiffin website it works out roughly as:

• 60% neutral: the off-white page, white cards and warm dark-grey text.
• 30% supporting: the pale orange tint for banners and sections, and the dark grey footer.
• 10% strong colour: orange buttons, icons and price highlights, plus the blue links.

Notice that the brand orange sits in the 10%, not the 60%. If everything is orange, nothing stands out, including the "Order on WhatsApp" button. Keeping the strongest colour scarce is what makes it work as a signal.

Hand the result to whoever builds your site as named values, so nobody picks colours by eye again: --brand: #E85D04, --brand-button: #BA4A03, --brand-hover: #8B3802, --brand-soft: #FADFCD, --accent: #0372BA, --text: #181716, --text-muted: #605A56, --border: #938D89, --bg: #FAF9F9. If a developer or printer asks for RGB values, the colour converter turns each hex code into rgb() and hsl().

Dark mode

Dark mode is not the light palette turned upside down. Use a very dark grey rather than pure black for the background, light grey rather than pure white for text, and lighter versions of the brand colours for text and icons. For the tiffin palette:

• Background #181716 with text #E4E3E2 (13.97:1) and secondary text #AEAAA7 (7.76:1).
• Brand orange #E85D04 as icons or large text on #181716: 5.11:1. Links in the 20% tint #ED7D36: 6.47:1. The blue accent's 20% tint, #36A5ED: 6.62:1.
• Buttons can stay #BA4A03 with white text (5.16:1), because that pair does not depend on the page colour.

The WCAG thresholds are the same in both themes, so run every dark-mode pair through the contrast checker as well.

Test before you print or publish

• Every text pair: body text on background, button label on button, link on background, text on the tinted banner. Body text needs 4.5:1; large text, icons and field borders need 3:1. The colour contrast guide explains the rules.
• Not colour alone: a menu that marks veg and non-veg dishes, or "sold out" items, only by colour fails people with colour vision deficiency. Add a label or symbol too.
• Real screens: look at the palette on a budget phone outdoors and as a small WhatsApp profile picture, where thin details and pale tints disappear first.
• Print: screens mix light (RGB) and printers mix ink (CMYK), so very bright oranges and blues often print duller. Ask your printer for a proof before ordering boxes or banners.

Frequently asked questions

How many colours should a brand palette have?

One primary and one accent are enough for most small brands, plus four to six neutrals and the tints and shades you actually use. Add success, warning and error colours if your site has forms, orders or payments.

Should my brand colour pass contrast with white?

It does not have to. Logos are exempt from WCAG contrast rules, and a bright colour can still be used for large headings, icons and illustrations. Use a darker shade wherever the colour sits behind or under small text.

How do I find the hex code of my logo colour?

Ask your designer for the original file, which should list the exact values. Otherwise use the eyedropper in a design app on the original logo file, not on a screenshot or a forwarded WhatsApp image, because compression shifts colours slightly.

Can I use a random colour as a starting point?

Yes, for exploring. The random colour generator gives a new colour with its HEX, RGB and HSL values on each click. Treat it as a prompt, then run your favourite through steps 1 to 5.

Can I use gradients in a brand palette?

Yes, built from palette colours, such as the base orange fading to its 20% tint. Keep text off the light end unless it passes contrast there. The guide to CSS gradients has copy-paste examples.

Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, criteria 1.4.1, 1.4.3 and 1.4.11; colours and ratios from the site's palette generator, shades and tints generator and contrast checker, October 2026.