Color Designer - Palette Maker

View saved version →

---
name: build-brand-palette
description: Build a distinctive, usable brand color system from an organization, product, audience, positioning, personality, industry, or existing brand color. Use for brand identity palettes, rebrands, campaign palettes, startup colors, or assigning brand color roles. Do not use for full UI themes, interior design, image extraction, or merely formatting existing colors as code.
---

# Build a brand palette

## Gather the brief

- Identify the brand, audience, offering, desired traits, unwanted associations, market context, media, and any colors that must be kept or avoided.
- Use supplied facts without asking the user to repeat them. Ask only for information whose absence would materially change the result; otherwise state a reasonable assumption.

## Develop the direction

1. Translate the brief into three to five visual attributes such as assured, warm, precise, energetic, or restrained.
2. Choose a color strategy that expresses those attributes and differentiates the brand from obvious category conventions.
3. Treat required colors as anchors. Adjust supporting colors around them rather than silently replacing them.
4. Build a focused palette, normally five to eight colors, with purposeful roles: primary, secondary, accent, light neutral, dark neutral, and optional supporting or status colors.
5. Avoid redundant near-duplicates, muddy mixtures, accidental national or political symbolism, and trendy choices unsupported by the brief.
6. Consider legibility and reproduction across the user's stated media. Do not claim formal accessibility compliance unless contrast has been calculated for specified pairings.

## Present the result

- Briefly name the direction and connect the major choices to the brief.
- List each color's intended brand role. Keep the explanation compact so the editable palette remains the main artifact.
- Invoke `palette-picker` with the ordered hex colors and a `reason` summarizing the brand direction. Use uppercase `#RRGGBB` values unless transparency is explicitly needed.
- Invite refinement through the rendered palette rather than presenting the colors only as prose.

Referenced files: 1

View saved version →

---
name: compose-ui-theme
description: Compose a coherent application or website color theme from seed colors, an existing palette, a product brief, or light/dark-mode requirements. Use for UI surfaces, text hierarchy, controls, focus states, borders, and semantic feedback colors. Do not use for brand identity alone, interior spaces, or code-only token formatting without theme design.
---

# Compose a UI theme

## Define the interface context

- Determine product type, light or dark mode, density, emotional tone, seed colors, and critical components.
- Preserve explicit brand colors, but distinguish brand expression from colors suitable for text, surfaces, and interaction states.

## Compose the hierarchy

1. Start with canvas, surface, elevated surface, and border values that create clear depth without excessive contrast.
2. Assign primary, secondary, and muted text colors for readable hierarchy.
3. Define action colors and their hover, active, disabled, and focus treatments. Do not encode state through color alone when offering implementation advice.
4. Add success, warning, error, and informational colors only when relevant; keep them distinguishable from the main action color.
5. For dark themes, avoid pure black expanses and over-saturated large surfaces unless the brief calls for them. For light themes, avoid borders too faint to communicate structure.
6. Evaluate likely foreground/background pairings. Clearly label uncalculated contrast as needing verification rather than claiming compliance.
7. Keep the visible editable palette manageable, normally eight to twelve representative colors; describe derived interaction variants separately if necessary.

## Deliver

- Summarize the theme direction and map every displayed color to a UI role.
- Invoke `palette-picker` with representative uppercase `#RRGGBB` colors and a `reason` identifying mode and product context.
- If implementation output is requested, provide semantic mappings after the palette and keep them synchronized with its values.

Referenced files: 1

View saved version →

---
name: direct-creative-palette
description: Translate an emotion, story, era, place, genre, sensory phrase, cultural reference, or abstract creative direction into an original editable palette. Use for evocative palettes, art direction, fictional worlds, campaigns, covers, events, and mood-led color exploration. Do not use for literal image extraction, formal brand systems, interior specifications, or UI role assignment.
---

# Direct a creative palette

## Interpret the concept

1. Extract the concept's emotional temperature, energy, time, material qualities, light, and narrative tension.
2. Identify any literal associations, then move beyond them. Use one or two recognizable anchors and let the remaining colors express atmosphere, contrast, and surprise.
3. Treat living cultures and historical styles with specificity and care. Avoid reducing them to stereotypes or claiming authenticity from vague references.

## Art-direct the colors

- Build a deliberate visual arc, normally five to seven colors, including a field, supporting tones, a grounding dark or light, and one controlled accent.
- Avoid generic rainbow coverage and predictable keyword-to-color mappings when a more distinctive interpretation fits.
- Balance originality with the intended medium. Ask about medium only if it materially changes the palette; otherwise explain the assumed use.
- Give colors short evocative role names, but keep hex values and practical relationships clear.
- If the prompt names a protected brand or living artist, draw from high-level attributes and the user's stated concept rather than claiming an exact official palette or direct stylistic replica.

## Deliver

- Give the direction a concise title and a two- or three-sentence creative rationale.
- Invoke `palette-picker` with ordered uppercase `#RRGGBB` colors and a `reason` capturing the narrative arc and assumed medium.
- Keep the result editable and offer iteration through concrete dimensions such as warmer, stranger, quieter, more cinematic, or more restrained.

Referenced files: 1

View saved version →

---
name: extract-image-palette
description: Extract a purposeful editable color palette from an attached photo, logo, screenshot, artwork, mood board, or other visible reference. Use when users ask for colors from an image, a visual-reference palette, dominant or accent colors, or a palette inspired by an attachment. Do not trigger when no image is available or when the user wants the image edited rather than its colors analyzed.
---

# Extract a palette from an image

## Inspect the reference

1. Confirm that the target image is available in the conversation. If several images are present, infer the intended one from the prompt or ask which to use.
2. Analyze the visible image directly. Do not invent precision beyond what rendering, lighting, compression, or transparency permits.
3. Distinguish visually important colors from merely frequent pixels. Give weight to focal subjects, characteristic accents, and the user's intended use.

## Select colors

- Choose a compact set, normally five to eight colors, spanning dominant, supporting, neutral, dark, light, and accent roles where the image supports them.
- Merge colors that are perceptually redundant. Preserve a small but meaningful accent even when it occupies little area.
- Prefer representative, usable colors over noisy highlights, deep photographic shadows, anti-aliased edge pixels, or compression artifacts.
- If the user requests literal sampling, stay close to visible source colors. If they request inspiration, allow restrained adjustments for harmony and usability and say that the palette is interpretive.
- For multiple images, identify common threads instead of allocating an equal quota to every image.

## Deliver

- State whether the result is extracted closely or interpreted, and label the colors by visual role or source element.
- Invoke `palette-picker` with ordered uppercase `#RRGGBB` colors and a `reason` naming the reference and selection approach.
- Do not claim exact sampled pixel values unless a deterministic sampling tool actually supplied them.

Referenced files: 1

View saved version →

---
name: generate-design-tokens
description: Convert a supplied or currently selected palette into semantic design tokens, color roles, and implementation-ready CSS variables, Tailwind theme values, or design-token JSON. Use for naming palette colors, creating primitive and semantic color layers, or preparing colors for a design system. Do not use to invent a broad brand identity, extract image colors, or design an entire UI without an input palette or seed.
---

# Generate design tokens

## Establish the target

- Identify the source palette, target platform or format, theme count, naming convention, and required states.
- If no format is specified, provide a small platform-neutral token model and CSS custom properties.
- Preserve user-provided color values unless derivation is requested. Explain any generated tints, shades, or replacements.

## Model the tokens

1. Separate **primitive tokens** (value-oriented names such as `blue-600`) from **semantic tokens** (purpose-oriented names such as `color-action-primary`).
2. Create only tokens supported by a real use case. Avoid huge interpolated scales by default.
3. Cover the relevant roles: canvas, surface, elevated surface, text, muted text, border, primary action, accent, focus, and requested status states.
4. Keep semantic names stable across light and dark themes; change their mapped primitives rather than their meaning.
5. Do not use transparency to conceal an unknown composited result. When alpha is necessary, document the expected backdrop.
6. Flag high-risk foreground/background pairs for contrast verification. Do not assert WCAG conformance without calculated ratios.

## Produce artifacts

- Show a concise role-to-value mapping and then output the requested code format in a fenced block.
- Keep names syntactically valid for the target and use one authoritative value per primitive.
- Invoke `palette-picker` with the unique source and derived colors that benefit from visual editing. Order foundational neutrals first, then brand/action and status colors; explain this ordering in `reason`.
- When the user edits the palette later, remap tokens by role rather than by array position alone.

Referenced files: 1

View saved version →

---
name: harmonize-palette
description: Diagnose and repair an existing color palette that feels clashing, muddy, repetitive, unbalanced, too warm or cool, or otherwise incoherent while preserving its intent and specified anchor colors. Use for making supplied colors more cohesive or revising a current palette. Do not trigger for creating a palette from scratch unless the user provides a clear starting palette.
---

# Harmonize a palette

## Diagnose before changing

1. Identify the supplied or current palette and any colors that must remain unchanged.
2. Infer the intended mood and use from the prompt. If neither is clear, optimize for general visual cohesion without pretending to know a specific application.
3. Locate the smallest set of problems: competing undertones, uneven lightness, excessive saturation, redundant hues, weak anchors, or an accent with the wrong visual weight.

## Revise conservatively

- Preserve anchor colors exactly unless the user permits changes.
- Change as few colors as needed. Prefer modest hue, saturation, or lightness adjustments over replacing the palette wholesale.
- Maintain useful separation between colors; harmony does not mean making every swatch similar.
- Preserve the requested temperature, energy, and contrast. When goals conflict, prioritize explicit user constraints and name the tradeoff.
- Do not claim accessibility based on harmony. Flag any intended text/background combinations for separate contrast checking.

## Show the revision

- Summarize the diagnosis and describe material changes with before-and-after hex values.
- Invoke `palette-picker` with the revised ordered uppercase `#RRGGBB` colors and a `reason` describing preserved anchors and the harmonization strategy.
- If multiple directions are equally valid, choose the best-supported one first rather than overcrowding one palette; mention that alternatives can be generated on request.

Referenced files: 1

View saved version →

---
name: plan-interior-palette
description: Plan a practical interior color palette for a room or property using its function, orientation, natural and artificial light, dimensions, fixed finishes, furnishings, and desired atmosphere. Use for walls, trim, ceilings, cabinetry, upholstery, and decor color schemes. Do not use for exterior architecture, product UI themes, or brand palettes.
---

# Plan an interior palette

## Read the room

- Identify room type, location or hemisphere when relevant, window orientation, daylight level, artificial lighting, size, fixed materials, furniture to retain, and desired mood.
- Treat photographs as lighting-dependent evidence, not calibrated color measurements.
- Ask about a missing fixed finish or lighting condition only when it would substantially alter the recommendation; otherwise state assumptions.

## Build the scheme

1. Choose a dominant field color, supporting color, trim or ceiling direction, grounding neutral, and one or two accents.
2. Coordinate undertones with immovable materials such as flooring, stone, tile, countertops, and timber. Avoid mixing conflicting warm and cool neutrals accidentally.
3. Account for light: low or cool daylight can flatten chilly colors; strong warm light can intensify warm hues. Present this as guidance, not a guarantee.
4. Consider proportion and placement. A successful accent object color may be oppressive across four walls.
5. Keep adjacent rooms and sightlines coherent when the user describes them.
6. Distinguish digital hex approximations from purchasable paint specifications. Recommend physical samples viewed at different times of day before purchase; never fabricate manufacturer color matches.

## Deliver

- Map each color to a surface or material and give a short reason for the complete scheme.
- Invoke `palette-picker` with ordered uppercase `#RRGGBB` approximations, from dominant architectural colors through accents, and explain the room assumptions in `reason`.

Referenced files: 1