Hydro Flask color palette
ConsumerHydro Flask's color identity is centered around a vibrant, energetic blue paired with clean neutrals and functional accent colors. The palette reflects the brand's outdoor, active lifestyle focus and is used consistently across products and digital assets.
hydroflask.comHydro Flask colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hydro Flask BluePrimary0, 147, 208
- Hydro Flask BlackSecondary34, 34, 34
- Hydro Flask OrangeAccent249, 161, 27
Surfaces
Page, cards and dividers.- Hydro Flask WhiteBackground255, 255, 255
- Hydro Flask Light GraySurface246, 246, 246
- Hydro Flask Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Hydro Flask BlackText34, 34, 34
- Hydro Flask Medium GraySecondary text117, 117, 117
- Hydro Flask Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Hydro Flask GreenSuccess122, 193, 67
- Hydro Flask OrangeWarning249, 161, 27
- Hydro Flask RedError224, 58, 62
- Hydro Flask BlueInfo0, 147, 208
Use Hydro Flask's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hydro-flask-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093D0;
--error: #E03A3E;
--accent: #F9A11B;
--border: #E0E0E0;
--primary: #0093D0;
--success: #7AC143;
--surface: #F6F6F6;
--warning: #F9A11B;
--secondary: #222222;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #222222;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7: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.3: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
Hydro Flask gray and neutral colors
The quiet part of the Hydro Flask palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hydro Flask WhiteBackground
- HEX
- RGB
- HSL
- Hydro Flask Light GraySurface
- HEX
- RGB
- HSL
- Hydro Flask Border GrayBorder
- HEX
- RGB
- HSL
- Hydro Flask BlackText
- HEX
- RGB
- HSL
- Hydro Flask Medium GraySecondary text
- HEX
- RGB
- HSL
- Hydro Flask Muted GrayMuted text
- HEX
- RGB
- HSL
About Hydro Flask's colors
Hydro Flask's palette uses a bold blue as its anchor, complemented by energetic accent colors and a range of functional neutrals. The colors evoke freshness, reliability, and outdoor adventure.
Primary blue contrasts with orange accent for calls to action.
Neutrals provide clarity and legibility throughout UI.
Accent colors highlight key actions and product features.
Psychology
The blue conveys trust, clarity, and a sense of cool refreshment, aligning with Hydro Flask's hydration focus. Orange accents add energy and draw attention to important elements.
Evolution
Hydro Flask's palette has remained stable, with the blue and orange combination being a consistent hallmark. Neutrals have been refined for improved digital accessibility.
Where Hydro Flask uses each color
- Primary
Hydro Flask Blue is used for the logo, key buttons, and primary navigation highlights.
- Secondary
Hydro Flask Black appears in headers, footer backgrounds, and product text.
- Accent
Hydro Flask Orange is used for call-to-action buttons and promotional highlights.
- Backgrounds
White and light gray backgrounds are used for web pages and product displays.
- Text
Black and medium gray are used for primary and secondary text, with muted gray for disabled or less prominent information.
- Semantic
Green, orange, and red are used for success, warning, and error states in forms and notifications.
Hydro Flask color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hydro Flask brand color is Hydro Flask Blue, hex code #0093D0.
Hydro Flask Blue (#0093D0) has an RGB value of 0, 147, 208 and a CMYK value of 100, 29, 0, 18.
Hydro Flask uses a range of grays: Black (#222222), Medium Gray (#757575), Muted Gray (#BDBDBD), Light Gray (#F6F6F6), and Border Gray (#E0E0E0). These provide structure and legibility in UI and packaging.
Use Hydro Flask Blue (#0093D0) for primary branding and actions, with orange (#F9A11B) for highlights. Neutrals support backgrounds and text, ensuring accessibility and brand consistency.
The secondary color is Hydro Flask Black, #222222, and the accent is Hydro Flask Orange, #F9A11B. 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 Hydro Flask's colors consistently when it generates UI.
Make something in the spirit of Hydro Flask
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.