Pick a base color, tweak it until just right, explore harmonies, and copy the CSS values for use in your projects.
Please share your feedback — let me know if this tool is useful for you, or if you find any bugs. I'd like to add additional functionality in the future. What features would you like to see?
Explore color combinations by toggling one of the six harmonies via these symbols. Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Two sets of complementary colors, separated by 60 degrees of hue.