Build traffic-light RAG palettes — pick hex codes, export CSS variables, JS tokens, or Tailwind config for any process dashboard
- Runs locally
- Category Color & Design
- Best for Moving from a visual idea to reusable color values.
Presets
Palette
Preview
Export
:root {
--status-red: #ef4444;
--status-red-text: #000000;
--status-amber: #f59e0b;
--status-amber-text: #000000;
--status-green: #22c55e;
--status-green-text: #000000;
}What this tool does
RAG (Red–Amber–Green) status colours are the backbone of every project dashboard, KPI report, and ops review deck. This tool gives you a structured workspace to define, preview, and export your RAG palette in one place.
Choose from five battle-tested presets — Classic Traffic Light, WCAG Accessible (contrast-verified), Soft Pastel, Material Design, and Corporate — or drop in your own hex values. Each status swatch shows its WCAG 2.1 contrast ratio so you can instantly confirm that badge text will pass AA on the background you've chosen. Toggle "Extended palette" to add Blue (info/planned) and Grey (unknown/N/A), covering every state a mature dashboard needs.
Export the finished palette in the format your stack actually uses: CSS custom properties, plain CSS classes, a JavaScript/TypeScript object, a Tailwind `colors` config block, or a Markdown hex table ready to drop into a wiki. Every format generates text-colour tokens alongside the background so you get a self-contained, copy-paste snippet. Click any individual swatch to copy its hex in one tap, or copy the whole code block with one button.
The palette you build rides in the URL query string, so sharing a link with a colleague lands them on the exact same palette — including any custom hex values you've dialled in. 100% browser-side; no colours leave your tab.
Tool details
- Input
- Text + Numbers
- The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
- Output
- Live result + Copy + Preview
- The result area focuses on usable output, with copy, download, or preview actions when supported.
- Privacy
- Browser-side processing
- The main tool logic does not call an external API, so inputs normally stay in the current tab.
- Save / share
- Shareable URL state
- Key settings are encoded in the URL so another person can reopen the same setup.
- Performance budget
- Initial JS <= 14 KB
- No WASM budget is declared, keeping the tool quick to open on mobile.
- Best fit
- Color & Design · Operations
- Category and role tags drive related tools, internal links, and quick fit checks.
How to use
-
1. Input
Paste or drop your content into the tool panel.
-
2. Process
Click the button. All processing is local in your browser.
-
3. Copy / Download
Copy the result or download to disk in one click.
How RAG Status Color Generator fits into your work
Use it while choosing, checking, converting, or documenting colors for real interface work.
Color jobs
- Moving from a visual idea to reusable color values.
- Checking contrast and accessibility before a UI ships.
- Keeping brand, design, and implementation color decisions aligned.
Color checks
- Verify contrast against the actual background, not just a sample swatch.
- Check dark and light themes separately when both exist.
- Copy the final format your design system or codebase expects.
Good next steps
These links move the current task into a more complete workflow.
- 1 Color Contrast Checker Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade. Open
- 2 Color Shades Generator Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only Open
- 3 Color Converter HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only Open
FAQ
Tool combos
Folks in your role tend to reach for these alongside this tool.
- Add Days to Date Calculator Add or subtract days, weeks, months, and years from any date — plus a business-day mode that skips weekends. Runs entirely in your browser.
- AI Eval Planner Generate eval cases, pass criteria, and edge cases from an AI feature, risks, and user path.
- Annulus Area Calculator Area between two concentric circles — A = π(R² − r²), ring width, inner and outer circumference, solve backwards from area — browser-only
- Apache Cheatsheet Apache HTTP Server cheatsheet for httpd.conf, VirtualHost, .htaccess, mod_rewrite, SSL, proxying, auth, headers, and logs.