Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
Color palette generator
Create complementary, analogous, triadic or monochromatic palettes from a base color and export HEX values, CSS variables or JSON.
Click a swatch to copy its HEX value. Text uses whichever of black or white has the higher WCAG contrast. Palette colors are opaque.
About this tool
Explore a set of interface colors from one base color, then transfer the chosen palette into your stylesheet.
How to use
Enter a HEX, RGB or HSL color, or use the picker. Choose a harmony, click any swatch to copy its HEX value, and export the palette as CSS variables or a JSON array.
Harmonies use hue offsets in HSL; monochromatic mode changes lightness. Output is opaque. Swatch text uses black or white according to the higher WCAG contrast ratio shown on the card. A palette does not guarantee accessible combinations between all its colors; check actual foreground and background pairs with the contrast tool.
Common questions
Does a palette guarantee accessible contrast?
No. Each swatch reports contrast against its selected black or white text. Check the actual foreground and background pairs used in your design separately.
Why do different harmony modes produce the same gray colors?
A gray base has no saturation, so rotating its hue cannot create visible color differences. Choose a more saturated base for complementary, analogous or triadic colors. Monochromatic mode varies lightness and can still produce useful gray shades. Exported palette colors are opaque.
Related tools
Opens in a new tab
Comments
0