What this prompt does
This prompt generates a complete color system derived from a single brand color, with semantic colors, tint and shade scales, dark-mode variants, and accessibility-checked pairings. You provide [brand_name], the [primary_color], the [industry], and the [target_audience]. ChatGPT then builds the primary scale, a complementary secondary, semantic accent colors, a neutral gray scale, a WCAG contrast matrix, dark-mode variants, and exportable design tokens.
The variables shape the system. [scale_steps] sets how many shades each color gets (50 through 950), [color_harmony] decides how the secondary is derived, and [accent_count] controls the semantic colors for success, warning, error, and info. [neutral_tone] gives the grays a warm, cool, or true-neutral undertone so they harmonize with the primary, [wcag_level] sets the contrast standard for the validation matrix, and [export_formats] determines the token output (CSS variables, Tailwind config, Figma tokens, SwiftUI). Because every step ties back to the one [primary_color], the system stays coherent rather than feeling assembled from unrelated swatches.
When to use it
- You have one brand color and need a full, consistent palette built around it.
- You are theming an app or dashboard and want tint/shade scales as design tokens.
- You need semantic colors (success, warning, error, info) that fit the brand rather than default reds and greens.
- You want a neutral gray scale that harmonizes with the primary instead of looking disconnected.
- You need a WCAG contrast matrix showing which text/background pairings pass.
- You want dark-mode variants derived systematically rather than guessed.
Example output
The output is a complete color-system specification. It gives the primary scale across [scale_steps] steps with hex, HSL, and intended use per step, a secondary color derived via [color_harmony] with its own scale, [accent_count] semantic colors each in three variants, a neutral scale with a [neutral_tone] undertone, a contrast matrix validating pairings against [wcag_level], dark-mode surface and adjusted colors, and design tokens exported in your [export_formats] using a --color-{role}-{shade} naming convention. It is ready to paste into a theme config.
Pro tips
- Give
[primary_color]as a precise hex value so the entire scale is derived accurately from your real brand color. - Choose
[neutral_tone]deliberately — a cool gray under a warm primary can look off, so match the undertone to the brand. - Set
[wcag_level]to AA at minimum and aim for AAA on body text, then verify the matrix with a real contrast checker. - Pick
[export_formats]that match your stack so the tokens drop straight into your Tailwind config or CSS without manual conversion. - Treat the generated hex values as a strong starting point, but eyeball the scale in context, since perceptual uniformity can still need small hand-tuning.
- Re-run with a different
[color_harmony]if the secondary feels wrong; split-complementary and triadic produce noticeably different brand moods.
