Nerf color palette
ConsumerNerf's color identity is defined by its bold, energetic orange and deep blue, reflecting the brand's playful and action-packed spirit. The palette is highly recognizable and consistent across product packaging, digital, and promotional materials.
nerf.hasbro.comNerf colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nerf OrangePrimary255, 111, 0
- Nerf BlueSecondary0, 51, 160
- Nerf YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Nerf WhiteBackground255, 255, 255
- Nerf Light GraySurface242, 242, 242
- Nerf GrayBorder209, 211, 212
Text
Three tiers of copy.- Nerf CharcoalText34, 34, 34
- Nerf Medium GraySecondary text85, 85, 85
- Nerf Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Nerf GreenSuccess67, 176, 42
- Nerf Warning YellowWarning255, 184, 28
- Nerf RedError228, 0, 43
- Nerf Info BlueInfo0, 156, 222
Use Nerf's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nerf-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CDE;
--error: #E4002B;
--accent: #FFD100;
--border: #D1D3D4;
--primary: #FF6F00;
--success: #43B02A;
--surface: #F2F2F2;
--warning: #FFB81C;
--secondary: #0033A0;
--text-muted: #888888;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Nerf gray and neutral colors
The quiet part of the Nerf palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nerf WhiteBackground
- HEX
- RGB
- HSL
- Nerf Light GraySurface
- HEX
- RGB
- HSL
- Nerf GrayBorder
- HEX
- RGB
- HSL
- Nerf CharcoalText
- HEX
- RGB
- HSL
- Nerf Medium GraySecondary text
- HEX
- RGB
- HSL
- Nerf Muted GrayMuted text
- HEX
- RGB
- HSL
About Nerf's colors
Nerf's palette uses high-contrast, saturated hues to evoke energy and excitement. The combination of orange, blue, and yellow ensures strong visual impact and brand recognition.
Orange and blue are complementary, creating dynamic contrast.
Yellow accentuates key actions and highlights.
Neutrals balance the vivid colors for readability.
Psychology
The bold orange conveys enthusiasm and action, while blue adds trust and reliability. Yellow highlights reinforce a sense of fun and alertness.
Evolution
Nerf's core orange and blue palette has remained stable for decades, reinforcing brand consistency. Minor adjustments have been made to supporting grays and accent colors for digital clarity.
Where Nerf uses each color
- Primary
Nerf Orange is used for logos, primary buttons, and key product highlights.
- Secondary
Nerf Blue appears on packaging backgrounds, navigation bars, and secondary CTAs.
- Accent
Nerf Yellow is used for callouts, highlights, and trigger elements on products.
- Backgrounds
Nerf White and Light Gray are used for web backgrounds and product photography backdrops.
- Text
Nerf Charcoal and Medium Gray are used for primary and secondary text across digital and print.
- Semantic
Nerf Green, Warning Yellow, and Red are used for success, warning, and error states in digital interfaces.
Nerf color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nerf brand color is Nerf Orange, with hex code #FF6F00.
Nerf Orange (#FF6F00) is RGB(255, 111, 0) and CMYK(0, 56, 100, 0).
Nerf uses Light Gray (#F2F2F2), Gray (#D1D3D4), and Charcoal (#222222) for backgrounds, borders, and text.
Use Nerf Orange for primary actions and branding, Nerf Blue for secondary elements, and Nerf Yellow for accents. Neutrals and semantic colors should support readability and accessibility.
The secondary color is Nerf Blue, #0033A0, and the accent is Nerf Yellow, #FFD100. 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 Nerf's colors consistently when it generates UI.
Make something in the spirit of Nerf
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.