Anthropic Color Palette

What is the Anthropic Color Palette?

This is a reference for the Anthropic color palette — the warm, muted, editorial colors behind the Claude product and Anthropic's brand. It lays out the full set on one page: five background and neutral tones (Lotion, Salt, Last Straw, Sooty, Noir) and nine accent colors (Peachy Feeling, Windstorm, Moss Gardens and the rest), each with its name, hex code and role. Instead of squinting at screenshots or eyedropping pixels one by one, you get the exact values ready to copy and a one-click export of the whole palette.

How to use it

1. Browse the swatches. Neutrals and accents are grouped so you can see how the palette fits together — warm paper backgrounds, near-black text, and earthy accents.
2. Pick your format. Use the HEX / RGB / HSL toggle at the top to show every value in the notation your stylesheet uses.
3. Tap a color to copy its value to your clipboard. The label on each swatch updates to match the format you chose.
4. Export the full set as CSS variables, a Tailwind config, SCSS variables or JSON — each block has its own Copy button. Paste, and you are done.

The colors, and the roles they play

Anthropic's palette avoids harsh primaries. The neutrals do most of the work: Lotion (#faf9f5) is the warm off-white canvas — never pure white — Salt and Last Straw give subtle card and border separation, while Sooty and Noir supply near-black text and soft warm-gray secondary tones. The accents are deliberately muted and natural: Peachy Feeling is the signature warm terracotta, joined by a soft blue (Windstorm), earthy greens (Moss Gardens, Emerald Oasis, Aquatic Edge), a dusty purple (Magic Carpet) and gentle pastels (Mellow Marrow, Peek-a-Blue, Dust of the Moon). Used sparingly against the paper background, they read as calm and editorial rather than loud.

Type and CSS principles

Color is only half of the Claude look — type and layout carry the rest. Anthropic pairs a reading serif, a UI sans-serif and a monospace for code, and follows a few consistent styling rules. The reference cards and the ready-to-paste CSS starter block on this page capture both, so you can match the feel and not just the colors.

For external artifacts where the proprietary fonts are unavailable, Anthropic's guidelines suggest Poppins (fallback Arial) for headings and Lora (fallback Georgia) for body text.

Ready-to-paste Claude CSS starter

:root {
  --bg-primary: #faf9f5;     /* Lotion */
  --bg-secondary: #f0eee6;   /* Salt */
  --border-light: #e3dacc;   /* Last Straw */
  --text-primary: #141414;   /* Sooty */
  --text-secondary: #2c2b26; /* Noir */
  --accent-orange: #d97757;  /* Peachy Feeling */
  --accent-blue: #6a9bcc;    /* Windstorm */
  --accent-green: #788c5d;   /* Moss Gardens */
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Anthropic Serif", "Tiempos Text", "Lora", Georgia, serif;
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Anthropic Sans", "Inter", "Poppins", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

pre, code {
  font-family: "Anthropic Mono", "Fira Code", Consolas, monospace;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 12px;
}

Common use cases

• Replicating Claude's look in a side project, demo or internal tool that should feel warm and editorial rather than stark.
• Designing artifacts and slides that sit comfortably next to Anthropic content without clashing.
• Building a design-token starting point — export the JSON or CSS variables and adapt the names to your own system.
• Mood and reference for any "calm, natural, muted" palette, even when you are not targeting Claude specifically.

Why use this one

Most "brand color" pages give you a static image you still have to eyedrop, or a single format you then have to convert by hand. This page shows every Anthropic color with its name and role, lets you switch the whole grid between HEX, RGB and HSL, copies any value with one tap, and exports the complete palette as CSS, Tailwind, SCSS or JSON. It also bundles the typography and CSS principles that make the Claude look cohesive. It is fast, free, needs no sign-up, and runs entirely in your browser so nothing you do is uploaded.

Frequently asked questions