Ray-Ban color palette
FashionRay-Ban's color identity is anchored by its iconic Ray-Ban Red, paired with deep black and neutral grays for a classic, timeless look. The palette reflects the brand's heritage in eyewear and its association with bold, confident style.
ray-ban.comRay-Ban colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ray-Ban RedPrimary213, 43, 30
- Ray-Ban BlackSecondary0, 0, 0
- Ray-Ban WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Ray-Ban Light GrayBackground245, 245, 245
- Ray-Ban Surface GraySurface229, 229, 229
- Ray-Ban Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Ray-Ban CharcoalText34, 34, 34
- Ray-Ban Medium GraySecondary text85, 85, 85
- Ray-Ban Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Ray-Ban Success GreenSuccess75, 181, 67
- Ray-Ban Warning YellowWarning255, 179, 0
- Ray-Ban Error RedError213, 43, 30
- Ray-Ban Info BlueInfo25, 118, 210
Use Ray-Ban's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ray-ban-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D52B1E;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #D52B1E;
--success: #4BB543;
--surface: #E5E5E5;
--warning: #FFB300;
--secondary: #000000;
--text-muted: #888888;
--background: #F5F5F5;
--text-primary: #222222;
--text-secondary: #555555;
}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.6: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
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Ray-Ban gray and neutral colors
The quiet part of the Ray-Ban palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ray-Ban Light GrayBackground
- HEX
- RGB
- HSL
- Ray-Ban Surface GraySurface
- HEX
- RGB
- HSL
- Ray-Ban Border GrayBorder
- HEX
- RGB
- HSL
- Ray-Ban CharcoalText
- HEX
- RGB
- HSL
- Ray-Ban Medium GraySecondary text
- HEX
- RGB
- HSL
- Ray-Ban Muted GrayMuted text
- HEX
- RGB
- HSL
About Ray-Ban's colors
Ray-Ban's palette centers on a bold red, contrasted with black and white for a high-impact, recognizable identity. The supporting grays provide a neutral framework for product and content presentation.
Primary red is contrasted by deep black and crisp white.
Grays are used to balance and soften the palette.
Accent colors are reserved for functional UI states.
Psychology
Red evokes energy, passion, and confidence, aligning with Ray-Ban's bold brand persona. Black and gray tones reinforce a sense of timelessness and sophistication.
Evolution
Ray-Ban's color palette has remained largely stable, with Ray-Ban Red and Black as consistent core elements. Over time, the use of grays and subtle UI tones has increased to support digital interfaces.
Where Ray-Ban uses each color
- Primary
Ray-Ban Red is used for the logo, key buttons, and promotional banners.
- Secondary
Ray-Ban Black appears in navigation bars, product frames, and footer backgrounds.
- Accent
Ray-Ban White is used for text on dark backgrounds and as a background for product imagery.
- Backgrounds
Ray-Ban Light Gray is the default page background on the website.
- Text
Ray-Ban Charcoal and Medium Gray are used for primary and secondary text across the site.
- Semantic
Success Green, Warning Yellow, and Error Red are used for alerts, notifications, and status indicators.
Ray-Ban color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Ray-Ban brand color is Ray-Ban Red, hex code #D52B1E.
Ray-Ban Red is RGB(213, 43, 30) and CMYK(0, 80, 86, 16).
Ray-Ban uses a range of grays including #F5F5F5 (Light Gray), #E5E5E5 (Surface Gray), #CCCCCC (Border Gray), and #222222 (Charcoal) for backgrounds, borders, and text.
Use Ray-Ban Red for brand elements and calls to action, with black and white for contrast and grays for backgrounds and text. Semantic colors should be reserved for status and feedback messaging.
The secondary color is Ray-Ban Black, #000000, and the accent is Ray-Ban White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Ray-Ban's colors consistently when it generates UI.
Make something in the spirit of Ray-Ban
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.