Ninja color palette
ConsumerNinja is a consumer appliance brand known for its bold, high-contrast color palette centered around deep black and vibrant blue. Its visual identity emphasizes modernity and performance through a sleek, energetic look.
ninjakitchen.comNinja colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ninja Deep BluePrimary28, 42, 57
- Ninja Electric BlueSecondary0, 174, 239
- Ninja Silver GrayAccent230, 231, 232
Surfaces
Page, cards and dividers.- Ninja WhiteBackground255, 255, 255
- Ninja Light GraySurface245, 246, 247
- Ninja Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Ninja CharcoalText34, 34, 34
- Ninja Medium GraySecondary text90, 90, 90
- Ninja Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Ninja Success GreenSuccess65, 184, 131
- Ninja Warning OrangeWarning245, 166, 35
- Ninja Error RedError208, 2, 27
- Ninja Info BlueInfo74, 144, 226
Use Ninja's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ninja-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #D0021B;
--accent: #E6E7E8;
--border: #D1D3D4;
--primary: #1C2A39;
--success: #41B883;
--surface: #F5F6F7;
--warning: #F5A623;
--secondary: #00AEEF;
--text-muted: #8A8A8A;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5A5A5A;
}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.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4: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
Ninja gray and neutral colors
The quiet part of the Ninja palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ninja WhiteBackground
- HEX
- RGB
- HSL
- Ninja Light GraySurface
- HEX
- RGB
- HSL
- Ninja Border GrayBorder
- HEX
- RGB
- HSL
- Ninja CharcoalText
- HEX
- RGB
- HSL
- Ninja Medium GraySecondary text
- HEX
- RGB
- HSL
- Ninja Muted GrayMuted text
- HEX
- RGB
- HSL
About Ninja's colors
Ninja's palette is built around a deep blue primary and high-contrast accents, creating a modern and energetic visual identity. The use of black, blue, and metallic grays reinforces a sense of precision and performance.
Primary blue contrasts with white and silver for clarity.
Electric blue is used for highlights and calls to action.
Neutral grays balance the boldness of the primary colors.
Psychology
The deep blue and black convey trust, reliability, and high-tech performance. Bright blue accents add energy and draw attention to key actions.
Evolution
Ninja's palette has remained consistent, focusing on blue, black, and metallic tones since its inception. Minor adjustments have been made to accent colors for improved digital accessibility.
Where Ninja uses each color
- Primary
Ninja Deep Blue is used for the logo, navigation bars, and key product highlights.
- Secondary
Ninja Electric Blue appears in buttons, links, and promotional banners.
- Accent
Ninja Silver Gray is used for UI elements, icons, and product details.
- Backgrounds
Ninja White and Light Gray are used for website backgrounds and app screens.
- Text
Ninja Charcoal and Medium Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Success, warning, error, and info colors appear in notifications, alerts, and status indicators.
Ninja color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Ninja primary brand color is Ninja Deep Blue, hex code #1C2A39. This color is used prominently in the logo and navigation.
Ninja Deep Blue (#1C2A39) is RGB(28, 42, 57) and CMYK(51, 26, 0, 78). Use these values for accurate reproduction in digital and print.
Ninja uses several grays: Ninja Silver Gray (#E6E7E8), Ninja Light Gray (#F5F6F7), Ninja Border Gray (#D1D3D4), and text grays like Ninja Charcoal (#222222). These provide contrast and support for the bold primary and secondary colors.
Use Ninja Deep Blue (#1C2A39) for primary branding, Electric Blue (#00AEEF) for actions, and grays for backgrounds and UI elements. Maintain high contrast for accessibility and brand consistency.
The secondary color is Ninja Electric Blue, #00AEEF, and the accent is Ninja Silver Gray, #E6E7E8. 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 Ninja's colors consistently when it generates UI.
Make something in the spirit of Ninja
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.