Split Complementary Generator

A split-complementary colour scheme is a three-colour harmony that uses one base colour plus the two colours adjacent to its complement on the colour wheel. Instead of using the direct opposite (180°), split-complementary uses the colours at 150° and 210° from the base - that is, 30° either side of the complement. This creates a balanced, high-contrast palette that is more nuanced and versatile than a pure complementary pair, while still providing strong visual contrast. Our split complementary generator computes this relationship instantly for any colour you enter.

1. Enter a base colour: Type any HEX value (e.g. #FF6B6B) or use the native colour picker to visually select a colour. You can also click any sample colour to instantly populate the input. All processing runs locally in your browser - your data never leaves your device.
2. Split complements are computed: The split complementary generator converts your colour to HSL, then calculates the hues at 150° and 210° from your base hue. Saturation and lightness are preserved from the base colour, so you get harmonious colours that match the intensity of your input. The exact wheel positions are shown on the colour wheel visualisation.
3. Review, compare, and copy: View the 3-colour palette as full-height swatches, a compact palette bar, and detailed breakdown cards showing HEX, RGB, and HSL values for each colour. Use one-click copy to grab individual values or copy all colours at once for your CSS custom properties or design documentation.

• Complementary (2 colours): Uses the base and its exact opposite (180° apart). Creates maximum contrast but can be visually intense. Best for simple, high-impact pairings like call-to-action buttons and hero sections.
• Split-Complementary (3 colours): Uses the base plus the two neighbours of its complement (150° and 210°). Provides almost the same contrast level as complementary but with more visual interest and flexibility. The split complementary generator is ideal when you need three distinct colours that work harmoniously together - for example, a primary, secondary, and accent colour for UI design.
• Design tip: Use the base colour as your primary brand colour, Split 1 as a secondary accent, and Split 2 as a highlight or interactive state. This creates a natural hierarchy that feels intentional and balanced.

Split-complementary schemes are a favourite among UI designers because they offer the best of both worlds: the strong contrast of complementary colours with the flexibility of a three-colour palette. Unlike a pure complementary pair, which can feel jarring when used at full saturation, split-complementary colours soften the tension while retaining visual interest.

In practice, split-complementary schemes create a natural visual hierarchy. The base colour anchors the design, Split 1 provides secondary emphasis, and Split 2 draws attention to interactive elements. This makes them particularly effective for dashboard designs, data visualisation, SaaS products, and any interface that needs to guide the user's eye through a clear colour hierarchy. Use our split complementary generator to experiment with different base colours and find the perfect scheme for your project.