Free Color Palette Generator.

Candidate color palettes with checked contrast ratios.

Develop a role-based palette with exact values and contrast checks for the places you intend to use it.

Install WebAct — use it free See the completed example ↓

Chrome extension + account required.
25 free automation tasks/month across tools. Browser-provider limits apply.

WHAT TO HAVE READY

Brand attributes and accessibility constraints.

YOUR STARTING POINT

A task you can make yours.

Edit the prompt, then copy it.

Copy it here. Paste it into WebAct when you are ready.

This page prepares your prompt. The task runs in WebAct.

Make the task yours.

Review the prompt above. Add your goal and any requirements that matter.

Bring it to WebAct.

Open WebAct, paste the task and provide the data and rules. Review any proposed calculation or code action before approving it, then check a known example.

Check the useful part.

Check formulas, code and calculations against known inputs in the appropriate runtime. Review actions before execution and keep the original data available.

A PRACTICAL GUIDE

How to use the Color Palette Generator.

A palette should assign colors to roles and test actual foreground-background pairs. A visually pleasing collection does not guarantee readable text or accessible interactive states.

Make the workflow fit your task.

Choose colors for specific roles, then provide exact values and test the intended foreground-background pairs. Include interactive states and alternative surfaces where needed. Separate aesthetic preference from measured contrast and review the palette in real components.

What you provide: Brand attributes and accessibility constraints.
What you get: Candidate color palettes with checked contrast ratios.

See the input and the result.

Illustrative input and output · a teaching example, not a live WebAct run

Example input

Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.

Completed example

Background: #fff7ed
Body text: #172554 — contrast on background ≈ 13.84:1
Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1
Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1
These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.

Download this example

Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.

Decisions and troubleshooting.

Does a high-contrast text pair guarantee the entire interface is accessible?

No. Other states, controls and non-color cues also need review. Treat pair testing as one part of interface evaluation.

Why does an accent color work decoratively but fail for small text?

The text/background contrast may be insufficient. Assign the color to an appropriate role or adjust the pairing.

Reference for this workflow.

W3C: minimum text contrast

Try it with your own source.

Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.

Customize and copy the task ↑

BEFORE YOU BEGIN

Using WebAct.

The prompt and example are available here. Run your task in the WebAct Chrome extension.

Is this tool free?

You can copy and edit the prompt here for free. To use it with WebAct, install the Chrome extension, create and verify your account, and connect an available browser ChatGPT session. The Free plan includes 25 user-started automation tasks per calendar month, shared across tools. Ordinary browser Chat is separate; provider limits apply.

Learn about shared context in our privacy policy and choosing Chat or Task.

FROM A PROMPT TO YOUR OWN WORK

Bring the task to your page.

Install WebAct, add your source material and make the result yours.

Install WebAct