Goodreads color palette
SocialGoodreads uses a warm, literary-inspired color palette centered around deep brown and beige tones, reflecting its bookish identity. The palette is stable and understated, supporting a comfortable reading environment.
goodreads.comGoodreads colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Goodreads BrownPrimary30, 25, 20
- Goodreads CreamSecondary244, 241, 234
- Goodreads GoldAccent192, 152, 83
Surfaces
Page, cards and dividers.- Goodreads PaperBackground255, 253, 246
- Goodreads Off-WhiteSurface248, 246, 241
- Goodreads Light TaupeBorder215, 210, 200
Text
Three tiers of copy.- Goodreads BrownText30, 25, 20
- Goodreads Muted BrownSecondary text110, 102, 88
- Goodreads Light BrownMuted text168, 159, 145
Semantic
Feedback and state colors.- Goodreads GreenSuccess108, 177, 126
- Goodreads YellowWarning234, 193, 77
- Goodreads OrangeError196, 85, 0
- Goodreads BlueInfo76, 122, 137
Use Goodreads's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
goodreads-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4C7A89;
--error: #C45500;
--accent: #C09853;
--border: #D7D2C8;
--primary: #1E1914;
--success: #6CB17E;
--surface: #F8F6F1;
--warning: #EAC14D;
--secondary: #F4F1EA;
--text-muted: #A89F91;
--background: #FFFDF6;
--text-primary: #1E1914;
--text-secondary: #6E6658;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.1:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Goodreads background, border and text colors
The quiet part of the Goodreads palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Goodreads PaperBackground
- HEX
- RGB
- HSL
- Goodreads Off-WhiteSurface
- HEX
- RGB
- HSL
- Goodreads Light TaupeBorder
- HEX
- RGB
- HSL
- Goodreads BrownText
- HEX
- RGB
- HSL
- Goodreads Muted BrownSecondary text
- HEX
- RGB
- HSL
- Goodreads Light BrownMuted text
- HEX
- RGB
- HSL
About Goodreads's colors
Goodreads' palette is grounded in warm, neutral tones that evoke the feeling of aged paper and classic literature. The colors are chosen to be easy on the eyes for long reading sessions.
Primary brown anchors navigation and branding.
Cream and off-white backgrounds mimic book pages.
Gold and green accents highlight interactive elements.
Psychology
The palette conveys warmth, comfort, and trust, encouraging users to spend time reading and exploring. The subdued tones reduce eye strain and create a welcoming, literary atmosphere.
Evolution
Goodreads' color palette has remained largely consistent since its inception, maintaining its signature brown and cream combination. Minor adjustments have refined the accent and neutral tones for improved readability and accessibility.
Where Goodreads uses each color
- Primary
Used in the main navigation bar, logo, and primary buttons.
- Secondary
Appears as the main background for pages and cards.
- Accent
Highlights interactive elements such as ratings, links, and icons.
- Backgrounds
Applied to the overall app and website backgrounds to resemble book pages.
- Text
Primary brown is used for main text, with muted browns for secondary and less prominent text.
- Semantic
Green, yellow, orange, and blue are used for status indicators, alerts, and notifications.
Goodreads color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Goodreads primary color hex code is #1E1914. This deep brown is used for branding and navigation.
Goodreads Brown (#1E1914) in RGB is (30, 25, 20). For CMYK, it is approximately (0, 17, 33, 88).
Goodreads uses several neutral tones, including Goodreads Cream (#F4F1EA), Off-White (#F8F6F1), and Light Taupe (#D7D2C8). These colors create a paper-like, bookish feel throughout the interface.
Use #1E1914 for primary navigation, branding, and main text, with #F4F1EA and #F8F6F1 for backgrounds. Accent colors like #C09853 and #6CB17E should highlight interactive or semantic elements.
The secondary color is Goodreads Cream, #F4F1EA, and the accent is Goodreads Gold, #C09853. 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 Goodreads's colors consistently when it generates UI.
Make something in the spirit of Goodreads
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.