Press Space to generate · click a code to copy
ColorCrafting at a glance
- Free: no sign-up, no limits.
- Private: runs 100% in your browser, nothing is uploaded.
- Fast: a new 5-color palette with one Spacebar press.
- Flexible: lock colors and pick Monochromatic, Analogous, Complementary or Triadic harmonies.
- Developer-ready: copy HEX, RGB and HSL, or export CSS variables.
- Shareable: export a PNG or copy a link to your palette.
How to generate a matching color scheme
ColorCrafting is a free color scheme generator that builds five harmonious colors in a single click. Pick a harmony rule, press the Spacebar until a palette feels right, lock the colors you love and keep exploring around them.
- Choose a harmony: Random, Monochromatic, Analogous, Complementary or Triadic.
- Press Space or click Generate New Palette.
- Lock favorite columns with the lock icon.
- Copy HEX, RGB or HSL values and export as PNG, CSS variables or a link.
Color harmonies explained
Monochromatic
One hue in different lightness and saturation levels. Clean and safe.
Analogous
Neighbouring hues on the color wheel for calm, natural designs.
Complementary
Opposite hues for strong contrast. A great complementary colors tool for call-to-action accents.
Triadic
Three evenly spaced hues for vibrant, balanced palettes.
Frequently asked questions
How to generate a matching color scheme?
Press the Spacebar or click Generate New Palette. Choose a harmony such as Analogous, Complementary or Triadic to get colors that match by design.
How do I lock a color in the palette?
Click the lock icon on any column. Locked colors stay fixed while the other columns are regenerated around them.
Can I export colors as CSS variables?
Yes. Click CSS Variables for a ready-to-paste :root block. You can also export a PNG image or copy a shareable URL.
How do I convert hex to RGB or HSL?
Each column has RGB and HSL buttons. Click one to copy that format, or click the HEX code to copy the hex value.
What is a CSS color generator and how do I use it here?
Click CSS Variables to turn your current palette into a :root block with --color-1 to --color-5 that you can paste into any stylesheet.
Is ColorCrafting free and private?
Yes. It is 100% free and runs entirely in your browser. Palettes are never uploaded anywhere.