Etsy color palette
EcommerceEtsy's color identity centers around its distinctive orange, complemented by warm neutrals and dark grays for a handcrafted, approachable feel. The palette is consistent across its web and print presence, reflecting its creative marketplace ethos.
etsy.comEtsy colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Etsy OrangePrimary241, 101, 33
- Etsy CharcoalSecondary34, 34, 34
- Etsy ClayAccent212, 201, 193
Surfaces
Page, cards and dividers.- Etsy WhiteBackground255, 255, 255
- Etsy CreamSurface247, 246, 243
- Etsy LinenBorder227, 222, 215
Text
Three tiers of copy.- Etsy CharcoalText34, 34, 34
- Etsy GraySecondary text89, 89, 89
- Etsy Muted GrayMuted text141, 141, 141
Semantic
Feedback and state colors.- Etsy GreenSuccess0, 128, 96
- Etsy GoldWarning247, 166, 0
- Etsy RedError217, 57, 0
- Etsy BlueInfo0, 119, 182
Use Etsy's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
etsy-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077B6;
--error: #D93900;
--accent: #D4C9C1;
--border: #E3DED7;
--primary: #F16521;
--success: #008060;
--surface: #F7F6F3;
--warning: #F7A600;
--secondary: #222222;
--text-muted: #8D8D8D;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #595959;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Etsy background, border and text colors
The quiet part of the Etsy palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Etsy WhiteBackground
- HEX
- RGB
- HSL
- Etsy CreamSurface
- HEX
- RGB
- HSL
- Etsy LinenBorder
- HEX
- RGB
- HSL
- Etsy CharcoalText
- HEX
- RGB
- HSL
- Etsy GraySecondary text
- HEX
- RGB
- HSL
- Etsy Muted GrayMuted text
- HEX
- RGB
- HSL
About Etsy's colors
Etsy's palette uses a bold orange as its anchor, balanced by soft neutrals and deep grays for clarity and warmth. The color system supports a handcrafted, approachable brand experience.
Primary orange contrasts with dark charcoal for high legibility.
Warm neutrals provide a soft, inviting background.
Accent colors are used sparingly for status and highlights.
Psychology
The orange conveys creativity, friendliness, and energy, aligning with Etsy's maker community. Neutrals and grays create a calm, trustworthy environment for browsing and shopping.
Evolution
Etsy's color palette has remained stable since its early years, with minor refinements to the orange and supporting neutrals for accessibility and digital clarity. The brand has consistently prioritized a warm, inviting visual identity.
Where Etsy uses each color
- Primary
Etsy Orange is used for the logo, primary buttons, and key calls to action.
- Secondary
Etsy Charcoal appears in navigation bars, text, and icons for strong contrast.
- Accent
Etsy Clay is used for subtle highlights, backgrounds, and UI accents.
- Backgrounds
Etsy White and Etsy Cream are the main background colors for pages and cards.
- Text
Etsy Charcoal and Etsy Gray are used for primary and secondary text, ensuring readability.
- Semantic
Etsy Green, Gold, Red, and Blue are used for status indicators, alerts, and informational banners.
Etsy color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Etsy primary color is #F16521, known as Etsy Orange. This color is used for the logo and main action elements.
Etsy Orange (#F16521) in RGB is (241, 101, 33) and in CMYK is (0, 58, 86, 5). These values ensure consistency across digital and print media.
Etsy uses #222222 (Etsy Charcoal) for primary text and navigation, and #F7F6F3 (Etsy Cream) and #E3DED7 (Etsy Linen) for backgrounds and borders. These neutrals create a warm, readable interface.
Use #F16521 for primary actions and branding, with #222222 for text and navigation. Supporting neutrals and semantic colors should be used for backgrounds, borders, and status indicators to maintain brand consistency.
The secondary color is Etsy Charcoal, #222222, and the accent is Etsy Clay, #D4C9C1. Together with the primary they make up the three brand colors at the top of this page.
6 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 Etsy's colors consistently when it generates UI.
Make something in the spirit of Etsy
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.