The Vibeary — round-up

Best colour palette tools and references

Most colour problems are not solved by another palette generator — they are solved by understanding shade ramps, contrast and perceptual lightness. So this list mixes both: the generators and scale builders you will use on a Tuesday afternoon, and the small number of articles that genuinely change how you choose colour. Between them you can build an accessible ramp from a single brand hue, sanity-check contrast against WCAG, find colour-blind-safe qualitative palettes for charts, and stop reaching for lighten() and darken() functions that quietly destroy saturation.

What earned a place

Produces a usable ramp or system, not one pretty five-swatch card
Takes accessibility and contrast seriously
Free to use, with values you can export as tokens
Reference material is written by practitioners who ship

24 picks from the library

01
Accessible Color Systems
Stripe engineering post on building a colour system that guarantees contrast ratios while preserving brand hue relationships.
Why it made the list: Production account of solving contrast at scale from a team known for craft
Color theoryfreeStripe design teamstripe.com
02
apcach
JavaScript library that generates colors from a target APCA contrast value instead of picking a color and checking after.
Why it made the list: Inverts the contrast workflow: declare the contrast, get the color. Rare idea.
ColorMITEvil Martiansevilmartians.com
03
Atmos Playground
Color system builder that generates full tonal scales from a few seeds and checks WCAG and APCA across every pairing.
Why it made the list: Treats color as a system with a contrast grid, not a pretty five-swatch strip.
ColorfreemiumAtmosatmos.style
04
Color in UI Design: A Practical Framework
Framework for choosing and applying UI colour: neutrals, one accent, saturation ranges and when to break the rules.
Why it made the list: Actionable constraints rather than colour-wheel theory; works immediately in Figma
Color theoryfreeErik Kennedy (@erikdkennedy)learnui.design
05
Colorable
Minimal matrix that cross-checks every color in a palette against every other for WCAG contrast in one glance.
Why it made the list: The whole-palette contrast grid in one screen, from a design-systems veteran.
ColorMITBrent Jackson (@jxnblk)colorable.jxnblk.com
06
ColorBox
Lyft's tool for generating color ramps by curve-editing hue, saturation and luminosity independently across the scale.
Why it made the list: Curve-based scale authoring from a real design team; still unmatched for control.
ColorfreeLyft Designcolorbox.io
07
colorgrad-js
Rust-and-WebAssembly colour gradient library exposing scientific colormaps and custom gradient construction to JavaScript.
Why it made the list: Viridis, cividis and friends in JS at wasm speed
Colour scalesMITNor Khasyatillah (@mazznoer)github.com
08
colormap-shaders
GLSL shader implementations of over 100 named colormaps for use in WebGL and GPU visualisations.
Why it made the list: Colormaps as shader functions — no lookup texture, no CPU round trip
Colour scalesMITkbinani (@kbinani)github.com
09
Colormason
Agent skill that turns one brand hex into OKLCH ramps, WCAG-checked semantic tokens, and Tailwind or CSS output offline.
Why it made the list: Deterministic, zero-dependency palette builder agents can run without APIs.
ColorMIT@vladzimagithub.com
10
Colors.lol
Curated overly descriptive color palettes with names and hex codes, built as a design-inspiration source rather than a generator.
Why it made the list: Personality-driven curation; a palette source that doesn't feel algorithmically generic.
ColorfreeAdam Fuhrer (@adamfuhrer)colors.lol
11
Colourco.de
Pick colors by dragging across a hue field and instantly get monochromatic, analogic and triadic sets with lightness control.
Why it made the list: Direct-manipulation color picking that feels like a physical instrument.
ColorfreeToni Wagnercolourco.de
12
Coolors
Spacebar-driven palette generator with 10M+ browsable palettes, image colour extraction, contrast checking, gradient tools and palette mockup previews.
Why it made the list: Fifteen years of solo maintenance and still the fastest palette loop on the web.
ColorfreemiumFabrizio Bianchi (@fabrizio_bianchi)coolors.co
13
css.gui
Visual, parametric CSS editing environment that treats every CSS property as an editable, themeable design parameter.
Why it made the list: Parametric approach to CSS that nothing else has replicated since.
Theming & colorMITComponents AI (@components-ai)github.com
14
Data Color Picker
Generates sequential and diverging palettes for charts, interpolating in a perceptual space so steps read as even.
Why it made the list: Chart palettes done right; most designers hand-pick these badly and never notice.
ColorfreeErik Kennedylearnui.design
15
Desktop Colors
Archive of every solid desktop background colour shipped by classic operating systems: 194 colours across 22 platforms, 1985 to 2024.
Why it made the list: Obsessive colour archaeology; a real reference palette nobody else has assembled.
Colorfreevlowdesktopcolors.com
16
Duo
Two-color pairing tool that shows every combination rendered as real UI so you can judge legibility, not swatches.
Why it made the list: Single-purpose, single-dev, and better at its one job than any big suite.
ColorfreeAlex Pateduo.alexpate.com
17
Ember
Terminal, chart, heatmap and UI palettes engineered to stay distinguishable after aggressive Redshift or Night Shift warm-screen filtering.
Why it made the list: Solves a colour problem nobody designs for: palettes that survive night-mode filters.
ColorMITcarpdiemgithub.com
18
FarbVelo
Generative random-color explorer with perceptual distance controls, color-blindness preview and a genuinely playful interface.
Why it made the list: The most fun-to-use color toy on the web and quietly rigorous underneath.
ColorfreeDavid Aerne (@meodai)farbvelo.elastiq.ch
19
Harmonizer
Evil Martians generator that produces color scales with matched perceptual contrast across hues using OKLCH and APCA math.
Why it made the list: Solves the 'yellow looks wrong at step 500' problem almost nobody else solves.
ColorfreeEvil Martiansharmonizer.evilmartians.com
20
How to pick the least wrong colors
Long essay deriving an algorithm for generating accessible, perceptually even colour palettes, with interactive demos.
Why it made the list: Rare piece that combines perceptual colour science with shipping design-system constraints
Color theoryfreeMatthew Ström (@ilikescience)matthewstrom.com
21
Huemint
Uses a machine-learning model trained on real designs to generate palettes constrained to a chosen layout or brand context.
Why it made the list: Generates palettes for a specific layout, so output is usable not just pretty.
ColorfreeJack Qiaohuemint.com
22
Huetone
Desktop-grade web app for building color scales in LCh with live APCA contrast readouts and Figma-ready export.
Why it made the list: The tool design-system leads actually use to defend a color ramp with numbers.
ColorMITAlexey Ardov (@ardov)github.com
23
InclusiveColors
Builds custom palettes in the HSLuv color space with live WCAG and APCA contrast checks, exporting to Tailwind, CSS and Figma.
Why it made the list: HSLuv authoring plus both contrast algorithms in one editor; exports straight to tokens.
ColorfreeSean Wilson (@seanw_org)inclusivecolors.com
24
Khroma
Trains on colors you personally like, then generates unlimited palettes, gradients and type samples in your own taste.
Why it made the list: A palette generator tuned to your eye rather than a global average.
ColorfreeGeorge Hastingskhroma.co

Questions

How many shades should a UI colour ramp have?: Nine to eleven steps per hue covers almost every interface need: backgrounds, borders, text and states. Define them once as tokens rather than deriving them per component.
What is the best colour space for UI palettes?: OKLCH, where your tooling supports it. It keeps perceived lightness consistent across hues, which is exactly what a ramp needs.

All round-ups Search all gems Newest additions