Ajax color palette
SportsAjax, the renowned Dutch football club, uses a bold red and white color palette that reflects its heritage and identity. The club's visual system is anchored by its iconic Ajax Red, complemented by crisp white and deep gray tones for contrast and clarity.
ajax.nlAjax colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ajax RedPrimary215, 12, 24
- Ajax WhiteSecondary255, 255, 255
- Ajax BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Ajax Light GrayBackground246, 246, 246
- Ajax Surface GraySurface230, 230, 230
- Ajax Border GrayBorder177, 177, 177
Text
Three tiers of copy.- Ajax CharcoalText34, 34, 34
- Ajax Medium GraySecondary text102, 102, 102
- Ajax Muted GrayMuted text165, 165, 165
Semantic
Feedback and state colors.- Ajax Success GreenSuccess39, 174, 96
- Ajax Warning OrangeWarning243, 156, 18
- Ajax Error RedError192, 57, 43
- Ajax Info BlueInfo41, 128, 185
Use Ajax's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ajax-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2980B9;
--error: #C0392B;
--accent: #000000;
--border: #B1B1B1;
--primary: #D70C18;
--success: #27AE60;
--surface: #E6E6E6;
--warning: #F39C12;
--secondary: #FFFFFF;
--text-muted: #A5A5A5;
--background: #F6F6F6;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6: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.0:1
Fail
Ajax gray and neutral colors
The quiet part of the Ajax palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ajax Light GrayBackground
- HEX
- RGB
- HSL
- Ajax Surface GraySurface
- HEX
- RGB
- HSL
- Ajax Border GrayBorder
- HEX
- RGB
- HSL
- Ajax CharcoalText
- HEX
- RGB
- HSL
- Ajax Medium GraySecondary text
- HEX
- RGB
- HSL
- Ajax Muted GrayMuted text
- HEX
- RGB
- HSL
About Ajax's colors
Ajax's color palette is dominated by a vivid red and clean white, creating a strong visual identity rooted in tradition. The use of neutral grays and black provides balance and readability across digital and physical applications.
Primary red contrasts with white for maximum visibility.
Grays are used for UI elements and backgrounds.
Accent black is reserved for text and detailing.
Psychology
Red conveys energy, passion, and power, aligning with Ajax's competitive spirit. White represents clarity, fairness, and tradition, reinforcing the club's storied legacy.
Evolution
Ajax's palette has remained largely unchanged for decades, maintaining its instantly recognizable red and white. Minor adjustments to gray tones have been made for modern digital interfaces.
Where Ajax uses each color
- Primary
Ajax Red is featured prominently on home jerseys, website headers, and official merchandise.
- Secondary
Ajax White is used for away kits, backgrounds, and large content areas on the website.
- Accent
Ajax Black appears in typography, logo outlines, and select UI elements.
- Backgrounds
Ajax Light Gray and Surface Gray are used for page backgrounds and card surfaces in digital products.
- Text
Ajax Charcoal and Medium Gray are used for primary and secondary text throughout the website and app.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and notifications in digital interfaces.
Ajax color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Ajax brand color is Ajax Red, with the hex code #D70C18.
Ajax Red (#D70C18) in RGB is (215, 12, 24) and in CMYK is (0, 94, 89, 16).
Ajax uses Light Gray (#F6F6F6), Surface Gray (#E6E6E6), Border Gray (#B1B1B1), and Charcoal (#222222) for UI backgrounds, borders, and text.
Ajax Red (#D70C18) should be dominant in branding and key visuals, with white and gray tones supporting UI clarity. Accent and semantic colors are reserved for specific functions like alerts or navigation.
The secondary color is Ajax White, #FFFFFF, and the accent is Ajax Black, #000000. 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 Ajax's colors consistently when it generates UI.
Make something in the spirit of Ajax
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.