Axios color palette
MediaAxios uses a modern, clean color system centered on a distinctive purple, paired with neutral grays and blue accents for clarity and readability. The palette is designed for digital-first media, emphasizing accessibility and trust.
axios.comAxios colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Axios PurplePrimary90, 41, 228
- Axios CharcoalSecondary26, 26, 26
- Axios BlueAccent0, 118, 255
Surfaces
Page, cards and dividers.- Axios WhiteBackground255, 255, 255
- Axios Light GraySurface247, 248, 250
- Axios Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Axios BlackText34, 34, 34
- Axios Medium GraySecondary text107, 114, 128
- Axios Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Axios GreenSuccess0, 184, 124
- Axios YellowWarning255, 180, 0
- Axios RedError229, 62, 62
- Axios Info BlueInfo49, 130, 206
Use Axios's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
axios-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3182CE;
--error: #E53E3E;
--accent: #0076FF;
--border: #E5E7EB;
--primary: #5A29E4;
--success: #00B87C;
--surface: #F7F8FA;
--warning: #FFB400;
--secondary: #1A1A1A;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6B7280;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5: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.1:1
Fail
Axios background, border and text colors
The quiet part of the Axios palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Axios WhiteBackground
- HEX
- RGB
- HSL
- Axios Light GraySurface
- HEX
- RGB
- HSL
- Axios Border GrayBorder
- HEX
- RGB
- HSL
- Axios BlackText
- HEX
- RGB
- HSL
- Axios Medium GraySecondary text
- HEX
- RGB
- HSL
- Axios Muted GrayMuted text
- HEX
- RGB
- HSL
About Axios's colors
Axios’s palette is built around a bold purple, supported by clean neutrals and blue accents for emphasis and clarity. The system is designed for digital readability and brand recognition.
Primary purple contrasts with neutral backgrounds for strong visual hierarchy.
Accent blue is used for links and interactive elements.
Grays provide structure and support readability.
Psychology
Purple conveys creativity and authority, while blue accents reinforce trust and reliability. The neutral grays and white backgrounds create a sense of clarity and approachability.
Evolution
Axios’s color palette has remained stable since launch, with minor adjustments to gray tones for improved accessibility. The signature purple has consistently been the core of the brand’s identity.
Where Axios uses each color
- Primary
Axios Purple is used for the logo, key buttons, and highlights in navigation.
- Secondary
Axios Charcoal appears in headers, footers, and some navigation elements.
- Accent
Axios Blue is used for links, active states, and call-to-action buttons.
- Backgrounds
Axios White and Axios Light Gray are used for app and site backgrounds.
- Text
Axios Black and Axios Medium Gray are used for primary and secondary text, respectively.
- Semantic
Axios Green, Yellow, Red, and Info Blue are used for status indicators, alerts, and notifications.
Axios color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Axios primary color hex code is #5A29E4. This purple is used for the logo and key brand elements.
Axios Purple (#5A29E4) in RGB is (90, 41, 228). For CMYK, it is approximately (60, 82, 0, 11).
Axios uses Axios Charcoal (#1A1A1A), Axios Light Gray (#F7F8FA), Axios Border Gray (#E5E7EB), Axios Medium Gray (#6B7280), and Axios Muted Gray (#A0AEC0) for backgrounds, borders, and text.
Use Axios Purple (#5A29E4) for primary actions and branding, Axios Blue (#0076FF) for links and accents, and the neutral grays for backgrounds and text. Semantic colors are reserved for status and alerts.
The secondary color is Axios Charcoal, #1A1A1A, and the accent is Axios Blue, #0076FF. 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 Axios's colors consistently when it generates UI.
Make something in the spirit of Axios
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.