WordPress color palette
TechWordPress uses a clean, professional palette centered on its signature blue, complemented by neutral grays and subtle accent colors for clarity and accessibility. The color system is designed for web interfaces, focusing on usability and strong brand recognition.
wordpress.orgWordPress colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- WordPress BluePrimary33, 117, 155
- WordPress CharcoalSecondary35, 40, 45
- WordPress SkyAccent0, 160, 210
Surfaces
Page, cards and dividers.- WordPress Light GrayBackground246, 247, 247
- WordPress WhiteSurface255, 255, 255
- WordPress SilverBorder209, 209, 209
Text
Three tiers of copy.- WordPress BlackText25, 30, 35
- WordPress SlateSecondary text85, 93, 102
- WordPress Muted GrayMuted text143, 152, 161
Semantic
Feedback and state colors.- WordPress GreenSuccess70, 180, 80
- WordPress YellowWarning255, 185, 0
- WordPress RedError220, 50, 50
- WordPress SkyInfo0, 160, 210
Use WordPress's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
wordpress-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00A0D2;
--error: #DC3232;
--accent: #00A0D2;
--border: #D1D1D1;
--primary: #21759B;
--success: #46B450;
--surface: #FFFFFF;
--warning: #FFB900;
--secondary: #23282D;
--text-muted: #8F98A1;
--background: #F6F7F7;
--text-primary: #191E23;
--text-secondary: #555D66;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
WordPress background, border and text colors
The quiet part of the WordPress palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- WordPress Light GrayBackground
- HEX
- RGB
- HSL
- WordPress WhiteSurface
- HEX
- RGB
- HSL
- WordPress SilverBorder
- HEX
- RGB
- HSL
- WordPress BlackText
- HEX
- RGB
- HSL
- WordPress SlateSecondary text
- HEX
- RGB
- HSL
- WordPress Muted GrayMuted text
- HEX
- RGB
- HSL
About WordPress's colors
WordPress's palette is grounded in a strong blue primary, supported by neutral grays and clear semantic colors for UI clarity. The colors are chosen for accessibility and visual hierarchy.
Primary blue contrasts with white and light gray backgrounds.
Accent blue is used for highlights and interactive elements.
Neutral grays create structure and support readability.
Psychology
The blue primary conveys trust, reliability, and professionalism, key values for a content management platform. Neutral grays and white backgrounds create a sense of openness and approachability.
Evolution
The WordPress palette has remained stable, with blue as the core identity since its early years. Minor adjustments have been made to gray tones and accent colors for improved accessibility and modern UI standards.
Where WordPress uses each color
- Primary
Used for the WordPress logo, navigation bars, and primary buttons.
- Secondary
Appears in admin dashboard sidebars and headers.
- Accent
Highlights links, active states, and notifications.
- Backgrounds
Applied to page backgrounds and admin panels for contrast.
- Text
Primary and secondary text colors are used throughout the UI for headings and body copy.
- Semantic
Success, warning, and error colors are used for alerts, status messages, and form validation.
WordPress color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official WordPress primary color hex code is #21759B. This blue is used for the logo and key brand elements.
WordPress Blue (#21759B) in RGB is (33, 117, 155). In CMYK, it is approximately (79%, 24%, 0%, 39%).
WordPress uses a range of grays, such as #23282D (Charcoal), #F6F7F7 (Light Gray), and #D1D1D1 (Silver), for backgrounds, borders, and interface structure.
Use #21759B for primary actions and branding, with #23282D and #F6F7F7 for backgrounds and structure. Accent and semantic colors should be reserved for highlights, notifications, and status messages.
The secondary color is WordPress Charcoal, #23282D, and the accent is WordPress Sky, #00A0D2. 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 WordPress's colors consistently when it generates UI.
Make something in the spirit of WordPress
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.