Skip to main content
Prompts App Color Palette Harmonizer

developer creative template risk: low

App Color Palette Harmonizer

Act as a professional designer and photographer to analyze application colors, ensure consistency with given primary and secondary colors, smooth transitions, and aesthetically ple…

PROMPT 

Act as a professional designer and photographer with high visual intelligence. Your task is to analyze the colors used in the application and make them consistent according to the given primary color ${primaryColor} and secondary color ${secondaryColor:defaultSecondary}. Ensure that transitions between colors are smooth and aesthetically pleasing. Prefer the use of commonly accepted color combinations that look good together. Provide a detailed color palette recommendation and suggest adjustments to enhance visual harmony. Consider the business/domain of the application, ${businessDomain}, and ensure the color choices align with its goals and aims. If the application supports dark mode, ensure that necessary checks and adjustments are made to maintain consistency and aesthetics in dark mode as well.

INPUTS

primaryColor REQUIRED

Primary color for the application

e.g. #007BFF

secondaryColor

Secondary color for the application with default

e.g. #6C757D

businessDomain REQUIRED

Business or domain of the application

e.g. e-commerce

REQUIRED CONTEXT

  • application colors or UI screenshot

OPTIONAL CONTEXT

  • dark mode support details

ROLES & RULES

Role assignments

  • Act as a professional designer and photographer with high visual intelligence.
  1. Ensure that transitions between colors are smooth and aesthetically pleasing.
  2. Prefer the use of commonly accepted color combinations that look good together.
  3. Provide a detailed color palette recommendation and suggest adjustments to enhance visual harmony.
  4. Consider the business/domain of the application, ${businessDomain}, and ensure the color choices align with its goals and aims.
  5. If the application supports dark mode, ensure that necessary checks and adjustments are made to maintain consistency and aesthetics in dark mode as well.

EXPECTED OUTPUT

Format
structured_report
Constraints
  • detailed palette recommendation
  • smooth transitions
  • aesthetically pleasing
  • align with business domain
  • dark mode adjustments if supported

SUCCESS CRITERIA

  • Analyze colors for consistency with given primary and secondary colors.
  • Recommend detailed color palette.
  • Suggest adjustments for visual harmony.
  • Align colors with business domain goals.
  • Maintain consistency in dark mode if supported.

FAILURE MODES

  • May suggest inconsistent colors ignoring primary/secondary.
  • May propose clashing color combinations.
  • May neglect business domain alignment.
  • May overlook dark mode adjustments.

CAVEATS

Dependencies
  • ${primaryColor}
  • ${secondaryColor:defaultSecondary}
  • ${businessDomain}
  • Application colors/context to analyze
Missing context
  • Input format for the application's colors and design.
  • Exact output format for the color palette (e.g., hex codes, CSS variables).
  • Details on business domain goals if not fully provided via placeholder.
Ambiguities
  • Does not specify how the application's current colors are provided (e.g., screenshot, code, or description).
  • Unclear syntax and meaning of '${secondaryColor:defaultSecondary}'.
  • Vague phrasing of 'necessary checks and adjustments' for dark mode.

QUALITY

OVERALL
0.80
CLARITY
0.85
SPECIFICITY
0.75
REUSABILITY
0.95
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add 'Given [screenshot/CSS/code/description] of the application:' to specify input.
  • Define output structure: 'Output a JSON or table with hex codes, names, uses for primary, secondary, accents, backgrounds, and dark mode variants.'
  • Standardize placeholders, e.g., use '${secondaryColor}' with note on defaults.
  • Include examples: 'For a fintech app, use blues/greens for trust.'
  • Explicitly require light/dark mode palettes regardless of support.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER