Typeform color palette
SaaSTypeform's color identity is defined by a minimalist, dark-centric palette with subtle accent hues, reflecting its focus on clarity and user-friendly forms. The brand's use of deep neutrals and soft highlights supports a clean, modern UI.
typeform.comTypeform colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Typeform CharcoalPrimary38, 38, 39
- Typeform MistSecondary243, 242, 247
- Typeform PurpleAccent110, 86, 207
Surfaces
Page, cards and dividers.- Typeform WhiteBackground255, 255, 255
- Typeform SurfaceSurface249, 249, 251
- Typeform Border GrayBorder227, 226, 232
Text
Three tiers of copy.- Typeform Charcoal TextText38, 38, 39
- Typeform Secondary GraySecondary text111, 111, 118
- Typeform Muted GrayMuted text161, 161, 170
Semantic
Feedback and state colors.- Typeform GreenSuccess27, 196, 125
- Typeform AmberWarning255, 179, 0
- Typeform RedError242, 72, 34
- Typeform BlueInfo62, 143, 255
Use Typeform's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
typeform-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3E8FFF;
--error: #F24822;
--accent: #6E56CF;
--border: #E3E2E8;
--primary: #262627;
--success: #1BC47D;
--surface: #F9F9FB;
--warning: #FFB300;
--secondary: #F3F2F7;
--text-muted: #A1A1AA;
--background: #FFFFFF;
--text-primary: #262627;
--text-secondary: #6F6F76;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7: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
Typeform background, border and text colors
The quiet part of the Typeform palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Typeform WhiteBackground
- HEX
- RGB
- HSL
- Typeform SurfaceSurface
- HEX
- RGB
- HSL
- Typeform Border GrayBorder
- HEX
- RGB
- HSL
- Typeform Charcoal TextText
- HEX
- RGB
- HSL
- Typeform Secondary GraySecondary text
- HEX
- RGB
- HSL
- Typeform Muted GrayMuted text
- HEX
- RGB
- HSL
About Typeform's colors
Typeform's palette is grounded in deep neutrals, complemented by a signature purple accent and clear, accessible feedback colors. The scheme is designed for legibility and a calm, inviting digital experience.
Primary charcoal contrasts with white and mist backgrounds.
Accent purple is used sparingly for highlights and actions.
Semantic colors (green, amber, red, blue) provide clear feedback.
Psychology
The dark charcoal conveys professionalism and focus, while the purple accent adds a touch of creativity. The overall palette encourages trust and ease of use.
Evolution
Typeform's palette has remained consistent since its major 2018 rebrand, focusing on dark neutrals and minimal color accents. Adjustments have been minor, mainly refining accent and semantic tones for accessibility.
Where Typeform uses each color
- Primary
Used for navigation bars, primary buttons, and key headings.
- Secondary
Appears in backgrounds, form containers, and card surfaces.
- Accent
Highlights interactive elements such as links and call-to-action buttons.
- Backgrounds
White and mist backgrounds are used for main app screens and forms.
- Text
Charcoal and secondary gray are used for primary and secondary text throughout the UI.
- Semantic
Green, amber, red, and blue are used for status indicators, alerts, and notifications.
Typeform color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Typeform primary color is #262627, known as Typeform Charcoal.
Typeform Charcoal (#262627) in RGB is (38, 38, 39).
Typeform uses a range of grays, including #F3F2F7 (Mist), #E3E2E8 (Border Gray), #6F6F76 (Secondary Gray), and #A1A1AA (Muted Gray).
Use #262627 for primary UI elements, #F3F2F7 and #FFFFFF for backgrounds, and #6E56CF as an accent. Semantic colors are reserved for status and feedback messaging.
The secondary color is Typeform Mist, #F3F2F7, and the accent is Typeform Purple, #6E56CF. 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 Typeform's colors consistently when it generates UI.
Make something in the spirit of Typeform
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.