Tempur-Pedic color palette
ConsumerTempur-Pedic's color identity is centered around a deep blue, conveying trust, comfort, and quality. The palette is complemented by clean whites and subtle grays for a premium, restful feel.
tempurpedic.comTempur-Pedic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tempur-Pedic Deep BluePrimary0, 32, 91
- Tempur-Pedic Slate GraySecondary108, 122, 137
- Tempur-Pedic Sky BlueAccent0, 173, 239
Surfaces
Page, cards and dividers.- Tempur-Pedic WhiteBackground255, 255, 255
- Tempur-Pedic Light GraySurface246, 247, 248
- Tempur-Pedic Soft Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Tempur-Pedic CharcoalText34, 34, 34
- Tempur-Pedic Slate GraySecondary text108, 122, 137
- Tempur-Pedic Muted GrayMuted text170, 178, 189
Semantic
Feedback and state colors.- Tempur-Pedic Success GreenSuccess75, 181, 67
- Tempur-Pedic Warning AmberWarning255, 179, 0
- Tempur-Pedic Error RedError215, 38, 61
- Tempur-Pedic Sky BlueInfo0, 173, 239
Use Tempur-Pedic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tempur-pedic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00ADEF;
--error: #D7263D;
--accent: #00ADEF;
--border: #D1D5DB;
--primary: #00205B;
--success: #4BB543;
--surface: #F6F7F8;
--warning: #FFB300;
--secondary: #6C7A89;
--text-muted: #AAB2BD;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6C7A89;
}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.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Tempur-Pedic gray and neutral colors
The quiet part of the Tempur-Pedic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tempur-Pedic WhiteBackground
- HEX
- RGB
- HSL
- Tempur-Pedic Light GraySurface
- HEX
- RGB
- HSL
- Tempur-Pedic Soft Border GrayBorder
- HEX
- RGB
- HSL
- Tempur-Pedic CharcoalText
- HEX
- RGB
- HSL
- Tempur-Pedic Slate GraySecondary text
- HEX
- RGB
- HSL
- Tempur-Pedic Muted GrayMuted text
- HEX
- RGB
- HSL
About Tempur-Pedic's colors
Tempur-Pedic's palette uses a deep blue as its anchor, supported by neutral grays and clean whites to evoke calm and reliability. Accent blue adds a touch of vibrancy for calls to action and highlights.
Primary blue contrasts with white backgrounds for legibility.
Grays provide hierarchy and subtle separation.
Accent blue is used sparingly for emphasis.
Psychology
The deep blue communicates trust, stability, and premium quality, aligning with the brand's sleep and wellness focus. Soft grays and whites reinforce a sense of cleanliness and relaxation.
Evolution
Tempur-Pedic's palette has remained consistent, with deep blue as the core since its inception. Minor adjustments have refined the accent and gray tones for modern digital use.
Where Tempur-Pedic uses each color
- Primary
Used in the logo, main navigation bar, and key calls to action.
- Secondary
Appears in secondary buttons, navigation highlights, and footers.
- Accent
Used for links, icons, and promotional banners.
- Backgrounds
White and light gray backgrounds dominate product pages and informational sections.
- Text
Charcoal and slate gray are used for primary and secondary text throughout the website.
- Semantic
Green, amber, and red are used for success, warning, and error messages in forms and notifications.
Tempur-Pedic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tempur-Pedic primary brand color is #00205B. This deep blue is used in the logo and main navigation.
The RGB value for Tempur-Pedic Deep Blue (#00205B) is (0, 32, 91). In CMYK, it is approximately (100, 65, 0, 64).
Tempur-Pedic uses several grays, including Slate Gray (#6C7A89), Light Gray (#F6F7F8), and Muted Gray (#AAB2BD), for backgrounds, borders, and muted text. These provide a clean, restful interface.
Primary blue (#00205B) should be reserved for key branding and calls to action, while grays and whites form the background and text hierarchy. Accent blue (#00ADEF) is used sparingly for highlights and interactive elements.
The secondary color is Tempur-Pedic Slate Gray, #6C7A89, and the accent is Tempur-Pedic Sky Blue, #00ADEF. 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 Tempur-Pedic's colors consistently when it generates UI.
Make something in the spirit of Tempur-Pedic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.