Twilio color palette
TechTwilio's color identity is defined by a bold red primary, supported by a clean white and deep charcoal for contrast and legibility. The palette is designed for clarity and energy across digital and print applications.
twilio.comTwilio colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Twilio RedPrimary242, 47, 70
- Twilio CharcoalSecondary18, 28, 45
- Twilio PinkAccent255, 179, 199
Surfaces
Page, cards and dividers.- Twilio WhiteBackground255, 255, 255
- Twilio Light GraySurface244, 244, 246
- Twilio Border GrayBorder227, 228, 232
Text
Three tiers of copy.- Twilio CharcoalText18, 28, 45
- Twilio Medium GraySecondary text92, 105, 117
- Twilio Muted GrayMuted text143, 156, 167
Semantic
Feedback and state colors.- Twilio GreenSuccess46, 182, 125
- Twilio YellowWarning245, 166, 35
- Twilio Error RedError214, 31, 60
- Twilio BlueInfo0, 117, 255
Use Twilio's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
twilio-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0075FF;
--error: #D61F3C;
--accent: #FFB3C7;
--border: #E3E4E8;
--primary: #F22F46;
--success: #2EB67D;
--surface: #F4F4F6;
--warning: #F5A623;
--secondary: #121C2D;
--text-muted: #8F9CA7;
--background: #FFFFFF;
--text-primary: #121C2D;
--text-secondary: #5C6975;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Twilio background, border and text colors
The quiet part of the Twilio palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Twilio WhiteBackground
- HEX
- RGB
- HSL
- Twilio Light GraySurface
- HEX
- RGB
- HSL
- Twilio Border GrayBorder
- HEX
- RGB
- HSL
- Twilio CharcoalText
- HEX
- RGB
- HSL
- Twilio Medium GraySecondary text
- HEX
- RGB
- HSL
- Twilio Muted GrayMuted text
- HEX
- RGB
- HSL
About Twilio's colors
Twilio's palette uses a vibrant red to convey energy and approachability, balanced by neutral grays and white for clarity. Accent and semantic colors support accessibility and clear communication.
Primary red contrasts with deep charcoal for readability.
Accent pink is used for highlights and UI elements.
Semantic colors (green, yellow, blue, error red) provide status feedback.
Psychology
The bold red evokes confidence, urgency, and innovation, while the supporting neutrals create a professional and trustworthy environment. Accent and semantic colors are chosen for clarity and universal recognition.
Evolution
Twilio's core red and neutral palette has remained consistent since its early brand guidelines. Minor adjustments to accent and semantic colors have improved accessibility and digital clarity.
Where Twilio uses each color
- Primary
Twilio Red is used for the logo, primary buttons, and key highlights.
- Secondary
Twilio Charcoal appears in navigation bars, text, and footers.
- Accent
Twilio Pink is used for UI highlights, badges, and subtle backgrounds.
- Backgrounds
Twilio White and Light Gray are used for page and card backgrounds.
- Text
Charcoal and Medium Gray are used for primary and secondary text across the UI.
- Semantic
Green, yellow, blue, and error red provide feedback for success, warnings, informational, and error states.
Twilio color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Twilio primary color is Twilio Red, hex code #F22F46.
Twilio Red (#F22F46) is RGB(242, 47, 70) and CMYK(0, 81, 71, 5).
Twilio uses Twilio Charcoal (#121C2D), Light Gray (#F4F4F6), Border Gray (#E3E4E8), Medium Gray (#5C6975), and Muted Gray (#8F9CA7) for UI backgrounds, borders, and text.
Use Twilio Red (#F22F46) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors are reserved for highlights, feedback, and accessibility.
The secondary color is Twilio Charcoal, #121C2D, and the accent is Twilio Pink, #FFB3C7. 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 Twilio's colors consistently when it generates UI.
Make something in the spirit of Twilio
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.