Let me design your Color Palette for you! 🎨

Automatically generate complete palettes from two base colors, creating harmonious variations in terms of lightness and saturation.

How to use it?

  • Choose two base colors via color pickers or by filling in the field (keyword, hex, rgb, hsl accepted)
  • Give each color a semantic name (e.g., "raspberry", "ocean")
  • Click on "Generate palettes"
  • The tool automatically generates: variations of your two colors, a complementary tonic color to the main color, a grayscale, and the corresponding CSS variables, ready to use.

Why OKLCH?

The OKLCH color space offers many advantages over other color spaces in CSS.

  1. Extended gamut: OKLCH can represent all displayable colors on modern screens with a wide color range, which is not the case with sRGB (RGB, HSL) which is more limited.
  2. Uniform perception: OKLCH is based on how the human eye actually perceives colors.
  3. Intuitive manipulation: unlike RGB or hexadecimal notation, parameters for hue, lightness, and contrasts are intuitive.
  4. Better hue preservation during transitions or gradients.
  5. Precise contrast control: The lightness component (L) directly corresponds to perceived brightness, making it easier to create accessible contrasts.

Check out the browser support for OKLCH, and read the article "OKLCH in CSS: why we moved from RGB and HSL"