Opera color palette
TechOpera's color identity is defined by its vibrant red primary, complemented by deep darks and neutral grays for a modern, high-contrast UI. The palette is minimal, focusing on clarity and brand recognition across digital platforms.
opera.comOpera colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Opera RedPrimary255, 27, 45
- Opera BlackSecondary26, 26, 26
- Opera BlueAccent0, 114, 198
Surfaces
Page, cards and dividers.- Opera WhiteBackground255, 255, 255
- Opera Light GraySurface245, 246, 250
- Opera Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Opera Text BlackText26, 26, 26
- Opera Text GraySecondary text91, 91, 91
- Opera Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Opera GreenSuccess27, 196, 125
- Opera YellowWarning255, 180, 0
- Opera RedError255, 27, 45
- Opera BlueInfo0, 114, 198
Use Opera's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
opera-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072C6;
--error: #FF1B2D;
--accent: #0072C6;
--border: #E5E5E5;
--primary: #FF1B2D;
--success: #1BC47D;
--surface: #F5F6FA;
--warning: #FFB400;
--secondary: #1A1A1A;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #5B5B5B;
}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.1: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
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Opera background, border and text colors
The quiet part of the Opera palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Opera WhiteBackground
- HEX
- RGB
- HSL
- Opera Light GraySurface
- HEX
- RGB
- HSL
- Opera Border GrayBorder
- HEX
- RGB
- HSL
- Opera Text BlackText
- HEX
- RGB
- HSL
- Opera Text GraySecondary text
- HEX
- RGB
- HSL
- Opera Muted GrayMuted text
- HEX
- RGB
- HSL
About Opera's colors
Opera’s palette centers on a bold red, contrasted with deep neutrals and a signature blue accent. The system is designed for high visibility and modern digital interfaces.
Opera Red is paired with dark and light neutrals for contrast.
Accent blue is used sparingly for highlights and links.
Grays provide structure and hierarchy in the UI.
Psychology
Red conveys energy, urgency, and brand recognition, making Opera instantly identifiable. The dark and neutral tones ensure readability and a professional feel.
Evolution
Opera’s palette has remained consistent, with the red primary as a longstanding hallmark. Recent updates have refined the neutral grays and introduced blue as a subtle accent.
Where Opera uses each color
- Primary
Opera Red is used for the logo, primary buttons, and key highlights throughout the app and website.
- Secondary
Opera Black appears in navigation bars, footers, and modal backgrounds.
- Accent
Opera Blue is used for links, selected states, and some icons.
- Backgrounds
Opera White and Light Gray are used for main backgrounds and content areas.
- Text
Opera Text Black and Text Gray are used for primary and secondary text, ensuring legibility.
- Semantic
Opera Green, Yellow, and Red are used for success, warning, and error states in notifications and forms.
Opera color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Opera primary color hex code is #FF1B2D. This red is used prominently in the logo and key UI elements.
Opera Red (#FF1B2D) is RGB(255, 27, 45) and CMYK(0, 89, 82, 0). Use these for print and digital consistency.
Opera uses Opera Black (#1A1A1A), Opera Light Gray (#F5F6FA), and Opera Border Gray (#E5E5E5) for backgrounds and borders. These ensure clarity and a modern look.
Use Opera Red (#FF1B2D) for primary actions and branding, with neutrals for backgrounds and text. Accent blue (#0072C6) should be reserved for links and highlights.
The secondary color is Opera Black, #1A1A1A, and the accent is Opera Blue, #0072C6. 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 Opera's colors consistently when it generates UI.
Make something in the spirit of Opera
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.