Skip to content
Apps

Menu

OZO Palette

Free Colour Palette Generator

Start from one brand colour and get matching palettes, a full tint and shade scale and text contrast checks. Copy the codes or export CSS, Tailwind, PNG or SVG.

  • Free forever
  • No signup
  • Made in your browser
#FE7526

Harmony

Harmony

Neighbours on the colour wheel: calm and cohesive.

Colour format

Text contrast for #FE7526

  • AaWhite text2.70:1 · Fails
  • AaBlack text7.79:1 · AAA
  • #FE2667
  • #FE2D26
  • #FE7526
  • #FEBD26
  • #F7FE26

Tints and shades

  • 50FFF2EB
  • 100FFE2D1
  • 200FFC5A4
  • 300FE9E67
  • 400FE7B2F
  • 500FE5E01
  • 600D54F01
  • 700AD4001
  • 800843101
  • 9005B2200

How to create a colour palette

  1. 1

    Start with one colour

    Enter your brand colour as a hex code, use the colour picker, or press Random for inspiration.

  2. 2

    Choose a harmony

    Analogous for calm palettes, complementary for strong contrast, triadic or split for vibrant ones, or mono for one hue.

  3. 3

    Check the contrast

    See whether white or black text is readable on your colour, with WCAG AA and AAA ratings.

  4. 4

    Export it

    Copy any colour as HEX, RGB or HSL, copy CSS variables or a Tailwind 50–900 scale, or download the palette as PNG or SVG.

A whole palette from one colour

Most small businesses start with a single colour from a logo. This generator builds everything around it: matching palettes from colour theory, a full tint and shade scale for interfaces, and contrast checks so your text stays readable. Copy the codes straight into your website, design tool or stylesheet.

Put your palette to work

  • Documents: set your brand colour on invoices, quotes and receipts so every document looks like yours.
  • QR codes: use a dark shade from the scale for a branded QR code that still scans.
  • Social images: prepare graphics at the right size with the image resizer.

Frequently asked questions

How does the palette generator choose colours?

It turns your colour into hue, saturation and lightness, then applies classic colour-wheel rules: neighbours for analogous, the opposite hue for complementary, hues 120 degrees apart for triadic, and so on. Lightness is adjusted so each palette has light and dark options.

What is a good contrast ratio for text?

WCAG asks for at least 4.5:1 for normal text (AA) and 3:1 for large text. 7:1 meets the stricter AAA level. The contrast panel shows the ratio for white and black text on your base colour.

What are tints and shades?

Tints are your colour mixed towards white; shades are mixed towards black. The 50 to 900 scale gives you light backgrounds, borders, hover states and dark text that all match, the same convention Tailwind CSS uses.

How many colours should a brand palette have?

Most brands use one primary colour, one or two accents and a set of neutrals. Pick a dominant colour for about 60 percent of the design, a secondary for 30 percent and an accent for the last 10 percent.

Related tools