Tide color palette
ConsumerTide's color identity is defined by its bold blue and orange, supported by bright yellow and clean whites, reflecting freshness and energy. The palette is consistent across packaging, digital, and advertising materials.
tide.comTide colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tide BluePrimary64, 80, 251
- Tide OrangeSecondary255, 80, 0
- Tide YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Tide WhiteBackground255, 255, 255
- Tide Light GraySurface245, 246, 250
- Tide Soft GrayBorder209, 213, 219
Text
Three tiers of copy.- Tide BlackText26, 26, 26
- Tide Dark GraySecondary text75, 85, 99
- Tide Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Tide Fresh GreenSuccess67, 176, 42
- Tide Warning YellowWarning255, 179, 0
- Tide Error RedError229, 57, 53
- Tide Info BlueInfo2, 136, 209
Use Tide's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tide-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #FFD600;
--border: #D1D5DB;
--primary: #4050FB;
--success: #43B02A;
--surface: #F5F6FA;
--warning: #FFB300;
--secondary: #FF5000;
--text-muted: #6B7280;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Tide background, border and text colors
The quiet part of the Tide palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tide WhiteBackground
- HEX
- RGB
- HSL
- Tide Light GraySurface
- HEX
- RGB
- HSL
- Tide Soft GrayBorder
- HEX
- RGB
- HSL
- Tide BlackText
- HEX
- RGB
- HSL
- Tide Dark GraySecondary text
- HEX
- RGB
- HSL
- Tide Muted GrayMuted text
- HEX
- RGB
- HSL
About Tide's colors
Tide's palette uses high-contrast, saturated colors to convey cleanliness and energy. The combination of blue, orange, and yellow is instantly recognizable and distinct in the consumer goods sector.
Primary blue contrasts with vibrant orange for visual impact.
Yellow accent adds brightness and draws attention to key elements.
Neutral grays and whites balance the bold colors for clarity.
Psychology
Blue evokes trust and cleanliness, while orange and yellow convey energy and warmth. The palette is designed to feel fresh, reliable, and approachable.
Evolution
Tide's core palette has remained stable for decades, maintaining brand recognition. Minor adjustments have been made to digital tones for accessibility and consistency across media.
Where Tide uses each color
- Primary
Tide Blue is used for the logo, navigation bars, and key call-to-action buttons.
- Secondary
Tide Orange appears in the logo ring, packaging highlights, and promotional banners.
- Accent
Tide Yellow is used for emphasis, such as sale tags, icons, and product details.
- Backgrounds
Tide White and Light Gray are used for website backgrounds and product photography.
- Text
Tide Black and Dark Gray are used for primary and secondary text across digital and print.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and notifications in digital interfaces.
Tide color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tide primary color is #4050FB, known as Tide Blue. This color is central to the brand's identity.
Tide Blue (#4050FB) in RGB is (64, 80, 251). For CMYK, it is approximately (75, 68, 0, 2).
Tide uses Light Gray (#F5F6FA) for surfaces and Soft Gray (#D1D5DB) for borders and dividers. These neutrals support the vibrant brand colors without overpowering them.
Use Tide Blue (#4050FB) for primary actions and branding, with Orange (#FF5000) and Yellow (#FFD600) for highlights and accents. Grays and whites provide balance and ensure readability in digital and print applications.
The secondary color is Tide Orange, #FF5000, and the accent is Tide Yellow, #FFD600. Together with the primary they make up the three brand colors at the top of this page.
6 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 Tide's colors consistently when it generates UI.
Make something in the spirit of Tide
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.