RSRobince Studio

Color Palette Generator

Pick a base colour and get a matching colour scheme in one click. Choose complementary, analogous, triadic, tetradic, split-complementary, monochromatic or a 50 to 900 shades scale. Lock the colours you like, shuffle the rest, check text contrast, and export the palette as CSS, SCSS, JSON, a Tailwind-style config or a PNG. It runs in your browser with no account.

Runs in your browser. Your files are never uploaded.

Loading Color Palette Generator…

How to use Color Palette Generator

  1. Pick a base colour with the colour picker, or type a hex code such as #3b82f6.
  2. Choose a colour scheme, or press Generate random palette (or the Spacebar) for a new set.
  3. Click the lock on any swatch to keep it, click a swatch to copy its hex, or edit a hex code directly.
  4. Copy the code as CSS, SCSS, JSON or a Tailwind-style config, or download the palette as a PNG or JSON file.

How colour schemes work

Colours are placed on a wheel measured in degrees of hue. A scheme is a rule for picking hues from that wheel, starting at your base colour.

  • Complementary uses the opposite hue, 180 degrees away.
  • Analogous uses neighbours, within about 40 degrees, for a calm, harmonious look.
  • Triadic spaces three hues 120 degrees apart; tetradic uses four hues 90 degrees apart.
  • Split-complementary uses the two hues either side of the opposite colour, which is gentler than a pure complement.
  • Monochromatic keeps one hue and varies lightness.

Shades and tints scale

The 50 to 900 scale keeps your hue and saturation and steps the lightness from very light (50) to very dark (900). It is handy for building UI themes, where you need a pale background, a mid-tone accent and a dark text colour from the same family. The export names follow the same numbers.

Checking accessibility

Each swatch shows its contrast against white and black, with a pass or fail badge for AA and AAA. The readable text colour shown is whichever of white or black has the higher ratio. Check the pair you plan to use, since a palette colour on another palette colour can fail even when both pass on white.

Limits

Palettes are generated with simple HSL maths, so results are a starting point, not a perceptually uniform colour system. The colour-blindness preview is an approximation. The Tailwind-style snippet is a plain config you can paste in; it is not tied to any product. Everything runs in your browser and nothing is uploaded. Saved palettes are limited to 20 and live only in this browser.

Why use this color palette generator tool

  • Seven colour schemes. Complementary, analogous, triadic, tetradic, split-complementary, monochromatic and a ten-step shades and tints scale from 50 to 900.
  • Lock and shuffle. Lock the swatches you like and generate again. Locked colours stay put while the others change. Press the Spacebar for a quick shuffle.
  • Contrast and colour blindness. See the WCAG contrast ratio of every colour against white and black with AA and AAA badges, and preview the palette as colour-blind users may see it.
  • Developer-ready export. Copy CSS variables, SCSS variables, JSON or a Tailwind-style config, or download a PNG image or a JSON file. Saved palettes stay on your device.

Frequently asked questions

How do I make a colour palette from one colour?

Pick your base colour with the picker or type its hex code, then choose a scheme such as analogous or triadic. The tool turns the hue around the colour wheel and adjusts lightness to give you five matching colours. Edit any swatch afterwards.

What are complementary colours?

Complementary colours sit opposite each other on the colour wheel, 180 degrees apart, such as blue and orange. They contrast strongly, so they work well for a call-to-action next to a calmer main colour. Use them in small amounts to avoid a harsh look.

How is the contrast ratio calculated?

It follows WCAG 2.x. Each colour is converted to relative luminance, then the ratio is (lighter + 0.05) divided by (darker + 0.05). Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA.

How accurate is the colour-blindness preview?

It applies standard simulation matrices for protanopia, deuteranopia and tritanopia, so it is a useful guide, not an exact picture. People experience colour blindness differently, and screens vary. Do not rely on colour alone to carry meaning.

Are my palettes saved or uploaded?

Nothing is uploaded. All colour maths runs in your browser. Your current palette and any palettes you choose to save are stored only in this browser on this device, and clearing site data removes them.

More free tools

Typing Speed Test

Test your typing speed in 15, 30 or 60 seconds with fresh sentences. See live WPM, raw WPM, accuracy and highlighted mistakes. Free and runs in your browser.

Open tool

Flowchart Maker

Make a flowchart online for free. Drag shapes, connect them with arrows, add text and colour, then download a PNG or SVG. No sign-up, no watermark, works on phones.

Open tool

Password Generator

Generate strong random passwords with custom length and characters. Uses your browser’s cryptographic randomness; nothing is sent or stored.

Open tool