Create harmonious colour palettes from a single base colour using colour theory. Analogous, complementary, triadic, and more. Click any swatch to copy its hex code.
Pick a base colour using the colour picker or type a hex code. Then choose a harmony mode — the generator will calculate complementary colours based on colour theory. Click any swatch in the palette to copy its hex code. Use the code output panel to grab CSS variables, Tailwind config, or SCSS variables for your project.
Analogous colours sit next to each other on the colour wheel. They create smooth, harmonious combinations that feel natural and cohesive. These palettes work well for backgrounds, branding, and designs that need a calm, unified feel.
Complementary colours sit directly opposite each other on the colour wheel. They create maximum contrast and visual energy. Use one colour as the dominant and the other as an accent for call-to-action buttons, highlights, and elements that need to stand out.
Triadic schemes use three colours equally spaced around the colour wheel (120° apart). They offer strong contrast while maintaining balance. Triadic palettes feel vibrant and dynamic without the visual tension of complementary schemes.
Instead of using the direct complement, this scheme uses the two colours adjacent to the complement. It provides similar contrast to complementary but with less tension, making it easier to work with while still feeling lively.
Monochromatic palettes use variations of a single hue — different lightness and saturation levels of the same colour. These are the easiest to work with and always look cohesive. They're excellent for minimal designs and data visualisations.
Start with a colour that reflects the mood you want — warm tones (red, orange, yellow) feel energetic and inviting, while cool tones (blue, green, purple) feel calm and professional. Use the 60-30-10 rule: 60% of your design in the primary colour, 30% secondary, and 10% accent. Always check contrast ratios for accessibility — text should have at least 4.5:1 contrast against its background for WCAG AA compliance.