Palette & Contrast
Five editable colours with hex codes, a text preview on each, and whether the text is readable.
V2 · 0:09 demoPlay
Full screenV2 · 8 KB · one HTML file
Prompt
Build a colour palette tool with five editable colours1 What it does, their hex codes4 What must happen, and a clear preview of text on each colour4 What must happen.Exactly as it was typed.
- What it doesWhat it is, and how many colours.
- Who it’s forThis prompt leaves “who it’s for” to the AI.
- How it should feelThis prompt leaves “how it should feel” to the AI.
- What must happenHow each colour is written and changed. What you see for every colour.
What this teaches
Name the pieces of the tool, then ask for the check you care about, and it works it out for you.
- "five editable colours, their hex codes" says how many and how you change them.
- "a clear preview of text on each colour" asks you to see it, not only read numbers.
- The change asks for a readability check; the page measures each pair against the 4.5 to 1 contrast guideline.
Changes
Show whether each text and background pair has enough contrast to read.Change request · V1 → V2
What changed
- Each colour shows its contrast ratio with the sample text, and whether it is enough to read (4.5 to 1).
What stayed: The five colours, their pickers, hex codes and previews work as before.
Try a change
Each one starts your own draft in the Studio. Nothing is built until you press Build.
How it was made
- V1 Built on Oct 14, 2026 · Direct · Verified on the third try · 120 s · Tested on desktop and phone · 1 AI Credit
- V2 Changed on Oct 14, 2026 · Verified on the second try · 61 s · Tested on desktop and phone · one change, no AI Credits
Known limitations
- It checks normal-size text only, against the 4.5 to 1 guideline.
- Hex codes must be six digits; a three-digit code like #ABC is not accepted.