Hoka color palette
SportsHoka's brand identity is defined by a vibrant blue primary color, complemented by clean whites and deep navy accents, reflecting energy and clarity. The palette is consistent across digital, packaging, and product design.
hoka.comHoka colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hoka BluePrimary0, 87, 184
- Hoka WhiteSecondary255, 255, 255
- Hoka YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Hoka Light GrayBackground246, 247, 249
- Hoka Surface GraySurface229, 232, 236
- Hoka Border GrayBorder177, 182, 190
Text
Three tiers of copy.- Hoka NavyText34, 43, 69
- Hoka Medium GraySecondary text107, 114, 128
- Hoka Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Hoka Success GreenSuccess60, 179, 113
- Hoka Warning OrangeWarning255, 179, 0
- Hoka Error RedError229, 57, 53
- Hoka Info BlueInfo2, 136, 209
Use Hoka's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hoka-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #FFD100;
--border: #B1B6BE;
--primary: #0057B8;
--success: #3CB371;
--surface: #E5E8EC;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #A0AEC0;
--background: #F6F7F9;
--text-primary: #222B45;
--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
13.1:1
Pass
Text on surface
Needs 4.5:1 for body text
11.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.9:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Hoka background, border and text colors
The quiet part of the Hoka palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hoka Light GrayBackground
- HEX
- RGB
- HSL
- Hoka Surface GraySurface
- HEX
- RGB
- HSL
- Hoka Border GrayBorder
- HEX
- RGB
- HSL
- Hoka NavyText
- HEX
- RGB
- HSL
- Hoka Medium GraySecondary text
- HEX
- RGB
- HSL
- Hoka Muted GrayMuted text
- HEX
- RGB
- HSL
About Hoka's colors
Hoka's palette is built around a bold blue that conveys trust and athletic energy, balanced by neutral grays and whites for clarity. Accent yellow adds vibrancy and highlights key actions or features.
Primary blue is paired with white for high contrast.
Accent yellow is used sparingly for calls to action.
Deep navy and grays provide depth and legibility.
Psychology
Blue evokes reliability, performance, and calm, aligning with Hoka's focus on running and movement. Yellow accents energize the design and draw attention to important elements.
Evolution
Hoka's color palette has remained consistent since its inception, with the signature blue always at the forefront. Minor adjustments to gray tones and accent colors have improved digital accessibility and clarity.
Where Hoka uses each color
- Primary
Hoka Blue is used for the logo, navigation bars, and key buttons.
- Secondary
Hoka White is the main background for web pages, packaging, and product details.
- Accent
Hoka Yellow highlights CTAs, promotional banners, and select product details.
- Backgrounds
Hoka Light Gray and Surface Gray are used for cards, overlays, and secondary sections.
- Text
Hoka Navy is the primary text color, with Medium and Muted Grays for secondary and disabled text.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Hoka color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hoka brand color is Hoka Blue, hex code #0057B8.
Hoka Blue (#0057B8) is RGB(0, 87, 184) and CMYK(100, 53, 0, 28).
Hoka uses Light Gray (#F6F7F9), Surface Gray (#E5E8EC), Border Gray (#B1B6BE), and Muted Gray (#A0AEC0) for backgrounds, borders, and muted text.
Use Hoka Blue (#0057B8) for primary actions and branding, with white and grays for backgrounds and text. Accent Yellow (#FFD100) should be reserved for highlights and calls to action.
The secondary color is Hoka White, #FFFFFF, and the accent is Hoka Yellow, #FFD100. Together with the primary they make up the three brand colors at the top of this page.
3 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 Hoka's colors consistently when it generates UI.
Make something in the spirit of Hoka
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.