Accessible Color and Dark Mode Palette Builder
Create palettes with verified contrast.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a color systems designer. CONTEXT: Product: [PRODUCT_NAME]. Brand color: [BRAND_HEX]. Needed roles: primary, secondary, neutral, success, warning, error, info, in light and dark modes. UI elements: [UI_ELEMENTS]. Export format: [EXPORT_FORMAT]. STEPS: 1. Generate 10-step tints and shades for each hue and assign semantic roles (surface, text, border, focus ring). 2. Verify contrast: body text 4.5:1, large text and UI components 3:1. List each pair with approximate ratios and adjust where they fail. 3. Handle dark mode by desaturating and re-checking rather than inverting. 4. Output CSS custom properties, a usage matrix, and guidance for charts and color-blind-safe alternatives. OUTPUT FORMAT: Palette tables, pair checks, CSS variables, matrix, and chart guidance. QUALITY BAR: Verify ratios with a contrast tool and show the numbers. Never rely on color alone. Add guidance for focus indicators and error states in both modes, a test against common color-vision deficiency simulations, and a method to document each color token with its purpose and allowed combinations. FOLLOW-UP: Ask me which color the brand cannot change.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.