Panasonic color palette
ConsumerPanasonic's color identity is defined by its deep blue primary, reflecting reliability and technological precision. The palette uses crisp whites and cool grays for clarity and modernity across digital and physical touchpoints.
panasonic.comPanasonic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Panasonic BluePrimary0, 73, 171
- Panasonic WhiteSecondary255, 255, 255
- Accent BlueAccent0, 112, 201
Surfaces
Page, cards and dividers.- Light Gray BackgroundBackground244, 246, 248
- Panel GraySurface229, 232, 235
- Divider GrayBorder194, 199, 204
Text
Three tiers of copy.- Primary Text BlackText26, 26, 26
- Secondary Text GraySecondary text77, 77, 77
- Muted Text GrayMuted text122, 122, 122
Semantic
Feedback and state colors.- Success GreenSuccess0, 135, 62
- Warning YellowWarning255, 182, 0
- Error RedError211, 47, 47
- Info BlueInfo25, 118, 210
Use Panasonic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
panasonic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #0070C9;
--border: #C2C7CC;
--primary: #0049AB;
--success: #00873E;
--surface: #E5E8EB;
--warning: #FFB600;
--secondary: #FFFFFF;
--text-muted: #7A7A7A;
--background: #F4F6F8;
--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
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
Panasonic background, border and text colors
The quiet part of the Panasonic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Light Gray BackgroundBackground
- HEX
- RGB
- HSL
- Panel GraySurface
- HEX
- RGB
- HSL
- Divider GrayBorder
- HEX
- RGB
- HSL
- Primary Text BlackText
- HEX
- RGB
- HSL
- Secondary Text GraySecondary text
- HEX
- RGB
- HSL
- Muted Text GrayMuted text
- HEX
- RGB
- HSL
About Panasonic's colors
Panasonic's palette is anchored by a trustworthy blue, complemented by clean whites and functional grays for a professional, high-tech appearance. Accent and semantic colors are used sparingly to maintain clarity and focus.
Primary blue contrasts with white for high legibility.
Accent blue is used for interactive elements.
Grays provide neutral backgrounds and structure.
Psychology
The deep blue conveys trust, dependability, and technological expertise. Whites and grays reinforce a sense of cleanliness and simplicity.
Evolution
Panasonic's blue has remained consistent for decades, reinforcing brand recognition. The supporting palette has evolved to include lighter grays and more neutral tones for digital clarity.
Where Panasonic uses each color
- Primary
Used in the Panasonic logo, navigation bars, and key call-to-action buttons.
- Secondary
White is the main background for websites, packaging, and printed materials.
- Accent
Accent blue highlights links, icons, and active states in digital interfaces.
- Backgrounds
Light gray backgrounds are used for content areas and secondary sections.
- Text
Primary black and gray tones are used for all body and headline text.
- Semantic
Success, warning, error, and info colors are used for notifications and status indicators in digital products.
Panasonic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Panasonic primary color is #0049AB, known as Panasonic Blue. It is used for the logo and key brand elements.
Panasonic Blue (#0049AB) in RGB is (0, 73, 171). In CMYK, it is approximately (100, 57, 0, 33).
Panasonic uses Light Gray Background (#F4F6F8), Panel Gray (#E5E8EB), and Divider Gray (#C2C7CC) for UI structure and backgrounds. These neutrals provide clarity and separation across digital and print materials.
Use Panasonic Blue (#0049AB) for primary branding and navigation, with white and grays for backgrounds and structure. Accent blue and semantic colors should be used sparingly for highlights and status indications.
The secondary color is Panasonic White, #FFFFFF, and the accent is Accent Blue, #0070C9. 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 Panasonic's colors consistently when it generates UI.
Make something in the spirit of Panasonic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.