On color palette
SportsOn is a Swiss sportswear brand known for its minimal, high-contrast black-and-white color identity, emphasizing clarity and performance. The brand's palette is stark, using black and white as core elements with subtle gray tones for UI and product details.
on.comOn colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- On BlackPrimary0, 0, 0
- On WhiteSecondary255, 255, 255
- On GrayAccent189, 189, 189
Surfaces
Page, cards and dividers.- On WhiteBackground255, 255, 255
- On Light GraySurface245, 245, 245
- On Border GrayBorder224, 224, 224
Text
Three tiers of copy.- On BlackText0, 0, 0
- On Medium GraySecondary text117, 117, 117
- On GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- On Success GreenSuccess0, 196, 140
- On Warning YellowWarning255, 179, 0
- On Error RedError255, 59, 48
- On Info BlueInfo33, 150, 243
Use On's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
on-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #FF3B30;
--accent: #BDBDBD;
--border: #E0E0E0;
--primary: #000000;
--success: #00C48C;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #757575;
}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
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
On gray and neutral colors
The quiet part of the On palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- On WhiteBackground
- HEX
- RGB
- HSL
- On Light GraySurface
- HEX
- RGB
- HSL
- On Border GrayBorder
- HEX
- RGB
- HSL
- On BlackText
- HEX
- RGB
- HSL
- On Medium GraySecondary text
- HEX
- RGB
- HSL
- On GrayMuted text
- HEX
- RGB
- HSL
About On's colors
On's color system is built on a foundation of black and white, creating a clean and timeless look. Subtle grays support usability and product focus, while semantic colors are reserved for functional UI feedback.
Primary black and white create strong contrast.
Grays provide hierarchy and depth in UI.
Accent and semantic colors are used sparingly for clarity.
Psychology
The black and white scheme communicates precision, performance, and Swiss design heritage. The minimal palette reinforces trust and focus on product innovation.
Evolution
On's palette has remained consistent since its founding, emphasizing minimalism and clarity. Over time, the brand has refined its gray tones and semantic colors for improved digital accessibility.
Where On uses each color
- Primary
On Black is used for logos, navigation bars, and primary text.
- Secondary
On White serves as the main background for websites, packaging, and product displays.
- Accent
On Gray is utilized for secondary UI elements, dividers, and subtle highlights.
- Backgrounds
On White and On Light Gray are used as backgrounds for digital and print materials.
- Text
On Black and On Medium Gray are used for primary and secondary text, respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and notifications in digital interfaces.
On color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary On brand color is black, with the hex code #000000. This color is used for the logo and key brand elements.
On Black (#000000) has an RGB value of 0, 0, 0 and a CMYK value of 0, 0, 0, 100. This ensures deep, consistent black across print and digital.
On uses On Gray (#BDBDBD), On Light Gray (#F5F5F5), and On Border Gray (#E0E0E0) for backgrounds, borders, and muted text. These neutrals support the brand's minimal aesthetic.
Use On Black and On White for primary brand elements and backgrounds, with grays for UI structure and hierarchy. Semantic colors are reserved for status and feedback in digital products.
The secondary color is On White, #FFFFFF, and the accent is On Gray, #BDBDBD. 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 On's colors consistently when it generates UI.
Make something in the spirit of On
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.