Product Hunt color palette
SocialProduct Hunt's color identity centers on its signature orange, complemented by warm neutrals and dark UI tones for clarity and contrast. The palette is designed for high visibility and a friendly, energetic feel across its web and app interfaces.
producthunt.comProduct Hunt colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Product Hunt OrangePrimary218, 85, 47
- Product Hunt Light OrangeSecondary245, 112, 60
- Product Hunt PeachAccent247, 169, 138
Surfaces
Page, cards and dividers.- Product Hunt Light GrayBackground245, 246, 247
- Product Hunt WhiteSurface255, 255, 255
- Product Hunt Border GrayBorder228, 230, 232
Text
Three tiers of copy.- Product Hunt CharcoalText35, 35, 35
- Product Hunt Medium GraySecondary text111, 118, 125
- Product Hunt Muted GrayMuted text161, 168, 174
Semantic
Feedback and state colors.- Product Hunt GreenSuccess52, 199, 89
- Product Hunt GoldWarning255, 179, 0
- Product Hunt RedError255, 59, 48
- Product Hunt BlueInfo50, 151, 253
Use Product Hunt's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
product-hunt-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3297FD;
--error: #FF3B30;
--accent: #F7A98A;
--border: #E4E6E8;
--primary: #DA552F;
--success: #34C759;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #F5703C;
--text-muted: #A1A8AE;
--background: #F5F6F7;
--text-primary: #232323;
--text-secondary: #6F767D;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Product Hunt gray and neutral colors
The quiet part of the Product Hunt palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Product Hunt Light GrayBackground
- HEX
- RGB
- HSL
- Product Hunt WhiteSurface
- HEX
- RGB
- HSL
- Product Hunt Border GrayBorder
- HEX
- RGB
- HSL
- Product Hunt CharcoalText
- HEX
- RGB
- HSL
- Product Hunt Medium GraySecondary text
- HEX
- RGB
- HSL
- Product Hunt Muted GrayMuted text
- HEX
- RGB
- HSL
About Product Hunt's colors
Product Hunt's palette uses a dominant orange for energy and recognition, balanced by neutral grays and white for readability. Accent colors are used sparingly to highlight status and actions.
Primary orange is paired with light backgrounds for contrast.
Grays provide structure and hierarchy in UI elements.
Accent and semantic colors are reserved for notifications and badges.
Psychology
Orange conveys enthusiasm, approachability, and creativity, supporting Product Hunt's community-driven platform. The neutral tones ensure content remains the focus and interfaces feel modern.
Evolution
The core orange (#DA552F) has remained unchanged since Product Hunt's launch, ensuring strong brand recognition. Over time, the supporting palette has expanded to include more nuanced grays and semantic colors for a refined UI.
Where Product Hunt uses each color
- Primary
Used for main buttons, highlights, and the logo across the website and app.
- Secondary
Appears in hover states, secondary buttons, and subtle UI highlights.
- Accent
Used for notification badges and subtle background tints.
- Backgrounds
Applied to main page backgrounds and card surfaces for a clean, minimal look.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text throughout the interface.
- Semantic
Green, gold, red, and blue are used for status indicators, alerts, and informational banners.
Product Hunt color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Product Hunt primary color is #DA552F, known as Product Hunt Orange.
Product Hunt Orange (#DA552F) is RGB(218, 85, 47) and CMYK(0, 61, 78, 15).
Product Hunt uses a range of grays: #F5F6F7 for light backgrounds, #E4E6E8 for borders, #6F767D for secondary text, and #A1A8AE for muted text.
Use #DA552F for primary actions and branding, with supporting grays and semantic colors for structure and feedback. Maintain high contrast for accessibility and consistent brand presence.
The secondary color is Product Hunt Light Orange, #F5703C, and the accent is Product Hunt Peach, #F7A98A. Together with the primary they make up the three brand colors at the top of this page.
3 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 Product Hunt's colors consistently when it generates UI.
Make something in the spirit of Product Hunt
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.