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
Create complementary, analogous, triadic or monochromatic palettes from a base color and export HEX values, CSS variables or JSON.
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.
Related tools
Color contrast checker
Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.
CSS gradient generator
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
CSS box shadow generator
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
Comments
0