Realtime Colors
Preview five colour roles and fonts on a live site, export shadcn or Tailwind tokens
Tier A · StrongColor ToolToolGeneratorrealtimecolors.com
Realtime Colors puts five named colour variables — Text, Background, Primary, Secondary, Accent — plus a Google Fonts heading/body pair onto a working example site (landing page, dashboard and blog post) so you judge a palette in situ rather than as swatches. It has a built-in AA/AAA contrast indicator, harmony randomisation (Monochromatic, Analogous, Complementary, Split Complementary, Triadic, Tetradic), colour locking and a type-scale slider from 1.067 to 1.618. Export covers CSS variables, SCSS, Tailwind config and framework presets for shadcn, DaisyUI, NextUI, Bootstrap, Material UI, Chakra UI, Skeleton UI, Vuetify and Flutter, in HEX, RGB, HSL, OKLAB or OKLCH. The whole state encodes into the URL, and there is a Figma plugin and a VS Code theme editor. Built by @Juxtopposed and free.
For an agent
The killer feature for an agent is that the entire state is a URL — https://realtimecolors.com/?colors=e6e4ec-0b0420-c89ff4-1c1334-d3f980 in Text-Background-Primary-Secondary-Accent order, with an optional &fonts= pair — so you can hand a human a one-click preview of a palette you generated, and read one back out of a link they paste. Pair it with Huemint: generate constrained colours there, paste them here to sanity-check contrast and type, then take the shadcn or Tailwind export straight into the theme file. Note the public repo is the 2023 v1 and has not been touched since, so treat the live site, not GitHub, as the source of truth, and the CC BY-NC-ND terms cover the site itself, not the colours you pick.
Why it is here. It closes the gap between choosing a palette and seeing whether it survives real UI, and it emits the exact token formats that modern stacks consume, which is the step most colour tools skip.
Facts
- License
- CC BY-NC, Source available
- Pricing
- Free
- Framework
- React, Vue, Flutter, Vanilla JS
- Styling
- Tailwind CSS, CSS custom properties, Sass / SCSS, Vanilla CSS
- Distribution
- Web app / online tool, Figma plugin, GitHub repository
- Platform
- Web
- Content type
- Design tokens / theme files, Code
- Agent readiness
- Exports design tokens, Copy-paste ready code, Structured documentation
- Accessibility
- Contrast checked, WCAG 2.x AA, WCAG 2.x AAA
- Maturity
- Actively maintained
- Pricing detail
- Free forever; the Pro and Enterprise rows on the site are placeholders priced at $0.00/month.
- GitHub stars
- 926
Helps you build
3Templates
2Notable for
- URL-encoded palette state
- shadcn and Tailwind token export
- live AA/AAA contrast readout
- OKLCH output
- Figma plugin and VS Code theme editor
Provenance
Verified 2026-08-16. HTTP 200. https://www.realtimecolors.com/, https://www.realtimecolors.com/docs/about-realtime-colors, https://www.realtimecolors.com/docs/sharing, GitHub API for juxtopposed/realtimecolors
Also in Color
6- Coolors · Palette generator with 10M+ schemes, contrast checker and Tailwind export
- Grabient · Cosine-gradient generator; CSS/SVG/PNG export and a real llms.txt
- Leonardo · Adobe's contrast-first colour system generator, with an npm module behind it
- OKLCH Color Picker · Pick and convert colors in OKLCH with P3 and Rec2020 gamut warnings
- Color Hunt · ~4,200 curated 4-colour palettes, filterable by 18 colours and 31 moods
- Huemint · ML palette generator driven by a contrast matrix, with an open POST API