OnePlus color palette
TechOnePlus uses a bold, high-contrast color system centered around its signature red, complemented by deep blacks, clean whites, and neutral grays for a modern tech aesthetic.
oneplus.comOnePlus colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- OnePlus RedPrimary245, 1, 12
- OnePlus BlackSecondary0, 0, 0
- OnePlus WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- OnePlus Light GrayBackground247, 247, 248
- OnePlus Surface WhiteSurface255, 255, 255
- OnePlus Border GrayBorder229, 230, 235
Text
Three tiers of copy.- OnePlus CharcoalText26, 26, 26
- OnePlus Medium GraySecondary text102, 102, 102
- OnePlus Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- OnePlus GreenSuccess0, 200, 83
- OnePlus AmberWarning255, 179, 0
- OnePlus RedError245, 1, 12
- OnePlus BlueInfo33, 150, 243
Use OnePlus's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
oneplus-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #F5010C;
--accent: #FFFFFF;
--border: #E5E6EB;
--primary: #F5010C;
--success: #00C853;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #000000;
--text-muted: #999999;
--background: #F7F7F8;
--text-primary: #1A1A1A;
--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
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
OnePlus gray and neutral colors
The quiet part of the OnePlus palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- OnePlus Light GrayBackground
- HEX
- RGB
- HSL
- OnePlus Surface WhiteSurface
- HEX
- RGB
- HSL
- OnePlus Border GrayBorder
- HEX
- RGB
- HSL
- OnePlus CharcoalText
- HEX
- RGB
- HSL
- OnePlus Medium GraySecondary text
- HEX
- RGB
- HSL
- OnePlus Muted GrayMuted text
- HEX
- RGB
- HSL
About OnePlus's colors
OnePlus builds its palette around a vibrant red, contrasted with black, white, and neutral grays for clarity and impact. The supporting colors are used sparingly to maintain focus on the brand's energetic identity.
Red and black create strong visual contrast.
Neutral grays balance the boldness of red.
Accent colors are reserved for functional UI feedback.
Psychology
The red conveys energy, passion, and confidence, while the black and white elements add sophistication and clarity. Neutral grays help maintain a clean, modern interface.
Evolution
The OnePlus palette has remained consistent since launch, with red always at the core. Over time, the use of neutrals and subtle accent colors has increased for improved usability.
Where OnePlus uses each color
- Primary
OnePlus Red is used in the logo, call-to-action buttons, and key highlights across digital and print.
- Secondary
OnePlus Black appears in navigation bars, footers, and product backgrounds.
- Accent
OnePlus White is used for backgrounds, cards, and text on colored surfaces.
- Backgrounds
OnePlus Light Gray is the main UI background on websites and apps.
- Text
OnePlus Charcoal and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Green, amber, red, and blue are used for success, warning, error, and informational UI states.
OnePlus color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official OnePlus primary color is #F5010C, known as OnePlus Red. This color is used for the logo and key highlights.
OnePlus Red (#F5010C) in RGB is (245, 1, 12). In CMYK, it is approximately (0, 99, 95, 4).
OnePlus uses several grays, including #F7F7F8 (Light Gray) for backgrounds and #E5E6EB (Border Gray) for dividers. Text colors include #1A1A1A (Charcoal) and #666666 (Medium Gray).
Use OnePlus Red (#F5010C) for primary actions and highlights, with black, white, and grays for backgrounds and text. Semantic colors like green, amber, and blue are reserved for status and feedback elements.
The secondary color is OnePlus Black, #000000, and the accent is OnePlus 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 OnePlus's colors consistently when it generates UI.
Make something in the spirit of OnePlus
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.