Color Palette Generator

[ms-shashank]

Current file: app/src/lib/tools/color-palette.ts
Current model: kimi-k2.5
Current approach: Single prompt asking for palette with HEX codes, CSS variables, Tailwind config, and an HTML preview. No color theory validation, no contrast checking, no palette harmony verification.

Problems with current approach:

• Generated colors may not actually form a harmonious palette (no validation against color theory).
• Contrast ratios between text and background colors are not checked.
• CSS variable names may be inconsistent.
• HTML preview may have rendering issues.

Upgrade plan:

Step	Agent	Action
1	Palette Generator	Generate a color palette based on the description, style, and color count. Output raw HEX values with role assignments.
2	Color Theory Validator	Programmatic: Validate palette harmony using colormath or colour library. Check if colors form a valid complementary, analogous, triadic, or split-complementary scheme. Calculate WCAG contrast ratios for text/background pairs.
3	Format Compiler	Programmatic: Generate CSS :root variables, Tailwind config, and HSL/RGB conversions from the validated HEX values. This guarantees format consistency.
4	Preview Builder	Programmatic: Generate the HTML swatch preview page from the validated palette using a template. This avoids LLM-generated HTML issues.
5	Refinement Agent	If contrast ratios fail WCAG AA (4.5:1 for normal text), suggest adjusted colors and regenerate.

• You are free to enhance the agents stacks in the above plan layout, the above one is just for reference. You can enhance more if needed.

Model suggestions to start with:

• Step 1: Try kimi-k2.6 (current model, good at creative tasks with vision). Also try llama-3.3-70b or qwen-3-32b.
• Step 5: Try deepseek-v3.2 for lightweight color adjustment suggestions.
• Since most steps are programmatic (Steps 2, 3, 4), model selection has less impact here. Focus engineering effort on the color theory validation library.

Model Selection Guidance

• You are free to pick any model from the Oxlo catalog based on your own testing and evaluation.
• The Models suggestions above, not mandates. Try them first, and if they do not meet the accuracy target, experiment with alternatives.

Compare against: GPT 5.3 Thinking & Claude Sonnet 4.6.

Acceptance criteria:

• All generated palettes pass color harmony validation.
• Text/background combinations meet WCAG AA contrast ratio (4.5:1 minimum).
• CSS variables and Tailwind config are syntactically valid (programmatically generated).
• HTML preview renders correctly.
• Overall quality matches or exceeds GPT 5.3 Thinking & Claude sonnet 4.6 on test cases.
• Overall accuracy at 80%+.

[A-VISHAL]

• Upgraded the tool from a single-prompt approach to an agentic pipeline architecture.
• Added image-based palette extraction using KMeans clustering.
• Implemented WCAG contrast validation and color harmony checks programmatically.
• Added automatic palette refinement for failed accessibility cases.
• Generated deterministic CSS variables, Tailwind config, and HTML previews programmatically.
• Optimized frontend performance with image compression, request timeouts, and non-blocking canvas rendering.
• Added interactive image hover support for pixel-level color inspection.
• Improved overall palette consistency, accessibility, and rendering reliability.