Salomon color palette
SportsSalomon's brand identity is defined by a bold, energetic blue paired with black and white, reflecting its heritage in outdoor sports and innovation. The color palette is clean, modern, and highly functional across digital and physical applications.
salomon.comSalomon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Salomon BluePrimary0, 87, 166
- Salomon BlackSecondary0, 0, 0
- Salomon YellowAccent255, 183, 0
Surfaces
Page, cards and dividers.- Salomon WhiteBackground255, 255, 255
- Salomon Light GraySurface245, 245, 245
- Salomon Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Salomon Text BlackText0, 0, 0
- Salomon Text GraySecondary text102, 102, 102
- Salomon Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Salomon Success GreenSuccess59, 181, 74
- Salomon Warning YellowWarning255, 183, 0
- Salomon Error RedError225, 6, 0
- Salomon Info BlueInfo0, 87, 166
Use Salomon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
salomon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0057A6;
--error: #E10600;
--accent: #FFB700;
--border: #D9D9D9;
--primary: #0057A6;
--success: #3BB54A;
--surface: #F5F5F5;
--warning: #FFB700;
--secondary: #000000;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #000000;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Salomon gray and neutral colors
The quiet part of the Salomon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Salomon WhiteBackground
- HEX
- RGB
- HSL
- Salomon Light GraySurface
- HEX
- RGB
- HSL
- Salomon Border GrayBorder
- HEX
- RGB
- HSL
- Salomon Text BlackText
- HEX
- RGB
- HSL
- Salomon Text GraySecondary text
- HEX
- RGB
- HSL
- Salomon Muted GrayMuted text
- HEX
- RGB
- HSL
About Salomon's colors
Salomon's palette is built around a strong blue, supported by black, white, and high-contrast accent colors for clarity and energy. The system is designed for high visibility and legibility in both digital and outdoor environments.
Primary blue contrasts with white for maximum legibility.
Black provides a grounding, neutral base for text and logos.
Yellow accent is used sparingly for highlights and calls to action.
Psychology
Blue conveys trust, reliability, and performance, aligning with Salomon's outdoor and athletic focus. Black and white add modernity and professionalism, while yellow injects energy and draws attention.
Evolution
Salomon's palette has remained consistent, with blue and black as core elements since the brand's early days. Minor adjustments have been made to accent and neutral tones for digital clarity.
Where Salomon uses each color
- Primary
Salomon Blue is used for the logo, key buttons, and primary navigation highlights.
- Secondary
Salomon Black appears in the wordmark, main text, and background elements.
- Accent
Salomon Yellow is used for call-to-action buttons, highlights, and product details.
- Backgrounds
White and light gray backgrounds are standard for web pages and product displays.
- Text
Text is primarily black or dark gray for maximum readability on light backgrounds.
- Semantic
Success, warning, and error colors are used in forms, notifications, and system feedback.
Salomon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Salomon primary brand color is Salomon Blue, hex code #0057A6.
Salomon Blue (#0057A6) is RGB(0, 87, 166) and CMYK(100, 48, 0, 35).
Salomon uses Salomon Light Gray (#F5F5F5), Border Gray (#D9D9D9), Text Gray (#666666), and Muted Gray (#A3A3A3) for backgrounds, borders, and secondary text.
Use Salomon Blue (#0057A6) for primary actions and branding, black and gray for text, and yellow (#FFB700) for accents or highlights. Maintain strong contrast and avoid overusing accent colors.
The secondary color is Salomon Black, #000000, and the accent is Salomon Yellow, #FFB700. 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 Salomon's colors consistently when it generates UI.
Make something in the spirit of Salomon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.