Nickelodeon color palette
MediaNickelodeon's color identity is defined by its iconic bright orange, paired with bold white and dark gray neutrals for contrast. The palette is playful and energetic, reflecting the brand's focus on children's entertainment.
nick.comNickelodeon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nickelodeon OrangePrimary255, 130, 0
- Nickelodeon WhiteSecondary255, 255, 255
- Nickelodeon AquaAccent0, 179, 227
Surfaces
Page, cards and dividers.- Nickelodeon Light GrayBackground245, 245, 245
- Nickelodeon Surface GraySurface242, 242, 242
- Nickelodeon Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Nickelodeon CharcoalText34, 34, 34
- Nickelodeon Medium GraySecondary text102, 102, 102
- Nickelodeon Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Nickelodeon Slime GreenSuccess110, 192, 95
- Nickelodeon YellowWarning255, 214, 0
- Nickelodeon RedError229, 57, 53
- Nickelodeon BlueInfo0, 148, 214
Use Nickelodeon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nickelodeon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0094D6;
--error: #E53935;
--accent: #00B3E3;
--border: #E0E0E0;
--primary: #FF8200;
--success: #6EC05F;
--surface: #F2F2F2;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F5F5F5;
--text-primary: #222222;
--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
14.6: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
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Nickelodeon gray and neutral colors
The quiet part of the Nickelodeon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nickelodeon Light GrayBackground
- HEX
- RGB
- HSL
- Nickelodeon Surface GraySurface
- HEX
- RGB
- HSL
- Nickelodeon Border GrayBorder
- HEX
- RGB
- HSL
- Nickelodeon CharcoalText
- HEX
- RGB
- HSL
- Nickelodeon Medium GraySecondary text
- HEX
- RGB
- HSL
- Nickelodeon Muted GrayMuted text
- HEX
- RGB
- HSL
About Nickelodeon's colors
Nickelodeon's palette centers on a vivid orange, contrasted by clean whites and playful accent colors. The scheme is designed to be energetic, youthful, and highly recognizable.
Orange and aqua create a complementary, high-contrast pairing.
Neutrals balance the vibrancy of the orange.
Accent colors are used sparingly for emphasis.
Psychology
The bright orange evokes fun, creativity, and approachability, appealing directly to children. Aqua and green accents add freshness and a sense of play.
Evolution
Nickelodeon's orange has remained consistent since its 1984 rebrand, becoming synonymous with the channel. The supporting palette has evolved to include more modern neutrals and digital-friendly accent colors.
Where Nickelodeon uses each color
- Primary
Used in the Nickelodeon logo, navigation bars, and key call-to-action buttons.
- Secondary
Applied to backgrounds, text, and secondary UI elements for clarity and contrast.
- Accent
Used for highlights, links, and interactive elements to draw attention.
- Backgrounds
Light gray backgrounds are used throughout the website and app interfaces.
- Text
Charcoal and medium gray are used for primary and secondary text for readability.
- Semantic
Slime green, yellow, red, and blue are used for status indicators, alerts, and notifications.
Nickelodeon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nickelodeon orange is #FF8200. This color is used prominently in the brand's logo and key visual elements.
Nickelodeon Orange (#FF8200) is RGB(255, 130, 0) and CMYK(0, 49, 100, 0). These values ensure accurate reproduction in digital and print formats.
Nickelodeon uses a range of grays including #F5F5F5 (Light Gray), #F2F2F2 (Surface Gray), #E0E0E0 (Border Gray), #222222 (Charcoal), and #A3A3A3 (Muted Gray) for backgrounds, surfaces, and text.
The orange (#FF8200) should dominate key brand elements, with white and grays providing balance, and accents like aqua (#00B3E3) used sparingly for highlights or interactive elements.
The secondary color is Nickelodeon White, #FFFFFF, and the accent is Nickelodeon Aqua, #00B3E3. 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 Nickelodeon's colors consistently when it generates UI.
Make something in the spirit of Nickelodeon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.