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
warmintellectualcalm autumnspring brandingaiweb
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% |
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.
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.