Hacker News color palette
SocialHacker News uses a distinctive orange as its primary brand color, paired with simple, utilitarian neutrals for its interface. The palette is minimal and functional, reflecting the site's focus on content and discussion.
news.ycombinator.comHacker News colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hacker News OrangePrimary255, 102, 0
- Hacker News GraySecondary130, 130, 130
- Hacker News Light CreamAccent255, 248, 225
Surfaces
Page, cards and dividers.- Hacker News Off WhiteBackground246, 246, 239
- Hacker News WhiteSurface255, 255, 255
- Hacker News Border GrayBorder230, 230, 223
Text
Three tiers of copy.- Hacker News BlackText0, 0, 0
- Hacker News GraySecondary text130, 130, 130
- Hacker News Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Hacker News GreenSuccess34, 139, 34
- Hacker News OrangeWarning255, 102, 0
- Hacker News Error RedError185, 74, 72
- Hacker News Info BlueInfo58, 135, 173
Use Hacker News's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hacker-news-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A87AD;
--error: #B94A48;
--accent: #FFF8E1;
--border: #E6E6DF;
--primary: #FF6600;
--success: #228B22;
--surface: #FFFFFF;
--warning: #FF6600;
--secondary: #828282;
--text-muted: #B3B3B3;
--background: #F6F6EF;
--text-primary: #000000;
--text-secondary: #828282;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
21.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.5:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.8:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Hacker News background, border and text colors
The quiet part of the Hacker News palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hacker News Off WhiteBackground
- HEX
- RGB
- HSL
- Hacker News WhiteSurface
- HEX
- RGB
- HSL
- Hacker News Border GrayBorder
- HEX
- RGB
- HSL
- Hacker News BlackText
- HEX
- RGB
- HSL
- Hacker News GraySecondary text
- HEX
- RGB
- HSL
- Hacker News Muted GrayMuted text
- HEX
- RGB
- HSL
About Hacker News's colors
Hacker News relies on a bold orange for instant brand recognition, supported by a utilitarian set of neutrals. The palette is intentionally minimal to keep focus on content.
Primary orange contrasts with off-white backgrounds.
Gray tones provide hierarchy for secondary elements.
Accent cream softens the visual experience.
Psychology
The orange conveys energy and draws attention to the brand and key UI elements. Neutral backgrounds and grays create a sense of clarity and straightforwardness.
Evolution
The color palette has remained largely unchanged since the site's launch, maintaining its iconic orange and simple neutrals. This stability reinforces Hacker News's identity and usability.
Where Hacker News uses each color
- Primary
Used in the header, logo, and key buttons.
- Secondary
Used for metadata, timestamps, and less prominent text.
- Accent
Used as the background for the main content area.
- Backgrounds
Off-white and white backgrounds are used throughout the interface.
- Text
Black is used for primary text, with gray for secondary and muted text.
- Semantic
Green, orange, red, and blue are used for status messages and alerts.
Hacker News color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hacker News brand color is #FF6600, known as Hacker News Orange.
The primary orange (#FF6600) is RGB(255, 102, 0). In CMYK, it is approximately (0, 60, 100, 0).
Hacker News uses #828282 for secondary gray and #F6F6EF for its off-white background, both of which are prominent in its UI.
Use #FF6600 for branding and highlights, #F6F6EF and #FFFFFF for backgrounds, and #828282 for secondary text. Maintain the minimal palette for clarity and consistency.
The secondary color is Hacker News Gray, #828282, and the accent is Hacker News Light Cream, #FFF8E1. Together with the primary they make up the three brand colors at the top of this page.
2 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 Hacker News's colors consistently when it generates UI.
Make something in the spirit of Hacker News
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.