Color Palette & Gradient Tools
The practitioner-vetted browser tools for picking, generating, and previewing color palettes and CSS gradients — sorted by the design stage each one is best at, from divergent exploration to in-context preview to production token export.
Color tooling is the single most-recurring design-resource category in Kevin's bookmark corpus: three separate high-engagement threads surface the same handful of sites. They are not interchangeable — each optimizes a different stage of color work. Pick by stage, not by popularity. Source: X/@AlbiaHossain, 2026-03-26
The tools
| Tool | Type | Best for |
|---|---|---|
| Coolors | Generator | Spacebar-cycling 5-swatch generation, image color picker, contrast checker, and an explore feed of community palettes. The default "give me a palette now" tool. |
| Color Hunt | Curated library | Hand-picked four-color palettes ranked by recency and likes — grab a finished vibe instead of generating one. |
| Kigen | UI generator | Token-oriented shade-ramp generator with Tailwind algorithm, contrast shift, shade count, SVG/Figma export, and CSS/Tailwind/Tokens/OKLCH output; see Kigen Palette Generator. |
| Happy Hues | In-context preview | Previews each palette applied to a real demo layout — background, headline, paragraph, button, button text, stroke, illustration main/highlight/secondary/tertiary roles — so you see how colors work in situ before designing. By Mackenzie Child; includes color-terminology (hue/tint/shade/tone) and color-psychology primers. |
| ColorHub | Palette library | 150+ pre-made palettes you can browse and plug into a project in a few clicks. |
| Grabient | Gradient | Editable CSS gradient generator with named presets (fjord, summer, mist), direction control, and copy-CSS. |
| Gradients (Colorion) | Gradient | Hand-curated CSS3 background gradients; change direction and copy the generated CSS straight to clipboard. |
| Realtime Colors | In-context preview + export | Preview palette and type together on a live mock site, then export CSS/Tailwind/SCSS/custom values including OKLAB/OKLCH options. |
Source: X/@AlbiaHossain, 2026-03-26 · Source: happyhues.co, https://www.happyhues.co/, 2026-06-12 · Source: coolors.co, https://coolors.co/, 2026-06-12 · Source: colorhunt.co, https://colorhunt.co/, 2026-06-12
Choosing by stage
- Divergent exploration — Color Hunt (curated), Coolors explore feed.
- Generate a system — Coolors, Kigen.
- See it in context before committing — Happy Hues, Realtime Colors. This is the step most generators skip: a palette that looks balanced as five swatches can collapse once one color carries a button and another a 60% background.
- Gradients — Grabient and Gradients (Colorion) for copy-paste CSS.
- Production / perceptual uniformity — move off RGB/HSL pickers into OKLCH (see OKLCH in Production) and export to tokens via Design Book / Design Tokens.
Batch-editable ramps
Meodai's RYBitten demo shows the production version of palette work: edit multiple named ramps through shared curve and hue controls, then export the result as SVG, CSS, or Tailwind config. The reviewed video shows hue variation, lightness, and saturation curves driving several ramps at once; that makes the tool valuable as a rules editor, not only a swatch picker. Treat batch-editable ramp controls as the bridge between exploratory color sites and token systems. Source: X/@meodai and local video review, 2026-07-03
Relationship to Kevin's stack
These tools live at ideation. For shipped design systems, a chosen palette should be re-expressed in OKLCH for perceptual uniformity and gamut control that general-purpose RGB/HSL generators lack (OKLCH in Production), then encoded as tokens. Design Book (by @meodai) is the bridge: it stores the rules behind a palette (highest-contrast text on a surface, most-vivid color that still passes WCAG) and renders to CSS variables, JSON, or W3 Design Tokens — the structured counterpart to the swatch-grabbing tools above. The two color generators with their own wiki pages are Kigen Palette Generator and (sibling tool from the same curator) Happy Hues.
The two single-tool sibling launches — Kigen (5,524 bookmarks) and Happy Hues (438 bookmarks) — both come from @Abmankendrick, who curates the UI/UX color beat. Source: X/@Abmankendrick, 2026-03-07
Timeline
- 2026-07-01 | Deep artifact review added the Happy Hues local frame: palette chips on the left, a live hero example, and role-labeled copyable colors for background, headline, paragraph, button, button text, and illustration roles. Hosted reference; no public package version. Source: X/@Abmankendrick, 2026-05-30; Source: happyhues.co, 2026-07-01
- 2026-07-03 | Added Meodai's RYBitten ramp-editor artifact as the batch-editable-ramp bridge from palette exploration to SVG/CSS/Tailwind token export. Source: X/@meodai, 2026-04-20
- 2026-06-29 | Promoted Realtime Colors to a dedicated page after Kevin asked to add it to the active design tool stack. Source: User request, 2026-06-29; https://www.realtimecolors.com/
- 2026-05-30 | Happy Hues surfaced by @Abmankendrick — palettes previewed on real website examples; built no-code in Webflow by Mackenzie Child. 318 likes, 438 bookmarks. Source: X/@Abmankendrick, 2026-05-30
- 2026-03-26 | @AlbiaHossain's practitioner color/gradient list (Coolors, Grabient, ColorHub, Color Hunt, Gradients-Colorion, ColorKit, plus raw link evidence for Kigen) — 1,671 likes, 1,647 bookmarks. Local image review found a generic grainy gradient card; treat the resolved links as the source authority. Source: X/@AlbiaHossain, 2026-03-26
- 2026-03-07 | Kigen palette generator shared by @Abmankendrick — 3,779 likes, 5,524 bookmarks; dedicated page at Kigen Palette Generator. Source: X/@Abmankendrick, 2026-03-07
- 2026-06-12 | Page created consolidating the recurring color-tool bookmarks into one stage-sorted directory. Source: x-bookmark-absorb, 2026-06-12