Color Palette Generator

Generate harmonious color palettes with Material Design, accessibility checker, and undo/redo. Create monochrome, analogous, complementary, triadic palettes. Export to CSS, SCSS, JSON, Tailwind.

Color Palette Generator

10 shades from 50 to 900

10 shades
From lightest (50) to darkest (900)

Color Palette

50
#F2F8FD
100
#E1F0FA
200
#C2E0F4
300
#9BCCED
400
#6CB4E5
500
#409EDD
600
#2385C7
700
#1C689C
800
#144B71
900
#0D314A

♿ Accessibility Check

What is a Color Palette Generator?

A color palette generator is a tool that creates harmonious sets of colors based on color theory principles. Building a coherent color palette is one of the most important, and most challenging, aspects of visual design. Whether you are creating a brand identity, designing a web application, or building a component library, a well-chosen palette ensures visual harmony and accessibility.

CodeHelper's Color Palette Generator offers six harmony schemes, a full Material Design palette generator, WCAG accessibility checking, and export to CSS, SCSS, JSON, and Tailwind Config.

Color Harmony Schemes

  • Monochromatic: A Tailwind-style scale of 10 shades derived from a single base color.
  • Material Design: The full 500-level primary + accent palette used in Google's Material Design system.
  • Analogous: Colors adjacent on the color wheel: creates calm, cohesive palettes.
  • Complementary: Opposite colors on the wheel: high contrast and visually dynamic.
  • Triadic: Three equally spaced hues: vibrant and balanced.
  • Split-Complementary: A base color plus two colors adjacent to its complement: contrast with less tension.

How to generate a color palette

  1. Pick a base color with the HEX color picker.
  2. Choose a color harmony scheme.
  3. Lock colors you want to keep and shuffle the rest.
  4. Check WCAG contrast ratios with the accessibility checker.
  5. Export to CSS variables, SCSS, JSON, or Tailwind config.

Whether you are designing a SaaS product, a brand identity system, or a component library, this free color palette generator helps you create beautiful, accessible color systems with ease.

Need a different starting point? The colors directory compares external palette tools such as Coolors and Color Brewer 2, with what each one is actually good at.

Frequently Asked Questions

Which color scheme should I choose?

Monochrome and Material give you a tint and shade scale of one hue for buttons, backgrounds and text states. Analogous palettes feel calm because the hues sit next to each other. Complementary and split complementary give the strongest contrast for calls to action. Triadic gives three balanced hues for illustrations and charts.

What does locking a color do?

A locked swatch survives Shuffle and keeps its value while the other colors are regenerated. Lock the ones you like, shuffle until the rest fits, then export. Unlock all clears the locks.

How is the accessibility check calculated?

For scales it computes the WCAG 2.1 contrast ratio of black and white text on every shade and shows the better one, so you can see which steps can carry readable text. For harmony palettes it compares every pair of colors. 4.5:1 passes AA for normal text, 7:1 passes AAA.

How do I use the exported palette in Tailwind?

Copy the Tailwind export and paste the colors object into theme.extend.colors in tailwind.config.js. Scale palettes keep the 50 to 900 keys, so bg-palette-500 or text-palette-900 work like the built in colors. Harmony palettes export as color-1, color-2 and so on with the role in a comment.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project