Red color palettes: 14 complete systems, not swatch strips
Red is the highest-stakes primary: it doubles as an error color, so a red-led interface has to separate brand red from destructive red or every button looks like a warning. The palettes below resolve exactly that, with distinct primary and destructive tokens in both modes.
Terminal Ember Dark
A near-black technical interface system with a single hot red-orange signal color, hairline-ruled sharp-cornered panels, and uppercase monospace micro-labels.
Light
Dark
dark · technical · terminal
Full kit & exportsChromatic Event Grid
A Swiss-modernist system built on full-bleed alternating color bands and oversized condensed grotesque typography: sharp, grid-disciplined, all-caps, and flat, for listing and index-style platforms.
Light
Dark
editorial · swiss-modernism · condensed-grotesque
Full kit & exportsAmber Sportswear Editorial
Bold retail brand kit built on warm amber content panels, pitch-black display typography, and orange-red CTAs for a high-contrast editorial identity.
Light
Dark
retail · sportswear · editorial
Full kit & exportsTomato Blush Editorial
A bold Swiss-editorial kit anchored in vermillion red and soft pink, built for typographic, gallery-grade, grid-driven interfaces.
Light
Dark
editorial · swiss · grotesk
Full kit & exportsCobalt Vermilion Poster
A two-color poster system on deep cobalt blue and fire-engine red, where ultra-condensed uppercase type at poster scale is the composition itself.
Light
Dark
music · poster · editorial
Full kit & exportsTerracotta Analog Hardware
A warm terracotta-and-deep-brown alternating-surface system for boutique hardware, drawing on analog instrument culture and intimate lifestyle photography.
Light
Dark
analog · terracotta · warm
Full kit & exportsContra Bureau
An editorial design kit pairing warm cream surfaces with a single confident vermilion accent, oversized display-serif headlines, and clean sans body text for high-contrast brand work.
Light
Dark
editorial · bold · serif
Full kit & exportsCalifornia Retro: 70s·80s Spirit
A warm retro lifestyle identity built from alternating full-bleed bands of forest green, terracotta, parchment cream, and amber gold with oversized condensed uppercase type and no white canvas.
Light
Dark
retro · 70s · 80s
Full kit & exportsVermilion Architecture Panels
A retro graphic identity with alternating vivid red, deep maroon, and warm cream full-bleed panels, oversized uppercase display type, and a flat print-editorial aesthetic.
Light
Dark
retro · 70s · brand-identity
Full kit & exportsVermilion Minimal Studio
A minimal editorial fashion-tech kit: a vivid orange-red accent on a near-white canvas, oversized lowercase display type, and 0rem geometry.
Light
Dark
editorial · fashion · minimal
Full kit & exportsCharcoal Vermilion Automotive
A dark-native automotive editorial system on near-black charcoal surfaces with vivid orange-red feature cards, full-bleed photography, and a mixed-size panel grid.
Light
Dark
automotive · editorial · dark
Full kit & exportsOrange Athletic Calendar
Bold editorial sports-data kit anchored by a vivid vermillion-orange on clean cool-neutral surfaces.
Light
Dark
athletic · bold · editorial
Full kit & exportsPastel Curriculum
A relaxed, playful learning kit built on alternating full-bleed pastel section cards over a cool off-white canvas.
Light
Dark
pastel · editorial · playful
Full kit & exportsTomato Bracket Editorial
A bold alternating-surface editorial system on tomato-red, blush-pink, and cream bands with oversized grotesque display type and bracket-notation interactivity.
Light
Dark
editorial · brutalist · swiss-grotesque
Full kit & exportsWhy a palette needs roles, not just colors
A strip of five hexes answers the easy question (which red?) and skips the hard ones: what color is text on it, what surface sits behind it, what happens in dark mode, what do disabled states use. Those unanswered questions are why palettes from generator sites fall apart two screens into a real product. A roled palette answers all of them up front, which is what makes it safe to hand to a teammate or an AI builder.
Deeper reads: semantic color tokens explained, building a dark mode palette and choosing a SaaS color palette.
Looking for a different color?
Red palette FAQ
What makes these red color palettes different from a hex list?
Every palette here is a roled system, not a strip of pretty colors: the red is resolved against its background, text, muted, and border colors in BOTH light and dark mode, so applying it can't produce unreadable text or a broken dark theme. Each palette belongs to a full design kit with fonts, spacing, and rules, exportable as CSS variables, Tailwind themes, DTCG tokens, a shadcn registry item, or an agent-ready DESIGN.md.
Are these red palettes free to use?
Yes. All 14 palettes on this page come from free kits: copy any hex code directly, or open the kit for the complete token system and exports at no cost, no account needed.
How do I apply one of these palettes to my project?
Click any swatch to copy its hex, or open the full kit and export the whole system in your stack's format: CSS variables, Tailwind v3/v4 theme, DTCG tokens, or a shadcn registry item you install with one command. Building with an AI tool? Each kit also exports as a paste-ready prompt for Lovable, v0, Bolt, and Replit, so the palette survives generation instead of drifting back to defaults.
How do I use red as a brand color without everything looking like an error?
Separate the jobs at the token level: a brand red for primary actions and a visibly different red (usually deeper and less saturated) for destructive ones, then never use the brand red for warnings. Every red palette above ships both tokens plus the muted and surface colors that keep long pages from feeling alarmed.