HEXgenerator.online

HEX color palette generator

HEXgenerator.online creates harmonious color palettes in one click and exports them as CSS variables, SCSS, Tailwind or JSON. Press the space bar to generate, lock the colors you like and check WCAG contrast before you use the palette on your site.

Updated

Click a HEX to copy it · lock to keep it

How to use it

  1. Pick a harmony (analogous, complementary, triadic, monochrome…) and how many colors you want.
  2. Press Space or “Generate palette” until you find a combination. Lock the colors you want to keep.
  3. Open “Export CSS” and copy the code in the format your project uses.

Frequently asked questions

What is a HEX color code?

A HEX code writes a color in hexadecimal as #RRGGBB: two digits for red, two for green and two for blue, each from 00 to FF. It covers 16,777,216 colors and is the most common color format in CSS and web design.

How do I use the palette in CSS?

Copy the :root block with the --color-1, --color-2… variables and use them with var(--color-1) in any property, such as color or background. Then you can change the whole palette in one place.

Which color harmony should I choose?

Analogous uses neighboring hues and feels calm. Complementary pairs opposite hues for maximum contrast. Triadic spaces three hues 120° apart for a lively balance. Monochrome varies the lightness of one hue and is the most restrained.