Claude color palette
SaaSClaude's color system centers on a warm, approachable orange as its primary, supported by soft neutrals and subtle accent tones for a modern SaaS interface. The palette is designed for clarity, accessibility, and a welcoming user experience.
claude.aiClaude colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Claude OrangePrimary217, 119, 87
- Claude BlushSecondary246, 231, 223
- Claude BrownAccent107, 79, 59
Surfaces
Page, cards and dividers.- Claude PaperBackground255, 253, 251
- Claude SurfaceSurface243, 241, 239
- Claude BorderBorder224, 218, 214
Text
Three tiers of copy.- Claude CharcoalText43, 33, 24
- Claude TaupeSecondary text122, 106, 91
- Claude MistMuted text181, 168, 156
Semantic
Feedback and state colors.- Claude GreenSuccess58, 167, 109
- Claude GoldWarning230, 162, 60
- Claude RedError224, 91, 91
- Claude BlueInfo75, 125, 190
Use Claude's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
claude-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4B7DBE;
--error: #E05B5B;
--accent: #6B4F3B;
--border: #E0DAD6;
--primary: #D97757;
--success: #3AA76D;
--surface: #F3F1EF;
--warning: #E6A23C;
--secondary: #F6E7DF;
--text-muted: #B5A89C;
--background: #FFFDFB;
--text-primary: #2B2118;
--text-secondary: #7A6A5B;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Claude background, border and text colors
The quiet part of the Claude palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Claude PaperBackground
- HEX
- RGB
- HSL
- Claude SurfaceSurface
- HEX
- RGB
- HSL
- Claude BorderBorder
- HEX
- RGB
- HSL
- Claude CharcoalText
- HEX
- RGB
- HSL
- Claude TaupeSecondary text
- HEX
- RGB
- HSL
- Claude MistMuted text
- HEX
- RGB
- HSL
About Claude's colors
Claude's palette is rooted in a warm, human-centric orange, balanced by soft neutrals and subtle, earthy accents. This approach supports a calm, readable, and inviting interface for SaaS users.
Primary orange is complemented by blush and brown accents.
Neutrals provide clarity and focus for content.
Semantic colors are distinct but harmonize with the warm base.
Psychology
The orange primary evokes friendliness and approachability, while the soft neutrals reduce visual fatigue and support focus. Accent and semantic colors are chosen for clarity and emotional resonance.
Evolution
Claude's color palette has remained consistent since launch, emphasizing stability and brand recognition. Minor adjustments have been made to improve accessibility and contrast in the UI.
Where Claude uses each color
- Primary
Used for primary buttons, highlights, and key interactive elements.
- Secondary
Appears in backgrounds, cards, and subtle UI highlights.
- Accent
Used for navigation icons, links, and illustrative accents.
- Backgrounds
Main app and page backgrounds use Claude Paper and Surface.
- Text
Claude Charcoal is used for main text, with Taupe and Mist for secondary and muted text.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and badges.
Claude color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Claude primary color is #D97757. This should be used for all primary branding and UI elements.
Claude Orange (#D97757) in RGB is (217, 119, 87). For CMYK, it is approximately (0, 45, 60, 15).
Claude uses #FFFDFB (Paper), #F3F1EF (Surface), #E0DAD6 (Border), and #2B2118 (Charcoal) for its neutral and gray UI elements. These provide a soft, readable background and clear text contrast.
Use Claude Orange (#D97757) for primary actions, with neutrals for backgrounds and surfaces. Semantic colors are reserved for status, alerts, and badges to ensure clarity and accessibility.
The secondary color is Claude Blush, #F6E7DF, and the accent is Claude Brown, #6B4F3B. 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 Claude's colors consistently when it generates UI.
Make something in the spirit of Claude
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.