Niantic color palette
GamingNiantic's brand color system is defined by a bold orange primary, complemented by neutral dark and light tones for UI clarity. The palette reflects the company's focus on exploration and technology in gaming.
nianticlabs.comNiantic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Niantic OrangePrimary255, 102, 0
- Niantic CharcoalSecondary34, 34, 34
- Niantic BlueAccent0, 179, 230
Surfaces
Page, cards and dividers.- Niantic WhiteBackground255, 255, 255
- Niantic Light GraySurface245, 245, 245
- Niantic Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Niantic CharcoalText34, 34, 34
- Niantic Medium GraySecondary text102, 102, 102
- Niantic Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Niantic Success GreenSuccess76, 175, 80
- Niantic Warning AmberWarning255, 179, 0
- Niantic Error RedError229, 57, 53
- Niantic Info BlueInfo2, 136, 209
Use Niantic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
niantic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #00B3E6;
--border: #E0E0E0;
--primary: #FF6600;
--success: #4CAF50;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #222222;
--text-muted: #999999;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Niantic gray and neutral colors
The quiet part of the Niantic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Niantic WhiteBackground
- HEX
- RGB
- HSL
- Niantic Light GraySurface
- HEX
- RGB
- HSL
- Niantic Border GrayBorder
- HEX
- RGB
- HSL
- Niantic CharcoalText
- HEX
- RGB
- HSL
- Niantic Medium GraySecondary text
- HEX
- RGB
- HSL
- Niantic Muted GrayMuted text
- HEX
- RGB
- HSL
About Niantic's colors
Niantic's palette is anchored by a vibrant orange, contrasted with dark neutrals and bright accent blue for clarity and energy. The system is designed for high visibility and accessibility across digital and physical products.
Primary orange is paired with dark charcoal for strong contrast.
Accent blue is used sparingly to highlight interactive elements.
Neutral grays and white provide balance and readability.
Psychology
The orange primary evokes energy, creativity, and adventure, aligning with Niantic's mission of exploration. Blue accents suggest technology and trust, while neutrals keep the interface clean and professional.
Evolution
Niantic's palette has remained stable since its rebranding, maintaining the signature orange and charcoal combination. Minor adjustments have been made to accent and neutral tones for improved digital accessibility.
Where Niantic uses each color
- Primary
Used for the Niantic logo, main navigation highlights, and primary call-to-action buttons.
- Secondary
Applied to headers, footers, and key UI backgrounds for contrast.
- Accent
Highlights interactive elements, links, and notifications.
- Backgrounds
White and light gray backgrounds are used for app screens and website sections.
- Text
Charcoal and medium gray are used for primary and secondary text across all digital products.
- Semantic
Green, amber, red, and blue are used for status indicators, alerts, and informational messages.
Niantic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Niantic brand color is Niantic Orange, hex code #FF6600.
Niantic Orange is RGB(255, 102, 0) and CMYK(0, 60, 100, 0).
Niantic uses Charcoal (#222222), Medium Gray (#666666), Muted Gray (#999999), and Border Gray (#E0E0E0) for UI and text elements.
Use Niantic Orange for primary actions and branding, with neutrals for backgrounds and text, and blue as an accent for interactive elements. Always maintain sufficient contrast for accessibility.
The secondary color is Niantic Charcoal, #222222, and the accent is Niantic Blue, #00B3E6. 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 Niantic's colors consistently when it generates UI.
Make something in the spirit of Niantic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.