COS color palette
FashionCOS is known for its minimalist and modern aesthetic, reflected in a restrained palette of monochrome and neutral tones. The brand's color identity relies on deep charcoal, crisp white, and subtle grays to communicate sophistication and timelessness.
cos.comCOS colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- COS CharcoalPrimary34, 34, 34
- COS WhiteSecondary255, 255, 255
- COS Light GreyAccent189, 189, 189
Surfaces
Page, cards and dividers.- COS Off WhiteBackground247, 247, 247
- COS Pale GreySurface229, 229, 229
- COS Border GreyBorder209, 209, 209
Text
Three tiers of copy.- COS CharcoalText34, 34, 34
- COS Medium GreySecondary text110, 110, 110
- COS Light GreyMuted text189, 189, 189
Semantic
Feedback and state colors.- COS GreenSuccess75, 163, 123
- COS YellowWarning230, 184, 0
- COS RedError214, 69, 69
- COS BlueInfo58, 110, 165
Use COS's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A6EA5;
--error: #D64545;
--accent: #BDBDBD;
--border: #D1D1D1;
--primary: #222222;
--success: #4BA37B;
--surface: #E5E5E5;
--warning: #E6B800;
--secondary: #FFFFFF;
--text-muted: #BDBDBD;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #6E6E6E;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.5:1
Fail
COS gray and neutral colors
The quiet part of the COS palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- COS Off WhiteBackground
- HEX
- RGB
- HSL
- COS Pale GreySurface
- HEX
- RGB
- HSL
- COS Border GreyBorder
- HEX
- RGB
- HSL
- COS CharcoalText
- HEX
- RGB
- HSL
- COS Medium GreySecondary text
- HEX
- RGB
- HSL
- COS Light GreyMuted text
- HEX
- RGB
- HSL
About COS's colors
COS employs a minimalist color palette centered on monochrome and neutral shades to evoke timelessness and modernity. The restrained use of color allows the focus to remain on form and material.
Primary charcoal contrasts with crisp white for clarity.
Subtle grays create depth and hierarchy.
Accent colors are used sparingly for functional signals.
Psychology
The monochrome palette communicates sophistication, calm, and reliability. The lack of bright colors emphasizes the brand's focus on quality and understated design.
Evolution
COS's palette has remained remarkably stable since its launch, consistently favoring monochrome and neutral tones. Occasional seasonal accents are introduced but the core color system is unchanged.
Where COS uses each color
- Primary
COS Charcoal is used for main navigation, headings, and primary text.
- Secondary
COS White is the background for most pages and product photography.
- Accent
COS Light Grey is used for UI elements such as dividers, hover states, and subtle highlights.
- Backgrounds
COS Off White is the default background for content areas and product grids.
- Text
COS Charcoal and Medium Grey are used for body text and secondary information.
- Semantic
COS Green, Yellow, Red, and Blue are reserved for system messages, notifications, and status indicators.
COS color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official COS primary brand color is COS Charcoal, hex code #222222.
COS Charcoal (#222222) in RGB is (34, 34, 34), and in CMYK is (0, 0, 0, 87).
COS uses a range of neutral tones including COS Charcoal (#222222), COS Medium Grey (#6E6E6E), and COS Light Grey (#BDBDBD) throughout its UI and branding.
The COS palette should be applied with restraint, using monochrome and neutral tones for most elements and reserving accent colors for functional or informational purposes. Always use the exact hex codes provided for consistency.
The secondary color is COS White, #FFFFFF, and the accent is COS Light Grey, #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 COS's colors consistently when it generates UI.
Make something in the spirit of COS
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.