Crocs color palette
FashionCrocs' color identity centers around its signature vibrant green, supported by a clean monochrome palette for UI clarity and product focus. The brand uses bold, playful colors to reflect its fun, casual ethos.
crocs.comCrocs colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Crocs GreenPrimary88, 192, 67
- Crocs BlackSecondary34, 34, 34
- Crocs WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Crocs Light GrayBackground247, 247, 247
- Crocs Surface GraySurface237, 237, 237
- Crocs Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Crocs Text BlackText34, 34, 34
- Crocs Text GraySecondary text102, 102, 102
- Crocs Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Crocs GreenSuccess88, 192, 67
- Crocs YellowWarning255, 214, 0
- Crocs RedError224, 60, 49
- Crocs BlueInfo0, 153, 204
Use Crocs's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
crocs-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099CC;
--error: #E03C31;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #58C043;
--success: #58C043;
--surface: #EDEDED;
--warning: #FFD600;
--secondary: #222222;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #222222;
--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
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
13.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9: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
Crocs gray and neutral colors
The quiet part of the Crocs palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Crocs Light GrayBackground
- HEX
- RGB
- HSL
- Crocs Surface GraySurface
- HEX
- RGB
- HSL
- Crocs Border GrayBorder
- HEX
- RGB
- HSL
- Crocs Text BlackText
- HEX
- RGB
- HSL
- Crocs Text GraySecondary text
- HEX
- RGB
- HSL
- Crocs Muted GrayMuted text
- HEX
- RGB
- HSL
About Crocs's colors
Crocs' palette is anchored by a vivid green, symbolizing energy and playfulness, with neutral grays and black for balance. The use of white and light grays ensures product imagery stands out.
Primary green contrasts with black and white for visual impact.
Neutrals provide a clean backdrop for colorful products.
Accent colors are used sparingly for notifications and highlights.
Psychology
The bright green evokes freshness, youth, and approachability, aligning with Crocs' fun brand image. Neutral tones keep the focus on the footwear and maintain a modern, accessible feel.
Evolution
Crocs' core green has remained consistent since its early branding, reinforcing recognition. The supporting palette has shifted toward lighter neutrals in recent years to modernize the digital experience.
Where Crocs uses each color
- Primary
Used in the logo, key buttons, and promotional banners.
- Secondary
Appears in navigation bars, headers, and some product backgrounds.
- Accent
Used for text on dark backgrounds and as a highlight for calls to action.
- Backgrounds
Light gray backgrounds are used throughout the website and app interfaces.
- Text
Primary black and gray tones are used for headings, body text, and muted information.
- Semantic
Green is used for success messages, yellow for warnings, red for errors, and blue for informational alerts.
Crocs color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Crocs brand color is Crocs Green, with the hex code #58C043.
Crocs Green (#58C043) in RGB is (88, 192, 67) and in CMYK is approximately (54, 0, 65, 25).
Crocs uses several grays in its UI: Crocs Light Gray (#F7F7F7), Crocs Surface Gray (#EDEDED), Crocs Border Gray (#CCCCCC), and Crocs Text Gray (#666666).
Use Crocs Green for branding and key actions, neutrals for backgrounds and surfaces, and semantic colors for status messaging. Always ensure sufficient contrast for accessibility, especially with text.
The secondary color is Crocs Black, #222222, and the accent is Crocs White, #FFFFFF. 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 Crocs's colors consistently when it generates UI.
Make something in the spirit of Crocs
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.