Tool Overview

This tool builds a set of UI colors from three seed colors. You pick a primary, a background, and an accent; the tool derives more colors (e.g. surface, text) and checks contrast so you get a ready-to-use palette with accessibility info.

Choosing colors for an app or site is hard. You need a main color, a background, an accent, and colors for text and states. Making sure text is readable (good contrast) takes extra work. This tool takes three seeds and generates a full set of roles, with contrast and WCAG levels shown so you can fix problems before you code.

It is for developers and designers who need a quick UI palette with contrast checks. You can use it with basic knowledge of hex colors; no design theory required.

Background and Concepts

A UI palette often has a primary color (buttons, links), a background, a surface (cards, modals), an accent (secondary actions), and text and state colors (success, error). These should work together and keep text readable. Readability is measured by contrast: the ratio between text and background. WCAG guidelines say normal text should have at least 4.5:1 (AA) and large text or strict cases 7:1 (AAA). A related operation involves generating random colors as part of a similar workflow.

Building that by hand means picking each color and testing contrast for every pair. This tool starts from three seeds (primary, background, accent). It derives surface from the background (lighter or darker) and picks text color (white or dark) from background brightness. It uses fixed colors for success and error so they stay consistent. For each role it computes the contrast between the role color and the suggested text color on it, and shows whether that pair passes AA or AAA. So you get a full set of roles and accessibility info in one step.

The tool does not use color theory schemes (e.g. complementary or triadic). It only expands your three seeds into a fixed set of UI roles and checks contrast. You can change the seeds with a color picker or hex input, or use the optional prompt to get three suggested colors and apply them as seeds.

Key Features

• Three seed colors. You set primary, background, and accent. Each has a color picker and a hex text box. The tool uses these to build the rest of the palette. Default seeds are provided so you can see the result without changing anything. So you control the base and the tool does the rest.
• System roles. The tool generates a fixed set of roles: Primary, Background, Surface, Accent, Text (Body), Success, and Error. Surface is derived from background (brightened or darkened). Text color is chosen from background luminance. Success and Error use fixed hex values. So you get a complete set of UI colors in one go.
• Contrast and WCAG. For each role the tool shows the contrast ratio between the role color and the suggested text color on it, and a WCAG level (AA, AAA, or Fail). AA means at least 4.5:1; AAA means at least 7:1. A summary shows how many roles fail so you can fix them. So you see accessibility at a glance.
• Copy hex and export. You can copy each role’s hex from the palette. You can also copy the full palette as CSS variables (a :root block with --color-* names) or as a Tailwind-style JSON object. So you can paste into your project without retyping.
• Preview. You can switch a preview between presets (e.g. Web App, Marketing Site, Dashboard, Mobile App) to see how the palette looks in different layouts. So you can judge the palette in context.
• Optional AI suggestions. You can type a short description of your project (e.g. calm medical dashboard) and request three colors. If the service returns at least three hex colors, you can apply them as the three seeds. This is optional and not required to use the tool.

Common Use Cases

Starting a new app or site. You have a brand primary and want a full UI palette. Set primary, background, and accent; get Surface, Text, Success, and Error with contrast info. Export CSS or Tailwind and paste into your project. For adjacent tasks, picking colors addresses a complementary step.

Checking contrast. You already have colors and want to see if text on them passes AA or AAA. Enter your colors as seeds (or the ones you care about) and check the contrast and WCAG levels for each role. Fix seeds until the counts look good.

Quick mockups. You need a coherent palette for a prototype. Use the default seeds or the AI prompt to get three colors, then use the generated roles and preview to build the mockup.

Learning. You want to see how background brightness affects surface and text, or how contrast ratios map to AA and AAA. Change the background seed and watch the roles and contrast update. When working with related formats, checking color contrast can be a useful part of the process.

How to Use This Tool (Step-by-Step)

1. Open the Color Palette Generator page.
2. Set the three seed colors: Primary, Background, and Accent. Use the color picker or type a hex value (e.g. #00A99C) for each. The palette and roles update as you change them. If you leave the defaults, you already see a full palette.
3. Look at the System Roles section. Each role shows a color swatch, the suggested text color on it, the hex code, the contrast ratio, and the WCAG level (AA, AAA, or Fail). A summary shows how many roles fail so you can adjust seeds if needed.
4. Copy a single hex by using the copy button next to that role. Copy the full palette by using the Export section: choose CSS or Tailwind and tap Copy to get CSS variables or a JSON object you can paste into your project.
5. Use the Preview section and the preset dropdown (e.g. Web App, Marketing Site, Dashboard, Mobile App) to see how the palette looks in different layouts. Change seeds until you are happy.
6. Optionally open the Generate panel and type a short description of your project (e.g. vibrant fintech app). Tap the send button to request three colors; if the service returns them, apply them as the three seeds. Then adjust or export as above.

Calculations and Logic

The tool derives colors and computes contrast; it does not use numeric formulas beyond standard color and contrast math.

Seeds are validated as hex (# plus six hex digits). Invalid or missing seeds are replaced with defaults. Background is used to decide if the theme is dark (luminance below 0.5): if dark, surface is background brightened and text primary is white; if light, surface is background darkened and text primary is a dark gray. Text secondary is derived from text primary (darkened or brightened). Primary and accent get an on-color (text on that color): if the color’s luminance is high, the on-color is dark; otherwise white. Success and Error use fixed hex values. For each role the tool computes the contrast ratio between the foreground (text) and background (role color) using the standard relative luminance formula. The ratio is rounded to two decimals. WCAG level is Fail if ratio is below 4.5, AA if at least 4.5 and below 7, AAA if at least 7. These values are shown next to each role. Export formats: CSS is a :root block with variable names derived from role names (lowercase, spaces to hyphens) and hex values; Tailwind export is a JSON object with the same names and hex values. The preview uses the roles and the selected preset only for display; it does not change the palette.

Tips, Limitations and Best Practices

Hex only. The tool accepts hex colors only (# and six hex digits). Other formats (RGB, names) are not supported. Use a color picker or convert elsewhere first. In some workflows, generating italic text is a relevant follow-up operation.

Three seeds. You can only set primary, background, and accent. The tool does not offer complementary, analogous, or triadic schemes. It only expands these three into a fixed set of UI roles.

Success and Error. These are fixed colors in the tool. If you need different ones, change your seeds or use the exported hex and replace Success and Error in your project.

Export is copy only. The tool exports CSS variables and Tailwind-style JSON by copying to the clipboard. It does not export ASE or other file formats, and it does not save palettes to a library. Copy and paste into your code or config. For related processing needs, generating favicons handles a complementary task.

WCAG is a guide. The tool shows AA and AAA based on contrast only. Accessibility also depends on font size, weight, and use. Use the tool to catch low contrast; test with real content and users when it matters.

AI suggestions. The optional prompt sends your description to a service and uses the returned colors as seeds. Do not rely on it for strict brand colors; check and adjust the result.