Create beautiful color schemes from any base color. Export as CSS, JSON, or Tailwind.
The color wheel — first systematized by Isaac Newton in 1666 and refined by artists and scientists over centuries — organizes hues in a circle by their wavelength relationships. In digital design, we work with the HSL (Hue, Saturation, Lightness) color model, where hue is expressed as an angle from 0 to 360 degrees on the wheel: 0 is red, 120 is green, 240 is blue. This angular representation makes it straightforward to calculate color harmonies mathematically — a complementary color is simply the hue rotated by 180 degrees, and an analogous scheme is hues spaced 30 degrees apart.
Two colors opposite each other on the wheel (hue difference of 180 degrees). Produces maximum contrast and visual tension. Use one as the dominant color and its complement sparingly as an accent — otherwise the result is jarring. Ideal for call-to-action buttons against brand backgrounds.
Three colors adjacent on the wheel (typically 30 degrees apart). Creates serene, cohesive designs with low contrast. Common in nature-inspired palettes. Best for backgrounds, gradients, and interfaces that need a calm, professional feel. Avoid using all three at equal dominance — pick one lead.
Triadic: three colors equally spaced (120 degrees apart). Vibrant and balanced, even when using pale hues. Split complementary: a base color plus the two colors adjacent to its complement (150 and 210 degrees offset). Softer tension than pure complementary — safer for text-heavy interfaces.
The 60-30-10 rule is an interior design principle that translates effectively to UI and web design. It prescribes distributing three colors across a composition in the proportions 60%, 30%, and 10%. The 60% color is the dominant, neutral background — the page background, the card surfaces, the empty space. The 30% color is the secondary, supporting hue — sidebars, headers, navigation elements, section backgrounds. The 10% color is the accent — buttons, links, icons, highlights. This is the color that draws the eye and signals interactivity. Breaking this ratio (for example, using the accent color at 30%) overwhelms the design and defeats the purpose of having an accent. The rule works because it matches how the human visual system allocates attention: large neutral zones, medium distinctive zones, and small focal points.
HEX (hexadecimal): A compact 6-character representation of RGB values. #00F0FF means red = 00 (0), green = F0 (240), blue = FF (255). HEX is the most common format for CSS and HTML because it is concise and universal. However, HEX values are opaque to human intuition — #00F0FF tells you nothing about the color's relationship to other colors. It is a storage and transport format, not a design format.
RGB (Red, Green, Blue): An additive color model where each channel ranges from 0 to 255. rgb(0, 240, 255) is identical to #00F0FF. RGB maps directly to how displays produce color (by mixing red, green, and blue subpixels), making it the natural format for screen rendering. The rgba() variant adds an alpha channel for transparency. Like HEX, RGB is poor for color manipulation because modifying a single channel produces unpredictable perceptual results — adding 30 to the blue channel does not produce a predictable shift in hue.
HSL (Hue, Saturation, Lightness): Designed to match human color perception. Hue is the color's position on the color wheel (0-360 degrees). Saturation is intensity (0% = gray, 100% = vivid). Lightness is brightness (0% = black, 50% = pure color, 100% = white). HSL is the preferred format for programmatic color generation because rotating hue by a fixed angle produces a perceptually meaningful shift — exactly what this tool does to generate harmonies. For any system that needs to derive new colors from a base (theme generators, dark mode calculations, accessibility adjustments), HSL is far superior to HEX or RGB.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for users with visual impairments, including those with low vision or color blindness. Contrast ratio is calculated from the relative luminance of the two colors and ranges from 1:1 (identical colors, e.g., white on white) to 21:1 (pure black on pure white). The more different the luminance values, the higher the ratio.
| WCAG Level | Normal Text | Large Text (≥18px bold or ≥24px) | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
AA compliance is the legal standard in many jurisdictions and a practical minimum. A common mistake is pairing a brand's accent color with white text without checking the ratio — many yellows, light greens, and cyans fail AA at normal text sizes. When generating a palette, test your lightest background against your darkest text color for at least 4.5:1. Tools like the WebAIM Contrast Checker or browser DevTools can measure this directly.
A brand palette is not the same as a decorative palette. It must be functional before it is beautiful. Start by defining your neutral colors first — the whites, off-whites, grays, and near-blacks that form the foundation of text, backgrounds, and borders. These will be used across 80% of the interface. Then select a primary brand color (your 30%) and an accent (your 10%). The brand color should have enough saturation to feel intentional but not so much that it fatigues the eye on large surfaces. Finally, generate semantic colors: a green for success states, a red or orange for errors and warnings, and a blue for informational elements. These semantic colors are not part of your brand palette — they are universal visual language that users already recognize from years of interface exposure.
When expanding a palette beyond 3-5 colors, generate shades systematically rather than by eye. Create a scale from 50 (lightest) to 950 (darkest) by manipulating lightness in HSL while slightly reducing saturation at the extremes (very light and very dark shades look unnatural at full saturation). This shade scale — popularized by Tailwind CSS and Material Design — gives you a design token for every context: background, surface, border, text primary, text secondary, hover state, and active state.
This tool exports your palette in three formats, each serving a different workflow:
--color-1: #00F0FF;
--color-2: #FF6B35;
Paste into :root in your stylesheet. Reference with var(--color-1). Works in all frameworks, no build step required, supports runtime theming.
'color-1': '#00F0FF',
'color-2': '#FF6B35',
Merge into tailwind.config.js under theme.extend.colors. Use as bg-color-1 or text-color-2. Rename keys to semantic names (e.g., brand-primary) before committing.
{ "color1": "#00F0FF",
"color2": "#FF6B35" }
Import into JavaScript/TypeScript design tokens system. Feed into Figma plugin APIs, design-to-code pipelines, or a structured tokens.json consumed by Style Dictionary.
This tool converts your chosen HEX color to HSL, rotates the hue value according to the selected harmony rule (e.g., +180 degrees for complementary), and converts each result back to HEX for display and export. All calculations run in your browser using the hexToHSL() and HSLToHex() conversion functions. No color data is sent to any server.