Brooks color palette
SportsBrooks is a leading running shoe and apparel brand known for its bold blue identity and clean, performance-driven design system. The brand's color palette centers on its iconic 'Brooks Blue' and a set of crisp, functional neutrals.
brooksrunning.comBrooks colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Brooks BluePrimary0, 114, 206
- Brooks BlackSecondary35, 31, 32
- Brooks Light BlueAccent0, 181, 226
Surfaces
Page, cards and dividers.- Brooks WhiteBackground255, 255, 255
- Brooks Light GraySurface246, 246, 246
- Brooks Gray BorderBorder209, 211, 212
Text
Three tiers of copy.- Brooks Black TextText35, 31, 32
- Brooks Gray TextSecondary text109, 110, 113
- Brooks Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Brooks GreenSuccess67, 176, 42
- Brooks YellowWarning255, 199, 44
- Brooks RedError224, 60, 49
- Brooks Light Blue InfoInfo0, 181, 226
Use Brooks's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
brooks-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B5E2;
--error: #E03C31;
--accent: #00B5E2;
--border: #D1D3D4;
--primary: #0072CE;
--success: #43B02A;
--surface: #F6F6F6;
--warning: #FFC72C;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.1: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
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Brooks gray and neutral colors
The quiet part of the Brooks palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Brooks WhiteBackground
- HEX
- RGB
- HSL
- Brooks Light GraySurface
- HEX
- RGB
- HSL
- Brooks Gray BorderBorder
- HEX
- RGB
- HSL
- Brooks Black TextText
- HEX
- RGB
- HSL
- Brooks Gray TextSecondary text
- HEX
- RGB
- HSL
- Brooks Muted GrayMuted text
- HEX
- RGB
- HSL
About Brooks's colors
Brooks' color system is anchored by a vibrant blue, conveying energy and trust, complemented by functional neutrals for clarity and readability. Accent colors provide visual interest and support wayfinding in digital and physical contexts.
Primary blue contrasts with white and black for high legibility.
Accent blue is used for highlights and calls to action.
Neutral grays support backgrounds and secondary UI elements.
Psychology
Blue is associated with reliability, performance, and calm, aligning with Brooks' focus on running excellence. The use of clean whites and structured grays reinforces a sense of precision and trust.
Evolution
Brooks' palette has remained consistent, with 'Brooks Blue' as the core identity color for decades. Minor updates have refined the supporting neutrals and accent tones for modern digital use.
Where Brooks uses each color
- Primary
Brooks Blue is used for the logo, primary navigation, and key buttons on the website and packaging.
- Secondary
Brooks Black appears in headers, body text, and product details.
- Accent
Brooks Light Blue is used for highlights, links, and active states in UI components.
- Backgrounds
Brooks White and Light Gray are used for backgrounds on web pages, product cards, and app screens.
- Text
Brooks Black and Gray Text are used for primary and secondary text across all digital and print materials.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and feedback messages in digital interfaces.
Brooks color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Brooks brand color is 'Brooks Blue' with hex code #0072CE.
Brooks Blue (#0072CE) is RGB(0, 114, 206) and CMYK(100, 45, 0, 0).
Brooks uses 'Brooks Black' (#231F20), 'Brooks Light Gray' (#F6F6F6), and 'Brooks Gray Border' (#D1D3D4) as its primary neutrals.
Use 'Brooks Blue' (#0072CE) for primary branding, navigation, and calls to action, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights, alerts, and interactive elements.
The secondary color is Brooks Black, #231F20, and the accent is Brooks Light Blue, #00B5E2. 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 Brooks's colors consistently when it generates UI.
Make something in the spirit of Brooks
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.