Yelp color palette
SocialYelp's color identity is anchored by its signature bright red, supported by a palette of black, white, and neutral grays for clarity and contrast. The palette is designed for high visibility and brand recognition across digital and print touchpoints.
yelp.comYelp colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Yelp RedPrimary255, 26, 26
- Yelp CharcoalSecondary51, 51, 51
- Yelp Star YellowAccent245, 197, 24
Surfaces
Page, cards and dividers.- Yelp WhiteBackground255, 255, 255
- Yelp Light GraySurface245, 245, 245
- Yelp Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Yelp Charcoal TextText51, 51, 51
- Yelp Medium Gray TextSecondary text102, 102, 102
- Yelp Muted Gray TextMuted text153, 153, 153
Semantic
Feedback and state colors.- Yelp Success GreenSuccess46, 204, 64
- Yelp Warning OrangeWarning255, 179, 0
- Yelp Error RedError211, 35, 35
- Yelp Info BlueInfo0, 115, 187
Use Yelp's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
yelp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0073BB;
--error: #D32323;
--accent: #F5C518;
--border: #E6E6E6;
--primary: #FF1A1A;
--success: #2ECC40;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #333333;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #333333;
--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
12.6:1
Pass
Text on surface
Needs 4.5:1 for body text
11.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
Yelp gray and neutral colors
The quiet part of the Yelp palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Yelp WhiteBackground
- HEX
- RGB
- HSL
- Yelp Light GraySurface
- HEX
- RGB
- HSL
- Yelp Border GrayBorder
- HEX
- RGB
- HSL
- Yelp Charcoal TextText
- HEX
- RGB
- HSL
- Yelp Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Yelp Muted Gray TextMuted text
- HEX
- RGB
- HSL
About Yelp's colors
Yelp's palette is dominated by a vivid red, supported by neutral grays and white for a clean, accessible interface. The accent yellow draws attention to ratings and highlights.
Primary red contrasts with neutral grays for readability.
Accent yellow is used for star ratings and calls to action.
Dark and light grays provide hierarchy and depth.
Psychology
Red evokes urgency, excitement, and draws immediate attention, aligning with Yelp's focus on discovery and reviews. The use of neutrals ensures the interface remains approachable and easy to navigate.
Evolution
Yelp's core red has remained consistent since its inception, reinforcing strong brand recognition. The supporting palette has evolved to include more nuanced grays and a signature yellow for improved usability and visual hierarchy.
Where Yelp uses each color
- Primary
Yelp Red is used for the logo, primary buttons, and key highlights throughout the website and app.
- Secondary
Yelp Charcoal appears in navigation bars, footers, and text.
- Accent
Yelp Star Yellow is used for star ratings and notification badges.
- Backgrounds
Yelp White and Yelp Light Gray are used for page backgrounds and content surfaces.
- Text
Charcoal, medium, and muted grays provide hierarchy for headings, body text, and secondary information.
- Semantic
Success, warning, error, and info colors are used for alerts, status messages, and feedback indicators.
Yelp color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Yelp primary color is #FF1A1A, known as Yelp Red.
Yelp Red (#FF1A1A) is RGB(255, 26, 26) and CMYK(0, 90, 90, 0).
Yelp uses a range of grays including Yelp Charcoal (#333333), Medium Gray (#666666), Muted Gray (#999999), and Light Gray (#F5F5F5) for backgrounds, text, and UI elements.
Yelp Red (#FF1A1A) should be reserved for primary actions and branding, while supporting colors like grays and yellow are used for structure, text, and highlights to maintain clarity and accessibility.
The secondary color is Yelp Charcoal, #333333, and the accent is Yelp Star Yellow, #F5C518. 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 Yelp's colors consistently when it generates UI.
Make something in the spirit of Yelp
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.