Claude Signature Orange#D97757
Slate Conversation Blue#3E4A59
Warm Paper Beige#E9DCCB
Muted Steel#6E7B86
Ink Charcoal#2F3437
Palette direction

Claude Inspired Soft Color Palette

A Claude-inspired palette that pairs the brand’s signature soft orange with a restrained slate and warm neutrals for a calm, intelligent interface. It keeps the exact website orange as the recognition anchor while adding quiet supporting tones that preserve Claude’s approachable, editorial feel.

ComplementaryTechclaude-inspiredsoft orangeai brandcalm interface
palette-preview.example
Tech color direction

Claude Inspired Soft Color Palette

A Claude-inspired palette that pairs the brand’s signature soft orange with a restrained slate and warm neutrals for a calm, intelligent interface. It keeps the exact website orange as the recognition anchor while adding quiet supporting tones that preserve Claude’s approachable, editorial feel.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo True Black #111111on Warm Paper Beige #E9DCCB14.0:1 Excellent
Logo Pure White #FFFFFFon Slate Conversation Blue #3E4A599.0:1 Excellent
Logo True Black #111111on Claude Signature Orange #D977576.0:1 Strong
Logo True Black #111111on Pure White #FFFFFF18.9:1 Excellent
Icon color
BackgroundClaude Signature Orange#D97757TextTrue Black#111111
Primary Button6.05:1
AA

Best for the main action users should notice first.

BackgroundWarm Paper Beige#E9DCCBTextTrue Black#111111
Secondary Button14.00:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWarm Paper Beige#E9DCCB
Outlined Button1.35:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSlate Conversation Blue#3E4A59
Text Button9.02:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Claude Inspired Soft Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CClaude Inspired Soft Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette is anchored by the brand’s exact signature orange, then balanced with a deep slate main color and a soft cream-toned companion so the system feels recognizable, calm, and highly usable. The three hues work as a branded triad in*

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Claude Signature Orange #D97757
HeadlineUsed for main titles and key messages.Slate Conversation Blue #3E4A59
LinkUsed for links and interactive text.Slate Conversation Blue #3E4A59

Buttons

Primary Button
BackgroundClaude Signature Orange #D97757
TextTrue Black #111111
Secondary Button
BackgroundWarm Paper Beige #E9DCCB
TextTrue Black #111111
Outlined Button
BackgroundWarm Paper Beige #E9DCCB
TextWarm Paper Beige #E9DCCB

Interface

TextDefault readable body text.True Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.True Black #111111
IconSmall interface icons and marks.Muted Steel #6E7B86
BorderCards, inputs, and component borders.Muted Steel #6E7B86
DividerSubtle separators between content.Muted Steel #6E7B86
OutlineFocus rings and emphasis outlines.Muted Steel #6E7B86

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The palette is anchored by the brand’s exact signature orange, then balanced with a deep slate main color and a soft cream-toned companion so the system feels recognizable, calm, and highly usable. The three hues work as a branded triad in*

PrimaryClaude Signature Orange

RolesLogo, Btn Primary Bg

The exact website color and the strongest recognition cue; it gives the brand its warm, human, and memorable presence.

HEX#D97757
RGB217, 119, 87
HSL15, 63, 60
CMYK0, 45, 60, 15
SecondarySlate Conversation Blue

RolesLink, Headline

A grounded, intelligent counterweight that adds clarity and structure without overpowering the soft orange.

HEX#3E4A59
RGB62, 74, 89
HSL213, 18, 30
CMYK30, 17, 0, 65
TertiaryWarm Paper Beige

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

A quiet cream-beige that keeps the interface light and editorial while supporting the brand’s gentle, approachable tone.

HEX#E9DCCB
RGB233, 220, 203
HSL34, 41, 85
CMYK0, 6, 13, 9

Support Colors

These accents extend the main palette with restrained depth and usability-focused contrast rather than introducing a new visual direction. They stay understated so the orange-led品牌

Muted Steel

RolesIcon, Border, Divider, Outline

A low-noise steel accent that keeps UI chrome clean and readable while staying subordinate to the primary orange.

HEX#6E7B86
RGB110, 123, 134
HSL208, 10, 48
CMYK18, 8, 0, 47
Ink Charcoal

A deeper textural accent for strong emphasis when the slate needs a darker companion in dense interface moments.

HEX#2F3437
RGB47, 52, 55
HSL203, 8, 20
CMYK15, 5, 0, 78

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Cloud
HEX#F6F2EC
RGB246, 242, 236
HSL36, 36, 95
CMYK0, 2, 4, 4
True Black

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-claude-signature-orange: #D97757;
  --color-slate-conversation-blue: #3E4A59;
  --color-warm-paper-beige: #E9DCCB;
  --color-muted-steel: #6E7B86;
  --color-ink-charcoal: #2F3437;
  --color-pure-white: #FFFFFF;
  --color-soft-cloud: #F6F2EC;
  --color-true-black: #111111;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #D97757;
  --role-btn-primary-bg: #D97757;
  --role-link: #3E4A59;
  --role-headline: #3E4A59;
  --role-btn-secondary-bg: #E9DCCB;
  --role-btn-outlined-border: #E9DCCB;
  --role-btn-outlined-text: #E9DCCB;
  --role-icon: #6E7B86;
  --role-border: #6E7B86;
  --role-divider: #6E7B86;
  --role-outline: #6E7B86;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-primary-text: #111111;
  --role-btn-secondary-text: #111111;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "claude-signature-orange": "#D97757",
    "slate-conversation-blue": "#3E4A59",
    "warm-paper-beige": "#E9DCCB",
    "muted-steel": "#6E7B86",
    "ink-charcoal": "#2F3437",
    "pure-white": "#FFFFFF",
    "soft-cloud": "#F6F2EC",
    "true-black": "#111111"
}
Press Space to load new palette