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 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.

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