TED color palette
EntertainmentTED uses a bold, instantly recognizable red as its primary color, complemented by a minimalist palette of black, white, and neutral greys for clarity and impact. The color system emphasizes simplicity and directness, reflecting TED's focus on ideas worth spreading.
ted.comTED colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- TED RedPrimary230, 43, 30
- TED BlackSecondary0, 0, 0
- TED WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- TED WhiteBackground255, 255, 255
- TED Light GraySurface245, 245, 245
- TED Border GrayBorder224, 224, 224
Text
Three tiers of copy.- TED CharcoalText34, 34, 34
- TED Medium GraySecondary text102, 102, 102
- TED Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- TED Success GreenSuccess60, 179, 113
- TED Warning OrangeWarning255, 165, 0
- TED Error RedError211, 47, 47
- TED Info BlueInfo25, 118, 210
Use TED's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ted-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #E62B1E;
--success: #3CB371;
--surface: #F5F5F5;
--warning: #FFA500;
--secondary: #000000;
--text-muted: #A0A0A0;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
TED gray and neutral colors
The quiet part of the TED palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- TED WhiteBackground
- HEX
- RGB
- HSL
- TED Light GraySurface
- HEX
- RGB
- HSL
- TED Border GrayBorder
- HEX
- RGB
- HSL
- TED CharcoalText
- HEX
- RGB
- HSL
- TED Medium GraySecondary text
- HEX
- RGB
- HSL
- TED Muted GrayMuted text
- HEX
- RGB
- HSL
About TED's colors
TED’s color palette is built around a vivid red, symbolizing passion and urgency, paired with neutral tones for clarity. The minimal use of color supports a focus on content and accessibility.
Primary red is contrasted with black and white for maximum legibility.
Neutral grays are used for backgrounds and surfaces.
Accent colors are reserved for status and feedback messaging.
Psychology
Red evokes energy, excitement, and draws immediate attention, aligning with TED’s mission to inspire. The neutral tones provide balance, professionalism, and readability.
Evolution
TED’s palette has remained consistent, with red as the core identity color since its inception. Minor adjustments to gray tones have been made for improved digital accessibility.
Where TED uses each color
- Primary
TED Red is used for the logo, primary buttons, and key call-to-action elements.
- Secondary
TED Black appears in navigation bars, text, and overlays.
- Accent
TED White is used for backgrounds, negative space, and text on dark backgrounds.
- Backgrounds
Backgrounds are predominantly TED White or TED Light Gray for content clarity.
- Text
Text uses TED Charcoal for primary content and TED Medium Gray for secondary information.
- Semantic
Success, warning, error, and info colors are used in alerts, notifications, and feedback messages.
TED color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official TED primary color is TED Red, with the hex code #E62B1E. This color is used for the logo and main call-to-action elements.
TED Red (#E62B1E) is RGB(230, 43, 30) and CMYK(0, 81, 87, 10). These values ensure accurate reproduction in both digital and print media.
TED uses TED Light Gray (#F5F5F5), TED Border Gray (#E0E0E0), TED Charcoal (#222222), TED Medium Gray (#666666), and TED Muted Gray (#A0A0A0) for backgrounds, borders, and text. These neutrals support content readability and a clean interface.
Use TED Red (#E62B1E) for primary actions and branding, neutrals for backgrounds and text, and semantic colors for feedback. Maintain high contrast for accessibility and brand consistency.
The secondary color is TED Black, #000000, and the accent is TED White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies TED's colors consistently when it generates UI.
Make something in the spirit of TED
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.