Claude / Anthropic Color Psychology & Meaning
Claude's warm terracotta palette rejects the cold blues of most AI products. It signals conversation, warmth, and intellectual curiosity — AI that feels like a thoughtful collaborator.
#E8D5B0
#D4955A
#1A1A1A
#5A4535
Background
Primary Accent
Secondary
Body Text
Claude / Anthropic Color Palette
#E8D5B0 · #D4955A · #1A1A1A · #5A4535
AA
WCAG Grade
6.2:1
Contrast Ratio
4,200
Saves
11,800
AI Copies
Use #E8D5B0 as the background. Use #D4955A as the primary accent. Use #1A1A1A as secondary. Use #5A4535 as body text/supporting color. Palette mood: Claude / Anthropic — warm, intellectual, calm.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Claude / Anthropic color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 67.9% | 232, 213, 176 | 0%, 8%, 24%, 9% | 40°, 55%, 80% | ||
| Primary Accent Luminance: 36.2% | 212, 149, 90 | 0%, 30%, 58%, 17% | 29°, 59%, 59% | ||
| Secondary Luminance: 1.0% | 26, 26, 26 | 0%, 0%, 0%, 90% | 0°, 0%, 10% | ||
| Body Text Luminance: 6.7% | 90, 69, 53 | 0%, 23%, 41%, 65% | 26°, 26%, 28% |
Claude / Anthropic Tints & Shades
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Claude / Anthropic palette — click any swatch to copy its hex.
#E8D5B0 gently saturated orange
#D4955A gently saturated orange
#1A1A1A neutral gray
#5A4535 gently saturated orange
Claude / Anthropic Palette Contrast Matrix (WCAG 2.1)
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #1A1A1A on #E8D5B0 |
Aa Sample Text
| 12.08:1 | AAA | Body text, headings, UI |
| #E8D5B0 on #1A1A1A |
Aa Sample Text
| 12.08:1 | AAA | Body text, headings, UI |
| #1A1A1A on #D4955A |
Aa Sample Text
| 6.83:1 | AA | Body text, UI |
| #D4955A on #1A1A1A |
Aa Sample Text
| 6.83:1 | AA | Body text, UI |
| #5A4535 on #E8D5B0 |
Aa Sample Text
| 6.24:1 | AA | Body text, UI |
| #E8D5B0 on #5A4535 |
Aa Sample Text
| 6.24:1 | AA | Body text, UI |
| #5A4535 on #D4955A |
Aa Sample Text
| 3.53:1 | Fail | Large headings, UI components |
| #D4955A on #5A4535 |
Aa Sample Text
| 3.53:1 | Fail | Large headings, UI components |
| #5A4535 on #1A1A1A |
Aa Sample Text
| 1.94:1 | Fail | Decorative use only |
| #1A1A1A on #5A4535 |
Aa Sample Text
| 1.94:1 | Fail | Decorative use only |
| #D4955A on #E8D5B0 |
Aa Sample Text
| 1.77:1 | Fail | Decorative use only |
| #E8D5B0 on #D4955A |
Aa Sample Text
| 1.77:1 | Fail | Decorative use only |
Color Harmony: Custom Scheme
The Claude / Anthropic palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Anthropic designed the Claude interface to feel distinct from the clinical blues of OpenAI and the corporate grays of enterprise AI. Warmth was a deliberate strategic choice.
Best Design Use Cases
Warm parchment for conversation backgrounds. Terracotta for interactive elements and brand moments. Near-black for all text. Brown for secondary accents.
Industries This Palette Suits
AI assistants, conversational tools, knowledge work, research.
Colors That Pair Well With Claude / Anthropic
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
cyan-blue
directly opposite #D4955A on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
yellow
30° beside #D4955A — a calm secondary that extends the palette without adding tension
tinted neutral
a ink-black carrying the palette's own hue — perfect for surfaces and dividers
Using Claude / Anthropic Without Breaking Accessibility
- Avoid #D4955A for small UI elements on #E8D5B0 — at 1.8:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
- Set body text in #5A4535 — 6.2:1 against #E8D5B0 passes WCAG AA (AA) for long-form reading.
- Let #1A1A1A carry sidebars, cards and footers — at a deep lightness it separates zones without stealing focus from #D4955A.
How to Implement the Claude / Anthropic Color Scheme
To use this Claude / Anthropic color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #E8D5B0 for the main background and #D4955A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #5A4535 and #E8D5B0 is 6.24:1 (AA). Ensure your body text remains legible.
Claude / Anthropic Palette — Frequently Asked Questions
What are the hex codes in the Claude / Anthropic color palette?
The Claude / Anthropic palette contains #E8D5B0, #D4955A, #1A1A1A, #5A4535. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Is the Claude / Anthropic color palette accessible (WCAG)?
Yes for its strongest pairings: #1A1A1A on #E8D5B0 reaches 12.1:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
What colors go well with the Claude / Anthropic palette?
Beyond its own four colors, #5999D4, #CAC863, #171512 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
What mood does the Claude / Anthropic palette create?
Claude / Anthropic reads as warm, intellectual, calm. Gently saturated orange drives the personality, grounded by gently saturated orange — a combination that works best when the very light base gets most of the canvas.
Can I use the Claude / Anthropic color palette commercially?
Yes. Individual color values can't be copyrighted, so the Claude / Anthropic palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
How do I add the Claude / Anthropic palette to Tailwind or CSS?
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Claude / Anthropic's exact values, including the tint and shade ramps shown above.