Philips color palette
ConsumerPhilips' brand color system is defined by its iconic Philips Blue, supported by a clean, modern palette of whites and neutral grays for clarity and trust. The palette is consistent across digital and print, reflecting the brand's heritage in healthcare and consumer electronics.
philips.comPhilips colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Philips BluePrimary10, 110, 209
- Philips Deep BlueSecondary0, 92, 185
- Philips CyanAccent0, 182, 241
Surfaces
Page, cards and dividers.- Philips WhiteBackground255, 255, 255
- Philips Light GraySurface245, 247, 250
- Philips Border GrayBorder217, 226, 236
Text
Three tiers of copy.- Philips BlackText26, 26, 26
- Philips Dark GraySecondary text77, 77, 77
- Philips Muted GrayMuted text122, 134, 154
Semantic
Feedback and state colors.- Philips GreenSuccess67, 176, 42
- Philips YellowWarning255, 182, 0
- Philips RedError229, 44, 44
- Philips BlueInfo10, 110, 209
Use Philips's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
philips-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0A6ED1;
--error: #E52C2C;
--accent: #00B6F1;
--border: #D9E2EC;
--primary: #0A6ED1;
--success: #43B02A;
--surface: #F5F7FA;
--warning: #FFB600;
--secondary: #005CB9;
--text-muted: #7A869A;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4D4D4D;
}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.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Philips background, border and text colors
The quiet part of the Philips palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Philips WhiteBackground
- HEX
- RGB
- HSL
- Philips Light GraySurface
- HEX
- RGB
- HSL
- Philips Border GrayBorder
- HEX
- RGB
- HSL
- Philips BlackText
- HEX
- RGB
- HSL
- Philips Dark GraySecondary text
- HEX
- RGB
- HSL
- Philips Muted GrayMuted text
- HEX
- RGB
- HSL
About Philips's colors
Philips' palette is built around a strong, trustworthy blue, complemented by clean whites and subtle grays for a professional, approachable look. Accent colors provide clarity for calls to action and status messaging.
Primary blue is supported by deeper and lighter blues for hierarchy.
Neutral grays balance the palette for readability.
Accent cyan and semantic colors highlight actions and statuses.
Psychology
Blue is associated with trust, reliability, and professionalism, aligning with Philips' healthcare and technology focus. The use of white and gray reinforces a sense of cleanliness and modernity.
Evolution
Philips' blue has remained consistent for decades, reinforcing brand recognition. The supporting palette has evolved to include more nuanced grays and accent colors for digital clarity.
Where Philips uses each color
- Primary
Philips Blue is used for main navigation bars, primary buttons, and key brand marks.
- Secondary
Philips Deep Blue appears in headers, footers, and secondary actions.
- Accent
Philips Cyan is used for highlights, links, and interactive elements.
- Backgrounds
Philips White and Light Gray are used for backgrounds in web and app screens.
- Text
Philips Black and Dark Gray are used for primary and secondary text, ensuring legibility.
- Semantic
Green, yellow, and red are used for success, warning, and error states in UI and dashboards.
Philips color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Philips brand color is Philips Blue, with the hex code #0A6ED1.
Philips Blue (#0A6ED1) is RGB(10, 110, 209) and CMYK(82, 47, 0, 18).
Philips uses Light Gray (#F5F7FA), Border Gray (#D9E2EC), Dark Gray (#4D4D4D), and Muted Gray (#7A869A) for backgrounds, borders, and secondary text.
Philips Blue (#0A6ED1) should be dominant in branding and primary actions, with supporting blues and neutrals for structure and clarity. Accent and semantic colors are reserved for highlights, notifications, and status messages.
The secondary color is Philips Deep Blue, #005CB9, and the accent is Philips Cyan, #00B6F1. 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 Philips's colors consistently when it generates UI.
Make something in the spirit of Philips
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.