Uitly Color Palette Generator is a free online tool that creates harmonious color palettes using color theory algorithms. Choose from 8 harmony types, check WCAG contrast ratios, and export colors in HEX, RGB, HSL, and CSS variable formats. No signup required.
Uitly's color palette generator creates harmonious color schemes from any base color using proven color theory algorithms. Choose from 8 harmony types, check WCAG accessibility contrast instantly, and export your palette in HEX, RGB, HSL, or CSS variable format. No signup. No cost.
Whether you are building a brand identity, designing a website, or choosing colors for a marketing campaign, this tool gives you mathematically correct color combinations in seconds so you spend less time guessing and more time creating.
Generate palettes using complementary, analogous, triadic, split-complementary, tetradic, square, monochromatic, and custom harmony rules. Each type applies a different color theory algorithm to your base color.
Every color in your palette shows its contrast ratio against white and black backgrounds instantly. AA and AAA badges confirm which combinations meet WCAG 2.1 accessibility standards for text and UI elements.
Copy any color in HEX, RGB, or HSL format with one click. Export the entire palette as ready-to-use CSS custom properties that you paste directly into your stylesheet.
Generate a new harmonious palette in one click when you need inspiration. Every random palette still follows color theory rules, so the output is always visually balanced.
See your palette applied to a sample UI layout in real time. Preview how your chosen colors look on buttons, text, cards, and backgrounds before committing to the scheme.
Export your entire palette as CSS custom properties with semantic naming conventions. Paste them into your root stylesheet and reference them throughout your project immediately.
Pick a base color, choose a harmony type, and the color theory engine generates a balanced palette instantly. Adjust the size, saturation, and lightness to match your project.
Harmony TypeColors directly opposite each other. Creates bold, high-contrast pairs.
Palette Size: 4 colors
Saturation: 55% to 85%
Lightness: 35% to 75%
H239 S55 L35
H239 S85 L75
H59 S55 L35
H59 S85 L75
CSS Custom Properties
:root {
--color-1: #282A8A;
--color-1-rgb: 40, 42, 138;
--color-1-hsl: hsl(239, 55%, 35%);
--color-2: #898BF5;
--color-2-rgb: 137, 139, 245;
--color-2-hsl: hsl(239, 85%, 75%);
--color-3: #8A8928;
--color-3-rgb: 138, 137, 40;
--color-3-hsl: hsl(59, 55%, 35%);
--color-4: #F5F489;
--color-4-rgb: 245, 244, 137;
--color-4-hsl: hsl(59, 85%, 75%);
}Live UI Preview
Your color palette applied to a real layout so you can see how it feels.
#282A8A
#898BF5
#8A8928
| Color | HEX | vs White | vs Black |
|---|---|---|---|
| #282A8A | AAA (11.74:1) | Fail (1.79:1) | |
| #898BF5 | Fail (2.97:1) | AAA (7.08:1) | |
| #8A8928 | AA Large (3.69:1) | AA (5.69:1) | |
| #F5F489 | Fail (1.15:1) | AAA (18.18:1) |
AA requires a contrast ratio of 4.5:1 for normal text. AAA requires 7:1. AA Large applies to text at 18pt or 14pt bold.
Six steps from a single base color to a fully exported, accessibility-checked palette. No color expertise required.
Use the color picker to choose any starting color, or type a HEX code directly into the input field. This becomes the anchor around which the harmony algorithm builds the palette.
Select one of 8 harmony types: complementary, analogous, triadic, split-complementary, tetradic, square, monochromatic, or custom. Each type applies a different color theory rule to generate the palette.
Set the number of colors you need using the palette size slider. Fine-tune the saturation and lightness ranges to control how vivid or muted the generated colors appear.
Review the accessibility summary below the palette. Each color shows its contrast ratio against white and black, with AA and AAA badges confirming which combinations meet WCAG 2.1 standards.
Click UI Preview to apply your palette to a sample interface. See how your colors look on navigation bars, hero sections, buttons, and cards before committing to the scheme.
Copy individual colors in HEX, RGB, or HSL format, export the full palette as CSS custom properties, or download the palette as a JSON file for use in design tools.
Dozens of color tools exist online. Here is what makes this one more useful for real design work.
Every palette follows mathematical color theory rules. Complementary colors sit exactly 180 degrees apart on the color wheel. Triadic colors are spaced at exactly 120 degrees. The math guarantees visual harmony every time.
WCAG contrast ratios are calculated for every color automatically. You see pass or fail results for both white and black backgrounds without opening a separate tool or doing any manual calculations.
The CSS export produces properly named custom properties that you paste directly into your stylesheet. No reformatting, no manual naming, and no conversion between color formats required.
The random color button picks a new base color and regenerates the entire palette instantly. Every random result still follows the selected harmony type, so the output is always usable.
Apply your palette to a real UI layout before using it in a project. The preview shows your colors on navigation, hero backgrounds, buttons, and cards so you catch problems before they reach production.
The saturation and lightness range sliders let you adjust how vivid or muted the generated colors appear. Narrow the range for a tonal palette or widen it for a high-contrast scheme.
Many color palette tools online produce visually attractive swatches but offer no information about whether those colors are actually usable. A palette where the text color fails WCAG contrast against the background creates accessibility problems that cost time to fix after implementation.
This tool treats accessibility as a first-class feature, not an afterthought. Every generated color shows its contrast ratio against white and black immediately, so you make informed decisions during palette selection rather than discovering accessibility failures during a design review. The CSS variable export and live UI preview further reduce the gap between choosing a palette and using it in production.
Color theory is the body of knowledge that explains how colors relate to each other and how the human eye perceives those relationships. It gives designers a systematic framework for choosing colors that work together harmoniously rather than relying on intuition alone.
The foundation of color theory is the color wheel, a circular arrangement of hues that shows the relationships between primary colors (red, yellow, blue), secondary colors (orange, green, violet), and tertiary colors created by mixing adjacent primaries and secondaries. The position of a color on the wheel determines its relationship to every other color.
These relationships have names: complementary, analogous, triadic, and so on. Each relationship produces a predictable emotional and visual effect. Complementary combinations feel energetic and high-contrast. Analogous combinations feel calm and natural. Understanding these effects lets designers choose palettes that reinforce the message and mood of a project rather than working against it.
Each harmony type creates a different visual relationship. Here is when to use each one and what to avoid.
Complementary colors sit directly opposite each other on the 360-degree color wheel. This creates the strongest possible contrast between two hues, making each color appear more vivid and intense when placed next to the other. A blue and orange pairing is a classic complementary example.
Best for
Call-to-action buttons, brand logos, sports teams
Avoid when
Large body text blocks. The high contrast causes visual vibration at small sizes.
Analogous colors sit next to each other on the color wheel, typically within a 30 to 60 degree range. They share a common undertone and create palettes that feel natural, cohesive, and easy on the eyes. Sunsets, autumn leaves, and ocean gradients are all analogous color schemes found in nature.
Best for
Nature-inspired brands, wellness, photography portfolios
Avoid when
Situations requiring strong contrast between elements. Analogous palettes lack the visual punch of complementary pairs.
Triadic palettes use three colors spaced exactly 120 degrees apart on the color wheel. The classic primary triad of red, yellow, and blue is the most recognisable example. Triadic schemes are inherently vibrant and balanced, but they require careful management to avoid visual chaos.
Best for
Children's brands, food packaging, playful consumer apps
Avoid when
Corporate or luxury contexts where vibrancy reads as unprofessional.
Split-complementary uses a base color plus the two colors adjacent to its complement rather than the complement itself. This creates strong visual contrast similar to a complementary scheme but with less visual tension, making it easier to use in multi-element designs.
Best for
UI design, editorial layouts, packaging where you need contrast without tension
Avoid when
Minimal designs. Split-complementary palettes work best when all three colors are in active use.
Tetradic palettes combine two complementary pairs, giving you four colors spread across the color wheel. This creates a rich, complex scheme with a wide tonal range. The challenge is maintaining visual balance, which typically requires designating one color as dominant and using the others as accents.
Best for
Complex interfaces, data visualisations, seasonal campaigns
Avoid when
Beginner designs. Four colors require confident management or the palette becomes overwhelming.
Square harmony uses four colors equally spaced at 90-degree intervals around the color wheel. Like tetradic, it gives you a wide range of hues. The difference is that square spacing produces a more evenly balanced result, whereas tetradic leans toward two dominant complementary relationships.
Best for
Bold, contemporary branding, tech products, gaming interfaces
Avoid when
Contexts where a calm, cohesive feel is required. Square palettes are inherently high-energy.
Monochromatic palettes use a single hue across a range of saturation and lightness values. They are the easiest palettes to keep cohesive and the hardest to make boring. The key is using a wide enough lightness range to create clear visual hierarchy without relying on different hues.
Best for
Luxury brands, minimalist UI, photography sites, elegant presentations
Avoid when
Designs that need to differentiate between many different types of content or UI elements.
Custom harmony lets you define the hue offsets manually, giving you full control over the relationship between colors in your palette. Use it when you have a specific brand color requirement that does not fit neatly into one of the standard harmony types.
Best for
Experienced designers who know exactly which hue relationships they need
Avoid when
Quick projects. Custom mode requires intentional decisions about each hue offset.
The Web Content Accessibility Guidelines define minimum contrast ratios between foreground and background colors to ensure content is readable by people with low vision or color deficiencies. Meeting these standards is a legal requirement in many jurisdictions and a best practice universally. The Uitly Color Palette Generator calculates these ratios automatically for every color in your palette.
Required for all text smaller than 18pt regular weight or 14pt bold. This is the minimum standard for most websites and applications.
Required for text at 18pt or larger in regular weight, or 14pt or larger in bold weight. Also applies to UI components like form inputs and buttons.
The enhanced accessibility standard for normal text. Required for content targeting users with severe visual impairments. Not mandatory for most projects but recommended for government and healthcare sites.
The enhanced standard for large text. Matches the AA standard for normal text. Use this level when designing for maximum accessibility.
Important note on contrast tools
Contrast ratio is calculated mathematically from the relative luminance of two colors. The same color can pass WCAG AA against one background and fail against another. Always check the specific foreground and background combination you intend to use, not just the colors in isolation. The WCAG summary in the generator checks each palette color against both white and black for this reason.
A brand palette is more than a set of colors you like. Here is a repeatable process for choosing colors that work together in real design contexts.
Choose the one color that best represents your brand's personality and values. This becomes your base color in the generator. If you already have a brand color, enter its HEX code directly.
Run the generator with your primary color as the base. Complementary gives strong contrast for calls to action. Analogous gives a softer, more cohesive secondary palette. Triadic gives energy and range.
Review the WCAG summary for every color in the palette. Your primary text color must meet at least AA standard against your background colors. Failing this at this stage saves significant rework later.
Define a purpose for each color: primary for main brand elements, secondary for supporting content, accent for calls to action and highlights, neutral for backgrounds and body text.
Copy the CSS variable export and paste it into your root stylesheet. Reference the variables throughout your project by name rather than hardcoding HEX values, which makes future palette updates a single-file change.
Color decisions happen at every stage of a design and development workflow. Here is who gets the most value from this tool.
Generate accessibility-checked color systems in seconds instead of spending hours testing combinations manually. The CSS variable export integrates directly with design token workflows.
Get production-ready CSS custom properties without needing color theory knowledge. Use the WCAG summary to confirm accessibility compliance before handing off to a design review.
Explore harmony relationships quickly during the identity discovery phase. The live UI preview shows how palette choices perform on real interface elements rather than abstract swatches.
Create on-brand color palettes for campaign assets without requesting designer time. The random generation feature produces harmonious options quickly when starting from a brand color.
Choose colors with confidence even without formal design training. The harmony engine applies color theory rules automatically so every generated palette is visually balanced by default.
Uitly offers 23 free browser-based tools for designers and developers. These tools work alongside the color palette generator to help you build a complete design system.
Common questions about color theory, palette generation, WCAG contrast, and how the tool works.
A color palette generator is a tool that creates sets of colors that work well together based on color theory principles. You provide a base color and the tool calculates harmonious companion colors using rules like complementary, triadic, or analogous relationships on the color wheel.
Complementary colors sit directly opposite each other on the color wheel and create strong visual contrast, making each color appear more vivid. Analogous colors sit next to each other on the color wheel and create softer, more cohesive combinations that feel natural and harmonious.
The Uitly Color Palette Generator checks each color against WCAG 2.1 contrast ratio standards automatically. A contrast ratio of 4.5 to 1 or higher meets WCAG AA for normal text. A ratio of 7 to 1 or higher meets WCAG AAA. Each color in the palette shows its contrast score against white and black so you can identify accessible combinations immediately.
You can copy each color in HEX, RGB, and HSL formats individually. You can also export the entire palette as CSS custom properties, which you paste directly into a stylesheet and reference as variables throughout your project.
Yes. The Uitly Color Palette Generator is completely free with no account, no signup, and no usage limits. The tool runs entirely in your browser, so no color data is sent to a server.
Most effective brand palettes contain 3 to 6 colors: a primary color that represents the brand, one or two secondary colors for supporting elements, a neutral color for backgrounds and text, and an accent color for calls to action and highlights. Fewer colors create stronger brand recognition and make design decisions easier.
Build linear, radial & conic gradients visually. Copy production CSS instantly.
Check WCAG AA & AAA contrast ratios with accessible color suggestions.
Build a complete token system — colors, spacing, type — export JSON or CSS vars.
Discover 800+ expert Google Fonts combos. Preview with your own text.