Canon color palette
ConsumerCanon's color identity is centered on its iconic red, which is synonymous with the brand and used consistently across all touchpoints. The supporting palette consists of neutral grays and black for clarity and professionalism.
canon.comCanon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Canon RedPrimary188, 0, 36
- Canon BlackSecondary0, 0, 0
- Canon WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Canon Light GrayBackground244, 244, 244
- Canon Surface GraySurface229, 229, 229
- Canon Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Canon Text BlackText34, 34, 34
- Canon Text GraySecondary text102, 102, 102
- Canon Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Canon Success GreenSuccess67, 160, 71
- Canon Warning YellowWarning249, 168, 37
- Canon Error RedError211, 47, 47
- Canon Info BlueInfo25, 118, 210
Use Canon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
canon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #BC0024;
--success: #43A047;
--surface: #E5E5E5;
--warning: #F9A825;
--secondary: #000000;
--text-muted: #999999;
--background: #F4F4F4;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Canon gray and neutral colors
The quiet part of the Canon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Canon Light GrayBackground
- HEX
- RGB
- HSL
- Canon Surface GraySurface
- HEX
- RGB
- HSL
- Canon Border GrayBorder
- HEX
- RGB
- HSL
- Canon Text BlackText
- HEX
- RGB
- HSL
- Canon Text GraySecondary text
- HEX
- RGB
- HSL
- Canon Muted GrayMuted text
- HEX
- RGB
- HSL
About Canon's colors
Canon's palette is built around a vivid red, supported by a range of neutral grays and black for contrast and legibility. This approach ensures strong brand recognition and a clean, professional appearance.
Primary red paired with white for high contrast.
Neutral grays used for backgrounds and surfaces.
Accent colors reserved for alerts and status messaging.
Psychology
Red conveys energy, passion, and confidence, aligning with Canon's innovative and bold brand image. The neutral tones add a sense of reliability and clarity.
Evolution
Canon's red has remained consistent over decades, reinforcing brand recognition. The supporting neutral palette has been refined for modern digital clarity.
Where Canon uses each color
- Primary
Canon Red is used in the logo, key buttons, and major calls to action.
- Secondary
Canon Black appears in navigation bars, footers, and text.
- Accent
Canon White is used for backgrounds, logo contrast, and negative space.
- Backgrounds
Canon Light Gray is the main page background for digital interfaces.
- Text
Canon Text Black and Canon Text Gray are used for primary and secondary text, respectively.
- Semantic
Success, warning, error, and info colors are used for system alerts, notifications, and status indicators.
Canon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Canon brand red is #BC0024. This color is used in the logo and primary brand elements.
Canon Red (#BC0024) is RGB(188, 0, 36) and CMYK(0, 100, 81, 26). These values ensure consistency across digital and print media.
Canon uses a range of grays including Canon Light Gray (#F4F4F4), Canon Surface Gray (#E5E5E5), and Canon Border Gray (#CCCCCC) for backgrounds, surfaces, and borders. These neutrals provide a clean, modern interface.
Canon Red (#BC0024) should be reserved for key brand elements and calls to action, while neutrals and black support layout and readability. Accent and semantic colors are used sparingly for alerts and status.
The secondary color is Canon Black, #000000, and the accent is Canon White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 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 Canon's colors consistently when it generates UI.
Make something in the spirit of Canon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.