For UI and UX designers
Color for ui & ux design
Interface color is a contrast problem before it is a taste problem. These starting points generate in OKLCH so lightness steps look even, and every path below ends in a WCAG check, a color-blindness preview, and a token export, because a palette that fails those was never finished.
Starting points
Three starter palettes, generated live
Each set is produced by the palette engine, not picked from a mood board. Open one in the generator to lock what fits and reroll the rest.
Product neutral + accent
Because muted surfaces leave room for one working accent; most product UI is this shape.
Confident brand triad
Because three spaced hues give brand, action, and info roles without collisions.
Dark mode base
Because dark surfaces with chroma kept low, the usual failure point of dark themes.
The shelf
Working colors of the field
The named colors UI and UX designers reach for, each resolved against the 31,912-name registry. Tap a swatch to copy the hex; open the name for the full page with codes, palettes, and contrast data.
- Charcoal #343837 the workhorse text color when pure black feels harsh on light surfaces
- Slate #516572 secondary text and borders; blue-leaning gray that stays neutral on white
- Snow #FFFAFA an off-white surface that keeps cards separable from a pure white page
- Jet #343434 near-black for dark-mode surfaces that need depth without void
- Emerald #028F1E the default success green; separates from red for most color-blind users at this lightness
- Crimson #8C000F a danger red deep enough to pass AA on white at button size
- Amber #FFBF00 the standard warning hue; always pair it with an icon, not color alone
- Royal Blue #4169E1 the classic primary-action hue; check it against your visited-link color
- Teal #008080 an info or secondary-accent hue that avoids the overused default blue
- Lavender #B56EDC a soft selection or highlight tint for hover and focus fills
- Coral #FF7F50 a friendly accent for empty states and onboarding moments
- Mint #3EB489 a light success surface for banners and toast backgrounds
Speak the language
Terms this field runs on
-
Contrast ratio The number your text pairs live or die by: 4.5:1 for normal text, 3:1 for large text and UI parts. Full definition →
?
Contrast ratio
A number from 1:1 to 21:1 comparing the luminance of two colors. WCAG requires 4.5:1 for normal text (AA) to keep it readable for most people.Full glossary entry → -
OKLCH Design scales here: equal lightness steps in OKLCH look equal on screen, so ramps stop banding. Full definition →
?
OKLCH
A modern, perceptually uniform color space with three axes: lightness, chroma, and hue. Equal steps in OKLCH look equal to the eye, which makes it the best space for generating shade scales and harmonies.Full glossary entry → -
Accent color One per screen. The moment two elements shout in the accent, neither is the call to action. Full definition →
?
Accent color
A small, high-impact color used to draw attention: a button, a link, one throw pillow. Accents are usually the most saturated color in a palette.Full glossary entry → -
Neutral Your neutral scale does most of an interface's work; the brand color is the guest, not the house. Full definition →
?
Neutral
A low-saturation color like gray, beige, or off-white that supports brighter colors without competing. Every strong palette needs one.Full glossary entry → -
Color blindness About one in twelve men. If state is carried by hue alone, part of your audience never sees it. Full definition →
?
Color blindness
Reduced ability to distinguish certain colors, most often red and green. Designing with enough lightness contrast keeps interfaces usable for everyone.Full glossary entry →
The workflow
How UI and UX designers use this site
- 1 Generate in the right space Lock what you like, reroll the rest. Every mode computes in OKLCH, so a lightness ladder actually looks like a ladder. Palette generator →
- 2 Check every text pair Ratios for normal and large text, AA and AAA, with one-click nearest passing fixes when a pair falls short. Contrast checker →
- 3 Preview it as an interface The visualizer's web scene assigns your palette to surface, primary, and text roles, and its lens re-renders the scene through the three common types of color blindness. Palette visualizer →
- 4 Build the scale, export tokens A 50 to 950 scale from any base color, then CSS variables, Tailwind v4, or design-token JSON. Tint & shade scales →
Field notes
What goes wrong, and the fix
- Designing states by hue alone Success green and danger red converge for red-green color-blind users. Give states a lightness difference and an icon, then verify in the simulator. Simulate the pair →
- Saturated dark-mode surfaces Chroma that looks rich on light surfaces glows radioactive on dark ones. Dark themes want near-neutral surfaces with chroma saved for accents. Dark mode generator →
- Checking contrast at the end A palette locked before contrast checks tends to fail them, and the rework lands on deadline day. Run pairs through the checker while the palette is still liquid. Contrast checker →
FAQ
Common questions
- How many colors does a UI palette need?
- Fewer than most palettes carry: one or two brand hues, an accent, a semantic set (success, warning, danger), and a neutral scale doing most of the work. The tint and shade tool builds that neutral scale from any base.
- Should I design in OKLCH?
- For scales and ramps, yes: equal OKLCH lightness steps look equal to the eye, which HSL cannot promise. Every generator mode here computes in OKLCH and the converter shows the OKLCH value of any color.
- How do I check color blindness quickly?
- The generator has a color-blindness preview built in, and the visualizer applies the same simulation to a whole interface mock. If two roles merge under simulation, separate them by lightness, not just hue.
- What contrast ratio do buttons need?
- Button text follows the text rules: 4.5:1 for normal sizes, 3:1 for large text. The button's fill against its background needs 3:1 as a UI component. The contrast checker reports both readings for any pair.
- How do I turn a light palette into a dark mode?
- Do not invert it. Rebuild the neutral scale from a near-black base, drop surface chroma, and re-check every text pair, because ratios that passed on white rarely survive the flip. The dark generator mode starts from the right shape.
- How do I hand a palette to developers?
- As tokens, not screenshots: the generator exports CSS custom properties, a Tailwind v4 @theme block, and design-token JSON with the same values, so design and code stay one source.
Other work