Free Color Scheme Generator & Palette Maker

Hexy Hues is a free color scheme generator that creates palettes based on color theory, lets you preview them on real website layouts, and exports in every format developers need. Hit spacebar to generate unlimited combinations instantly.

Quick Start

Press spacebar or click Generate to create a new color palette. Click any hex code to copy it in HEX, RGB, HSL, or OKLCH format. Lock colors you want to keep and regenerate everything else around them. Use the pencil icon to manually set any color to an exact hex value.

The Two-Color System

Hexy Hues uses a practical two-color methodology built around a Main color and an Accent color. The Main color drives your headers, hero sections, and structural elements. The Accent color handles CTAs, badges, links, and interactive highlights. Between them, Hexy Hues automatically derives two tints — lighter, lower-saturation variations of your Main color used for sidebars, card backgrounds, section zones, and table headers. This gives you a complete, production-ready color system from just two anchor colors, following the 60/30/10 principle used by professional designers.

Customizing Your Tints

Click the Tints swatch in the preview toolbar to open the tint controls. Tint 1 (Structural) is used for sidebars and section zones. Tint 2 (Decorative) is used for card image areas and table headers. Drag the sliders to adjust how light each tint is, or toggle off the two-tint system to use a single tint value across all tinted elements. You can also toggle which palette colors fill the Main and Accent roles using the mapping swatches.

Live Website Preview

Test your color palette on three real layouts — a Marketing Site (hero, feature cards, pricing, testimonials, blog, footer), a SaaS / App (sidebar nav, metrics dashboard, data table), and a Shop (product grid, filters, cart). Double-click any element to override its color individually or across all matching elements at once.

Export & Share

Export your color palette as CSS custom properties, Tailwind config, SCSS variables, JSON design tokens, or plain text. Use Share URL to send your exact palette to anyone, or open the preview in a new tab to download a standalone HTML file.

Analogous

Colors adjacent on the color wheel (30° spread). Analogous color schemes feel naturally harmonious and are ideal for cohesive brand palettes and calm UI designs.

Monochromatic

One hue with varied saturation and lightness. Monochromatic palettes look clean and sophisticated — the go-to for minimal design systems and dark mode UIs.

Complementary

Two colors directly opposite on the color wheel (180° apart). Maximum contrast — use one color as dominant and the other as a bold accent for CTAs and highlights.

Split-Complementary

A base color plus two colors flanking its complement. Gives high contrast with less visual tension than a straight complementary scheme — great for beginner-friendly palettes.

Triadic

Three colors evenly spaced at 120° apart. Triadic color schemes feel energetic and varied — apply the 60/30/10 rule to keep them balanced.

Tetradic / Square

Four colors arranged as two complementary pairs. Rich variety, but always establish a clear dominant color to avoid the palette feeling chaotic.

WCAG Contrast & Accessibility

WCAG 2.1 requires a 4.5:1 contrast ratio for normal text and 3:1 for large text to meet AA compliance. Click the accessibility icon on any color bar to instantly check contrast ratios against white and black, plus a colorblind-friendliness score based on deuteranopia simulation.

HSL vs OKLCH

HSL is intuitive but not perceptually uniform — two colors with the same lightness value can look very different in brightness. OKLCH is a perceptually uniform color space supported in all modern browsers. Equal numeric changes produce equal perceived changes, making it far better for building design token systems and accessible color scales.

The 60-30-10 Rule

A core principle of color theory: 60% dominant color (backgrounds, large areas), 30% secondary color (section zones, sidebars), 10% accent color (CTAs, badges, highlights). The Hexy Hues preview panels apply this automatically using your Main, Tint, and Accent color assignments.

CSS Custom Properties

Exports a :root block with all palette colors as CSS variables. Reference them anywhere with var(--color-1). The simplest way to drop a color palette directly into any web project.

Tailwind Config

Exports a ready-to-paste snippet for tailwind.config.js under theme.extend.colors. Drop it in and your palette is immediately available as Tailwind utility classes.

SCSS Variables

Generates $color-1 through $color-n as SCSS variables. Compatible with any SCSS-based theming system or design token pipeline.

JSON / Design Tokens

A flat key-value JSON object ready for Figma token plugins, React theme providers, or Style Dictionary pipelines. Ideal for teams maintaining a single source of truth for their design system colors.

Share URL

Generates a unique URL that encodes your exact palette. Share it with teammates or clients and they'll load the same colors instantly — no account needed.