Strapi color palette
SaaSStrapi's color identity centers on a distinctive deep blue-violet, complemented by vibrant accents and a modern, neutral UI palette. The brand uses clear, accessible color roles for clarity and consistency across its SaaS platform.
strapi.ioStrapi colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Strapi BluePrimary73, 69, 255
- Strapi Light BlueSecondary123, 121, 255
- Strapi TealAccent0, 184, 176
Surfaces
Page, cards and dividers.- Strapi Light BackgroundBackground246, 246, 249
- Strapi White SurfaceSurface255, 255, 255
- Strapi Border GrayBorder220, 220, 228
Text
Three tiers of copy.- Strapi Dark TextText50, 50, 77
- Strapi Secondary TextSecondary text102, 102, 135
- Strapi Muted TextMuted text165, 165, 186
Semantic
Feedback and state colors.- Strapi Success GreenSuccess92, 177, 118
- Strapi Warning OrangeWarning242, 157, 65
- Strapi Error RedError238, 94, 82
- Strapi Info BlueInfo12, 117, 242
Use Strapi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
strapi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0C75F2;
--error: #EE5E52;
--accent: #00B8B0;
--border: #DCDCE4;
--primary: #4945FF;
--success: #5CB176;
--surface: #FFFFFF;
--warning: #F29D41;
--secondary: #7B79FF;
--text-muted: #A5A5BA;
--background: #F6F6F9;
--text-primary: #32324D;
--text-secondary: #666687;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
11.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Strapi background, border and text colors
The quiet part of the Strapi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Strapi Light BackgroundBackground
- HEX
- RGB
- HSL
- Strapi White SurfaceSurface
- HEX
- RGB
- HSL
- Strapi Border GrayBorder
- HEX
- RGB
- HSL
- Strapi Dark TextText
- HEX
- RGB
- HSL
- Strapi Secondary TextSecondary text
- HEX
- RGB
- HSL
- Strapi Muted TextMuted text
- HEX
- RGB
- HSL
About Strapi's colors
Strapi's palette is built around a bold blue-violet primary, supported by cool accents and a clean, modern gray scale for UI clarity. The color system is designed for accessibility and brand recognition.
Primary blue-violet contrasts with white and light backgrounds.
Accent teal and info blue provide visual highlights.
Neutral grays support readability and hierarchy.
Psychology
The primary blue-violet conveys trust, innovation, and technical expertise. Teal and green accents add freshness and a sense of success.
Evolution
Strapi's palette has remained stable since its major rebrand, with minor refinements to gray tones for better accessibility. The core blue-violet and teal accents have been consistent focal points.
Where Strapi uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the app and website.
- Secondary
Applied to secondary buttons, links, and subtle UI elements.
- Accent
Used for highlights, badges, and call-to-action elements.
- Backgrounds
Light gray backgrounds are used throughout the dashboard and marketing site for a clean look.
- Text
Primary and secondary text colors are used for headings, body copy, and muted interface labels.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Strapi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Strapi primary color is #4945FF, known as Strapi Blue. This color is used for main branding elements and primary actions.
The RGB value for #4945FF is (73, 69, 255). For print, the closest CMYK equivalent is approximately (71, 72, 0, 0).
Strapi uses a range of grays including #F6F6F9 for backgrounds, #DCDCE4 for borders, and #32324D for primary text. These neutrals ensure clarity and accessibility in the UI.
Use #4945FF for primary actions and navigation, with #7B79FF and #00B8B0 as supporting accents. Apply neutral grays for backgrounds, surfaces, and text to maintain a clean, readable interface.
The secondary color is Strapi Light Blue, #7B79FF, and the accent is Strapi Teal, #00B8B0. 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 Strapi's colors consistently when it generates UI.
Make something in the spirit of Strapi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.