Nothing color palette
TechNothing's brand color system is minimalist, focusing on monochrome tones with a signature red accent, reflecting its transparent hardware and stripped-back design ethos. The palette emphasizes clarity, simplicity, and a futuristic tech aesthetic.
nothing.techNothing colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nothing WhitePrimary255, 255, 255
- Nothing BlackSecondary0, 0, 0
- Nothing RedAccent255, 40, 40
Surfaces
Page, cards and dividers.- Nothing CharcoalBackground24, 24, 24
- Nothing Surface GraySurface34, 34, 34
- Nothing Light GrayBorder224, 224, 224
Text
Three tiers of copy.- Nothing White TextText255, 255, 255
- Nothing Secondary GraySecondary text176, 176, 176
- Nothing Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Nothing Success GreenSuccess60, 227, 125
- Nothing Warning YellowWarning255, 214, 0
- Nothing Error RedError255, 40, 40
- Nothing Info BlueInfo79, 195, 247
Use Nothing's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nothing-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4FC3F7;
--error: #FF2828;
--accent: #FF2828;
--border: #E0E0E0;
--primary: #FFFFFF;
--success: #3CE37D;
--surface: #222222;
--warning: #FFD600;
--secondary: #000000;
--text-muted: #888888;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #B0B0B0;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
5.0:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Nothing gray, dark and neutral colors
Nothing runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Nothing CharcoalBackground
- HEX
- RGB
- HSL
- Nothing Surface GraySurface
- HEX
- RGB
- HSL
- Nothing Light GrayBorder
- HEX
- RGB
- HSL
- Nothing White TextText
- HEX
- RGB
- HSL
- Nothing Secondary GraySecondary text
- HEX
- RGB
- HSL
- Nothing Muted GrayMuted text
- HEX
- RGB
- HSL
About Nothing's colors
Nothing's color palette is built on high-contrast monochrome with a single bold accent, reinforcing the brand's focus on clarity and transparency. The use of red as an accent draws attention to key actions and highlights.
Primary white and black provide strong contrast.
Red accent is used sparingly for emphasis.
Gray tones support depth and hierarchy.
Psychology
The monochrome base conveys simplicity, honesty, and modernity, while the red accent signals energy and urgency. This combination appeals to a tech-savvy audience seeking clarity and innovation.
Evolution
Nothing's palette has remained consistent since launch, emphasizing minimalism and transparency. The restrained use of color has become a core part of its brand identity.
Where Nothing uses each color
- Primary
Used for backgrounds, product imagery, and primary UI surfaces.
- Secondary
Applied to text, icons, and device hardware details.
- Accent
Highlights call-to-action buttons, notifications, and key interface elements.
- Backgrounds
Charcoal and surface grays are used for app and website backgrounds.
- Text
White and gray tones are used for primary and secondary text throughout digital and physical assets.
- Semantic
Green, yellow, and red are used for status indicators and alerts in the UI.
Nothing color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Nothing brand color is white (#FFFFFF), with a signature accent red (#FF2828). These are used throughout the brand's digital and physical assets.
Nothing Red is #FF2828, which is RGB(255, 40, 40). In CMYK, it is approximately 0, 84, 84, 0.
Nothing uses several neutral tones, including Nothing Charcoal (#181818), Surface Gray (#222222), and Light Gray (#E0E0E0). These provide depth and hierarchy in the interface.
Use white and black as the primary surfaces, with red reserved for accents and calls to action. Grays structure the UI, and semantic colors are used for status and feedback.
The secondary color is Nothing Black, #000000, and the accent is Nothing Red, #FF2828. 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 Nothing's colors consistently when it generates UI.
Make something in the spirit of Nothing
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.