Contentful color palette
SaaSContentful's color system is built around a distinctive blue primary, complemented by a clean, neutral palette and subtle accents. The colors are designed for clarity, accessibility, and a modern SaaS interface.
contentful.comContentful colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Contentful BluePrimary36, 120, 204
- Contentful CharcoalSecondary45, 55, 72
- Contentful CoralAccent255, 111, 97
Surfaces
Page, cards and dividers.- Contentful WhiteBackground255, 255, 255
- Contentful Light GraySurface247, 250, 252
- Contentful Border GrayBorder226, 232, 240
Text
Three tiers of copy.- Contentful BlackText26, 32, 44
- Contentful SlateSecondary text74, 85, 104
- Contentful Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Contentful GreenSuccess68, 194, 130
- Contentful YellowWarning255, 185, 92
- Contentful RedError233, 79, 68
- Contentful Info BlueInfo49, 130, 206
Use Contentful's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
contentful-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3182CE;
--error: #E94F44;
--accent: #FF6F61;
--border: #E2E8F0;
--primary: #2478CC;
--success: #44C282;
--surface: #F7FAFC;
--warning: #FFB95C;
--secondary: #2D3748;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #1A202C;
--text-secondary: #4A5568;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Contentful background, border and text colors
The quiet part of the Contentful palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Contentful WhiteBackground
- HEX
- RGB
- HSL
- Contentful Light GraySurface
- HEX
- RGB
- HSL
- Contentful Border GrayBorder
- HEX
- RGB
- HSL
- Contentful BlackText
- HEX
- RGB
- HSL
- Contentful SlateSecondary text
- HEX
- RGB
- HSL
- Contentful Muted GrayMuted text
- HEX
- RGB
- HSL
About Contentful's colors
Contentful's palette centers on a vivid blue, supported by neutral grays and strategic accent colors for clarity and accessibility. The system ensures strong contrast and a professional, modern SaaS look.
Primary blue is paired with neutral grays for structure.
Accent coral is used for highlights and calls to action.
Semantic colors (green, yellow, red) provide clear status feedback.
Psychology
The blue primary conveys trust, reliability, and clarity, aligning with Contentful's positioning as a robust content platform. Neutrals and accents support a clean, approachable interface.
Evolution
Contentful's palette has remained stable, with blue as the core brand color since early iterations. Minor adjustments have been made to accent and semantic colors for improved accessibility.
Where Contentful uses each color
- Primary
Used for main navigation, primary buttons, and key interactive elements.
- Secondary
Appears in headers, sidebars, and secondary navigation backgrounds.
- Accent
Applied to call-to-action buttons, highlights, and notification badges.
- Backgrounds
White and light gray are used for page backgrounds and card surfaces.
- Text
Text colors are used for headings, body copy, and muted UI labels.
- Semantic
Green, yellow, and red indicate success, warnings, and errors in UI states.
Contentful color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Contentful primary color hex code is #2478CC. This blue is used prominently across the brand's digital products.
Contentful Blue (#2478CC) in RGB is (36, 120, 204). For CMYK, it is approximately (82, 41, 0, 20).
Contentful uses several neutrals: #2D3748 (Charcoal), #F7FAFC (Light Gray), #E2E8F0 (Border Gray), and #A0AEC0 (Muted Gray). These provide structure and hierarchy in the UI.
Use #2478CC for primary actions and navigation, with neutrals for backgrounds and surfaces. Accent and semantic colors should be reserved for highlights, notifications, and status indicators.
The secondary color is Contentful Charcoal, #2D3748, and the accent is Contentful Coral, #FF6F61. 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 Contentful's colors consistently when it generates UI.
Make something in the spirit of Contentful
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.