Pick a Starter Hue
Refine Saturation
Palette
Accent Color Ideas
preview color palette in context:
A tale of two animals _ Published: Today
The quick brown fox jumps over the lazy dog
preview in dark theme context:
A tale of two animals _ Published: Today
The quick brown fox jumps over the lazy dog
🎨 toggle CSS variables for full palette
inspired by this idea of CSS variable composition by Maxime Heckel
🪄✨ I invite you to check out cccreate.co, a curated collection of tools for web creators + ssshape, a SVG blob-like shape generator, and pppalette, a straightforward color palette generator. You can also find me elsewhere on the web over at muted.io, where I create tools to learn music theory.
using this tool
This tool makes use HSL color values in CSS to create a palette based on a selected starter hue, a value between 0 (red) and 360 (red again) and a selected saturation level (a value between 0% and 100%). A palette of 10 color swatches is then created using varying lightness levels on the selected hue and saturation. This makes for a palette of colors that are harmonized and work well together since they all share the same hue and saturation.
The accent color ideas are generated by rotating the selected base hue by increments of 45 degrees. This makes for colors that can accent/contrast with the base color in a pleasing way. Note that the accent colors with just a 45 or 315 degree difference from the base hue might not be contrasting enough with the base hue. Accent colors with a base hue of 90, 135 or 180 degree difference from the base hue will usually work well.
You can use this tool to pick select colors from the palette, or you can copy the set of CSS variables in your CSS code for a solid foundation to work with for colors in your web project. When using the CSS variables, you can tweak the values of --base-hue, --base-sat and --primary-lightness to affect all the colors in the palette at once. You can also tweak the values of --accent-hue and --accent-lightness to affect the accent color.