Nextdoor color palette
SocialNextdoor's color identity centers on a vibrant green paired with a range of neutral grays and subtle accent colors, reflecting its community-focused and approachable brand. The palette is designed for clarity, accessibility, and a welcoming digital experience.
nextdoor.comNextdoor colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nextdoor GreenPrimary142, 213, 0
- Nextdoor Deep GreenSecondary61, 74, 56
- Nextdoor YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Nextdoor WhiteBackground255, 255, 255
- Nextdoor Light GraySurface246, 247, 248
- Nextdoor Border GrayBorder227, 230, 232
Text
Three tiers of copy.- Nextdoor CharcoalText34, 39, 37
- Nextdoor Medium GraySecondary text88, 97, 90
- Nextdoor Muted GrayMuted text139, 150, 144
Semantic
Feedback and state colors.- Nextdoor GreenSuccess142, 213, 0
- Nextdoor YellowWarning255, 214, 0
- Nextdoor RedError255, 79, 79
- Nextdoor BlueInfo75, 163, 231
Use Nextdoor's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nextdoor-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4BA3E7;
--error: #FF4F4F;
--accent: #FFD600;
--border: #E3E6E8;
--primary: #8ED500;
--success: #8ED500;
--surface: #F6F7F8;
--warning: #FFD600;
--secondary: #3D4A38;
--text-muted: #8B9690;
--background: #FFFFFF;
--text-primary: #222725;
--text-secondary: #58615A;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
Nextdoor gray and neutral colors
The quiet part of the Nextdoor palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nextdoor WhiteBackground
- HEX
- RGB
- HSL
- Nextdoor Light GraySurface
- HEX
- RGB
- HSL
- Nextdoor Border GrayBorder
- HEX
- RGB
- HSL
- Nextdoor CharcoalText
- HEX
- RGB
- HSL
- Nextdoor Medium GraySecondary text
- HEX
- RGB
- HSL
- Nextdoor Muted GrayMuted text
- HEX
- RGB
- HSL
About Nextdoor's colors
Nextdoor's palette uses a distinctive green as its anchor, supported by neutral grays and a bright yellow accent. This combination is designed for high readability and a friendly, neighborhood-oriented feel.
Primary green is complemented by deep green for emphasis.
Neutral grays provide structure and readability.
Yellow and blue accents highlight key actions and notifications.
Psychology
Green evokes growth, safety, and community, aligning with Nextdoor's neighborhood focus. The supporting neutrals and accents create a sense of trust and clarity.
Evolution
The core green has remained consistent since the brand's inception, with minor adjustments to supporting grays for improved accessibility. The palette has expanded to include more nuanced neutrals and accent colors for digital interfaces.
Where Nextdoor uses each color
- Primary
Used for main action buttons, links, and brand marks throughout the app and website.
- Secondary
Appears in navigation bars, headers, and as a background for highlighted sections.
- Accent
Used for notifications, highlights, and call-to-action elements.
- Backgrounds
White and light gray backgrounds are standard for app screens and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring legibility.
- Semantic
Success, warning, error, and info colors are used for alerts, banners, and status indicators.
Nextdoor color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nextdoor primary color is #8ED500. This green is used for branding and key actions.
The RGB for #8ED500 is (142, 213, 0). The approximate CMYK is (33, 0, 100, 16).
Nextdoor uses several grays: #F6F7F8 (Light Gray), #E3E6E8 (Border Gray), #58615A (Medium Gray), and #8B9690 (Muted Gray) for backgrounds, borders, and text.
Use #8ED500 for primary actions and branding, with grays for backgrounds and text. Accent colors like #FFD600 and #4BA3E7 are reserved for highlights and notifications.
The secondary color is Nextdoor Deep Green, #3D4A38, and the accent is Nextdoor Yellow, #FFD600. Together with the primary they make up the three brand colors at the top of this page.
5 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 Nextdoor's colors consistently when it generates UI.
Make something in the spirit of Nextdoor
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.