Realtime Colors
Preview five colour roles and fonts on a live site, export shadcn or Tailwind tokens
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.
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.
- URL-encoded palette state
- shadcn and Tailwind token export
- live AA/AAA contrast readout
- OKLCH output
- Figma plugin and VS Code theme editor
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
