30 Claude Prompts That Build Color Palettes

You are a design-systems engineer who builds matched light and dark themes. <context> I need a single palette that works in both light and dark mode, delivered as one self-contained HTML swatch sheet with inline CSS showing both themes side by side, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - Brand primary: [HEX] - Product type: [WEB APP / SITE] - Feeling: [E.G. CRISP, CALM] - Tokens I need: [E.G. BACKGROUND, SURFACE, TEXT, PRIMARY, BORDER, SEMANTIC] </inputs> <task> Produce two parallel themes (light and dark) using the same token names so they map one-to-one. For each token render the light value and the dark value side by side with name, hex, RGB, and usage note. Adjust the primary for dark mode so it stays legible (often a lighter tint). Confirm text-on-background AA in both themes and print the ratios. </task> <constraints> - Token names must be identical across themes; only values differ. - Dark mode must avoid pure black background and pure white text; explain the chosen near-black and near-white. - One self-contained responsive HTML file; Google Fonts only; both themes meet AA. </constraints> <format> Return the side-by-side swatch sheet as an artifact, then output both themes as CSS custom-property blocks (one for light, one for dark) ready to paste. </format>

You are a UI designer who specializes in elegant dark-mode-first interfaces. <context> My product is dark mode by default and I need a dark-first palette, delivered as one self-contained HTML swatch sheet with inline CSS rendered on a dark surface, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - Product: [E.G. CODE EDITOR, MUSIC APP, TRADING TOOL] - Mood: [E.G. FOCUSED, MOODY, PREMIUM] - Accent direction: [E.G. ELECTRIC BLUE, NEON GREEN] - Density: [DATA-HEAVY / SPACIOUS] </inputs> <task> Build a dark-first palette: a layered set of dark surfaces (base background, raised surface, overlay) so depth reads without borders, an elevated text scale (primary, secondary, disabled), one or two accents for actions and highlights, and semantic colors tuned for dark backgrounds. Render each swatch with name, hex, RGB, and usage note. Print AA contrast for each text level on the base background. </task> <constraints> - Use elevation through subtly lighter surfaces, not just borders; show the surface ladder in order. - Accents must glow on dark without vibrating against text; verify AA for accent-as-text where used. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the dark swatch sheet as an artifact, then list the palette as named hex tokens grouped by surface, text, accent, and semantic. </format>

You are a design-systems lead shipping multiple selectable color themes. <context> I want several swappable color themes for one app (so users can pick a vibe), delivered as one self-contained HTML swatch sheet with inline CSS showing each theme, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - App and base neutrals: [WHAT IT IS, NEUTRAL HEX OR "YOU CHOOSE"] - Themes I want: [E.G. CLASSIC, FOREST, SUNSET, MONO] - What stays constant across themes: [E.G. NEUTRALS, SEMANTIC COLORS] - Light, dark, or both: [SPECIFY] </inputs> <task> Build each named theme as a row sharing the constant tokens but swapping the themed ones (primary, accent, highlight). Render each theme's swatches with name, hex, RGB, and usage note. Keep semantic colors consistent across themes so meaning never changes. Add a rule for how to add a new theme later without breaking contrast. </task> <constraints> - Shared tokens must be identical across every theme; only themed tokens differ. - Every theme's primary must reach AA on the shared background; print ratios per theme. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the multi-theme swatch sheet as an artifact, then output each theme as a CSS custom-property override block layered on shared base tokens. </format>

You are an accessibility specialist building a high-contrast theme for low-vision users. <context> I need a high-contrast theme variant that maximizes legibility, delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each swatch shows hex, RGB, and a contrast ratio. </context> <inputs> - Base brand colors: [HEX VALUES] - Theme base: [HIGH-CONTRAST LIGHT / HIGH-CONTRAST DARK / BOTH] - Elements needing color: [TEXT, LINKS, BUTTONS, BORDERS, FOCUS] - Target level: [AA / AAA] </inputs> <task> Build a high-contrast theme: background, text, links, button, border, and focus-ring colors all chosen to hit the target level. Render each swatch with name, hex, RGB, and the measured contrast ratio against its intended pairing. Add a distinct, highly visible focus-ring color. Note which brand colors had to be darkened or lightened to qualify and by how much. </task> <constraints> - Every text and interactive pairing must meet the target level (AA 4.5:1 or AAA 7:1); show the ratio for each. - Focus ring must be clearly visible against both background and adjacent elements. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact with every ratio shown, then list the theme as named hex tokens and flag any brand color that could not meet the level as-is. </format>

You are a product designer defining a consistent status and feedback color system. <context> I need a complete set of status colors (success, warning, error, info, plus neutral) for an app, delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - App background and surface: [HEX OR "YOU CHOOSE"] - Modes: [LIGHT / DARK / BOTH] - Components using status: [E.G. TOASTS, BADGES, BANNERS, FORM VALIDATION] - Colorblind-safe needed: [YES / NO] </inputs> <task> Define each status with a full set: a base color, a soft background tint for banners, a darker text-on-tint color, and a border color, so toasts and inline messages are buildable. Render each status as a small group of swatches with names, hex, RGB, and usage notes. Verify text-on-tint AA for each status. If colorblind-safe is required, choose hues plus a non-color cue recommendation (icon or label). </task> <constraints> - Each status needs base, tint, on-tint text, and border that work together; show them grouped. - Text-on-tint must meet AA for every status; print ratios. - If colorblind-safe, ensure success and error are distinguishable beyond hue and recommend an icon pairing. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact, then output the status system as named hex tokens grouped per status (base, tint, text, border). </format>

You are a visual designer who builds reusable gradient systems for a brand. <context> I need a set of on-brand gradients, delivered as one self-contained HTML swatch sheet with inline CSS that renders each gradient live, previewable as an artifact. Each gradient shows its CSS and stop colors as hex. </context> <inputs> - Brand colors: [HEX VALUES] - Where gradients appear: [HERO BACKGROUNDS / BUTTONS / CARDS / ILLUSTRATION] - Vibe: [SUBTLE / VIVID / DREAMY] - Number of gradients: [3-6] </inputs> <task> Build a gradient system using the brand colors: a hero gradient, a button gradient, a subtle surface gradient, and one or two accent gradients. Render each as a live gradient block with a name, the full CSS (linear-gradient with stops and angle), the stop hex values, and a usage note. Add a rule for keeping gradients on-brand and a note on which gradients are safe behind white text. </task> <constraints> - Gradients must derive from the brand colors, not random hues; explain transitions. - For any gradient used behind text, verify the darkest region meets AA with white text; note it. - One self-contained responsive HTML file; Google Fonts only; render real gradients. </constraints> <format> Return the gradient sheet as an artifact, then list each gradient's name and copyable CSS, flagging which are text-safe. </format>

You are a design-systems engineer who builds numbered color scales. <context> I need full tint-and-shade scales for my key colors (like the 50-900 scales in design systems), delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each step shows its hex and RGB. </context> <inputs> - Base colors to scale: [HEX VALUES WITH NAMES] - Number of steps per scale: [9 / 11] - Where the base sits in the scale: [E.G. STEP 500] - Intended uses: [BACKGROUNDS, BORDERS, TEXT, STATES] </inputs> <task> For each base color, generate an even, perceptually smooth scale from lightest to darkest with numbered steps (e.g. 50, 100 ... 900), placing the base at the specified step. Render every step as a swatch with its number, hex, RGB, and a suggested use (background, hover, border, text). Mark which steps pass AA as text on white and which pass on the lightest step. </task> <constraints> - Steps must progress smoothly with no jarring jumps; keep hue consistent across the scale. - Clearly mark the base step and the AA-safe text steps. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the scales as an artifact, then output each scale as a copyable set of numbered hex tokens (e.g. blue-50 through blue-900). </format>

You are a data-visualization designer who builds palettes for charts and maps. <context> I need color scales for data visualization (categorical, sequential, and diverging), delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - Chart types: [E.G. BAR, LINE, HEATMAP, CHOROPLETH] - Number of categories to distinguish: [E.G. UP TO 8] - Background charts sit on: [LIGHT / DARK] - Colorblind-safe required: [YES / NO] </inputs> <task> Build three scales: a categorical palette with the requested number of clearly distinguishable colors, a sequential scale (light to dark of one hue) for magnitude, and a diverging scale (two hues meeting at a neutral midpoint) for above/below comparisons. Render each as ordered swatches with name, hex, RGB, and usage note. If colorblind-safe, choose hues that stay distinguishable for common color-vision deficiencies and say which type you optimized for. </task> <constraints> - Categorical colors must be mutually distinguishable on the stated background, not just on white. - Sequential and diverging scales must be perceptually even; show them in order. - If colorblind-safe, verify category separation and note the deficiency types considered. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact, then output each scale as an ordered list of hex codes labeled categorical, sequential, and diverging. </format>

You are a digital artist who builds rich multi-stop and mesh-style backgrounds. <context> I want a few lush multi-stop or mesh-style gradient backgrounds for hero sections, delivered as one self-contained HTML swatch sheet with inline CSS rendering each background live, previewable as an artifact. Show the stop colors as hex. </context> <inputs> - Color direction: [E.G. SUNSET, AURORA, PASTEL, BRAND HEX] - Mood: [E.G. CALM, ENERGETIC, PREMIUM] - Where used: [HERO / FULL PAGE / CARD] - Text that sits over it: [LIGHT TEXT / DARK TEXT / NONE] </inputs> <task> Create three distinct rich backgrounds using layered radial gradients (or conic) to fake a mesh look, each rendered full-bleed in its own block. Give each a name, the full CSS, the stop hex values, and a usage note. For any background carrying text, ensure a readable region exists and recommend a subtle overlay or the text color that stays AA-legible; note the ratio. </task> <constraints> - Use only CSS gradients (no images); make the mesh effect with layered radial/conic gradients. - Each background must be visually distinct; explain the color story of each. - If text sits over it, guarantee an AA-legible zone or recommend an overlay; note the choice. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the backgrounds as an artifact, then list each one's name and copyable CSS, flagging the recommended text color and any overlay. </format>

You are an editorial designer who builds duotone treatments and photo color overlays. <context> I need duotone color pairs and overlay tints to give photos a consistent on-brand look, delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each pair shows hex and RGB. </context> <inputs> - Brand colors: [HEX VALUES] - Look I want: [E.G. EDITORIAL, MOODY, VIBRANT] - Where applied: [HERO PHOTOS / BLOG HEADERS / SOCIAL] - Light or dark base: [SPECIFY] </inputs> <task> Build three duotone pairs (a dark shadow color and a light highlight color each) plus two semi-transparent overlay tints for photos. Render each duotone pair as two swatches side by side with names, hex, and RGB, and show the recommended blend approach (e.g. shadows-to-dark, highlights-to-light). For overlays, show the color, the suggested opacity, and a usage note. Explain how each keeps the brand recognizable across different photos. </task> <constraints> - Duotone shadow and highlight must come from or harmonize with the brand colors; explain each pair. - Recommend opacity ranges for overlays so photos stay legible but on-brand. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact, then list each duotone pair and overlay as hex codes with the recommended opacity. </format>

You are an accessibility engineer who audits color palettes against WCAG. <context> I have an existing palette and need a contrast audit, delivered as one self-contained HTML swatch sheet with inline CSS that shows a pass/fail grid, previewable as an artifact. Each pairing shows its ratio. </context> <inputs> - My palette with roles: [HEX VALUES, E.G. PRIMARY, BACKGROUND, TEXT, LINK] - Real pairings used in the UI: [E.G. TEXT ON BACKGROUND, BUTTON TEXT ON PRIMARY] - Target level: [AA / AAA] - Text sizes involved: [NORMAL / LARGE / BOTH] </inputs> <task> For each real pairing, calculate the WCAG contrast ratio and mark pass or fail against the target for both normal and large text. Render a grid showing each foreground-on-background combination with its ratio and a pass/fail badge. For every failing pair, suggest the smallest hex adjustment that makes it pass and show the corrected ratio. Summarize how many pairings pass. </task> <constraints> - Show the actual numeric ratio for every pairing, not just pass/fail. - For failures, give a concrete corrected hex and its new ratio; keep changes minimal. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the audit grid as an artifact, then list every failing pair with its original hex, fixed hex, and new ratio. </format>

You are an inclusive-design specialist who validates palettes for color-vision deficiencies. <context> I need to know whether my palette works for colorblind users and how to fix it, delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - My palette: [HEX VALUES WITH ROLES] - Where color carries meaning: [E.G. CHART CATEGORIES, STATUS COLORS] - Deficiency types to consider: [DEUTERANOPIA, PROTANOPIA, TRITANOPIA, ALL] - Non-color cues I can add: [ICONS, LABELS, PATTERNS, NONE YET] </inputs> <task> For each pair of colors that must be distinguishable, assess whether they remain distinct under the listed deficiency types and flag risky pairs (especially red/green and blue/purple confusions). Render the palette with notes per swatch on its colorblind risk. For each risky pair, recommend a hue adjustment to separate them and a non-color cue (icon, pattern, label) as backup. Summarize which pairs are safe and which need a backup cue. </task> <constraints> - Identify specific risky pairs by name; do not just say "check for colorblindness". - For each risk, give both a color fix and a non-color fallback. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact, then list each risky pair, the recommended hue fix, and the non-color cue to add. </format>

You are a design-systems engineer who ships palettes as developer-ready tokens. <context> I have a finalized palette and need it exported in formats my team can paste straight into code, delivered as one self-contained HTML swatch sheet with inline CSS that previews the colors next to their tokens, previewable as an artifact. </context> <inputs> - My palette with roles and names: [HEX VALUES, E.G. PRIMARY, NEUTRAL-100 ... ] - Formats needed: [CSS VARIABLES / TAILWIND CONFIG / SCSS / JSON TOKENS] - Naming convention: [E.G. ROLE-BASED, NUMBERED SCALE] - Modes: [SINGLE / LIGHT PLUS DARK] </inputs> <task> Render the palette as a swatch sheet where each color sits next to its token name, hex, and RGB. Then produce the export blocks in each requested format using consistent, sensible names: CSS custom properties, a Tailwind color config snippet, SCSS variables, and/or a JSON token file. If light and dark modes exist, structure the tokens so a mode switch swaps values cleanly. </task> <constraints> - Token names must be consistent across every format; no mismatches. - Output valid, copyable code for each requested format; no placeholders left unfilled. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet plus the export code blocks as an artifact, then note which file each block belongs in. </format>

You are a brand-guidelines designer who documents color usage for a team. <context> I need a shareable color-guidelines page so my team uses the palette correctly, delivered as one self-contained HTML page with inline CSS, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - The palette with roles: [HEX VALUES AND NAMES] - Brand voice: [E.G. WARM PROFESSIONAL] - Do's and don'ts I care about: [E.G. NEVER USE ACCENT FOR BODY TEXT] - Examples to include: [BUTTONS, TEXT, BACKGROUNDS, STATES] </inputs> <task> Build a guidelines page: an intro on the palette's intent, a swatch reference for every color with name, hex, RGB, and role, correct-usage examples (a real button, text block, and card using the palette), a clear do's-and-don'ts section with visual examples of right and wrong, an accessibility note listing AA-safe pairings, and a copy-the-hex affordance per swatch. Write the guidance copy in the brand voice. </task> <constraints> - Show real, rendered examples of buttons, text, and cards using the actual palette. - Include explicit don'ts with a wrong example next to the right one. - One self-contained responsive HTML file; Google Fonts only; AA pairings listed. </constraints> <format> Return the guidelines page as an artifact, then list the palette as hex codes and the three most important usage rules. </format>

You are a design-systems naming expert who turns raw hex values into a clean semantic system. <context> I have a set of colors but no naming system and need clear, consistent names plus role mappings, delivered as one self-contained HTML swatch sheet with inline CSS, previewable as an artifact. Each swatch shows hex and RGB. </context> <inputs> - Raw colors: [HEX VALUES, UNNAMED] - How they are used: [ROUGH NOTES ON WHERE EACH APPEARS] - Naming style: [DESCRIPTIVE (E.G. OCEAN-BLUE) / FUNCTIONAL (E.G. PRIMARY) / BOTH LAYERS] - Scales needed: [SINGLE NAMES / NUMBERED SCALE] </inputs> <task> Give each color a clean primitive name (the literal color) and a semantic alias (its role, e.g. primary, surface, danger), so the system has both a base layer and a meaning layer. Render each swatch with its primitive name, semantic alias, hex, RGB, and usage note. Where two semantics point at the same primitive, show the aliasing. Explain the naming rules so the team can name new colors consistently. </task> <constraints> - Separate primitive names from semantic aliases; show the mapping between them. - Names must be consistent, lowercase, and predictable; no ad-hoc one-offs. - One self-contained responsive HTML file; Google Fonts only. </constraints> <format> Return the swatch sheet as an artifact, then output the primitive-to-semantic mapping as a copyable token list and the naming rules. </format>