Yeti color palette
ConsumerYeti's color identity is built around deep navy and neutral tones, reflecting durability and rugged outdoor utility. The palette is minimal, emphasizing function and clarity across its products and digital presence.
yeti.comYeti colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Yeti NavyPrimary0, 38, 60
- Yeti SlateSecondary110, 122, 131
- Yeti Blue AccentAccent0, 174, 239
Surfaces
Page, cards and dividers.- Yeti Ice GrayBackground245, 247, 248
- Yeti WhiteSurface255, 255, 255
- Yeti Light GrayBorder209, 214, 218
Text
Three tiers of copy.- Yeti CharcoalText34, 34, 34
- Yeti SlateSecondary text110, 122, 131
- Yeti FogMuted text157, 165, 171
Semantic
Feedback and state colors.- Yeti Success GreenSuccess75, 174, 79
- Yeti Warning OrangeWarning245, 166, 35
- Yeti Error RedError208, 2, 27
- Yeti Blue AccentInfo0, 174, 239
Use Yeti's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
yeti-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #D0021B;
--accent: #00AEEF;
--border: #D1D6DA;
--primary: #00263C;
--success: #4BAE4F;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #6E7A83;
--text-muted: #9DA5AB;
--background: #F5F7F8;
--text-primary: #222222;
--text-secondary: #6E7A83;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Yeti background, border and text colors
The quiet part of the Yeti palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Yeti Ice GrayBackground
- HEX
- RGB
- HSL
- Yeti WhiteSurface
- HEX
- RGB
- HSL
- Yeti Light GrayBorder
- HEX
- RGB
- HSL
- Yeti CharcoalText
- HEX
- RGB
- HSL
- Yeti SlateSecondary text
- HEX
- RGB
- HSL
- Yeti FogMuted text
- HEX
- RGB
- HSL
About Yeti's colors
Yeti's palette is anchored by a deep navy, supported by cool grays and a vibrant blue accent for clarity and trust. The overall effect is utilitarian and approachable, with high contrast for readability.
Primary navy contrasts with white and light gray backgrounds.
Accent blue is used sparingly for calls to action.
Neutral grays unify product and digital interfaces.
Psychology
The navy conveys reliability and ruggedness, while the blue accent signals energy and approachability. Neutral grays keep the focus on content and product imagery.
Evolution
Yeti's palette has remained stable, with navy as the core since its inception. Minor adjustments have been made to accent and gray tones for improved digital accessibility.
Where Yeti uses each color
- Primary
Used for navigation bars, headers, and logo backgrounds.
- Secondary
Appears in secondary buttons, icons, and some product details.
- Accent
Applied to primary call-to-action buttons and interactive elements.
- Backgrounds
Ice Gray and White are used for main page backgrounds and product displays.
- Text
Charcoal is standard for body text, with Slate and Fog for secondary and muted text.
- Semantic
Green, orange, and red are reserved for status messages and alerts in digital interfaces.
Yeti color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Yeti primary color is #00263C, known as Yeti Navy. This color is used across branding and navigation.
Yeti Navy (#00263C) in RGB is 0, 38, 60. In CMYK, it is approximately 100, 37, 0, 76.
Yeti uses Ice Gray (#F5F7F8) for backgrounds and Light Gray (#D1D6DA) for borders and dividers. These neutrals provide a clean, minimal backdrop for products.
Use Yeti Navy (#00263C) for primary navigation and branding, with Yeti Blue Accent (#00AEEF) for calls to action. Reserve neutral grays for backgrounds and text to maintain clarity and hierarchy.
The secondary color is Yeti Slate, #6E7A83, and the accent is Yeti Blue Accent, #00AEEF. Together with the primary they make up the three brand colors at the top of this page.
2 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 Yeti's colors consistently when it generates UI.
Make something in the spirit of Yeti
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.