← Back to Editor

#CA9263 · #B96B44 · #7D6C52 · #576E5C · #682630

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CA9263

Tangerine · DarkSalmon · Warm Sun

HEX
#CA9263
RGB
rgb(202, 146, 99)
HSL
hsl(27, 49%, 59%)
HSB
hsb(27, 51%, 79%)
CMYK
cmyk(0%, 28%, 51%, 21%)
Oklch
oklch(70.4% 0.092 60.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B96B44

Tangerine · Sienna · Amber Brown

HEX
#B96B44
RGB
rgb(185, 107, 68)
HSL
hsl(20, 46%, 50%)
HSB
hsb(20, 63%, 73%)
CMYK
cmyk(0%, 42%, 63%, 27%)
Oklch
oklch(60.7% 0.113 46.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#7D6C52

Ochre · DimGray · Amber Brown

HEX
#7D6C52
RGB
rgb(125, 108, 82)
HSL
hsl(36, 21%, 41%)
HSB
hsb(36, 34%, 49%)
CMYK
cmyk(0%, 14%, 34%, 51%)
Oklch
oklch(54.0% 0.044 78.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#576E5C

Celadon · DimGray · Forest Green

HEX
#576E5C
RGB
rgb(87, 110, 92)
HSL
hsl(133, 12%, 39%)
HSB
hsb(133, 21%, 43%)
CMYK
cmyk(21%, 0%, 16%, 57%)
Oklch
oklch(51.4% 0.039 151.4)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#682630

Crimson · Brown · Wine Red

HEX
#682630
RGB
rgb(104, 38, 48)
HSL
hsl(351, 46%, 28%)
HSB
hsb(351, 63%, 41%)
CMYK
cmyk(0%, 63%, 54%, 59%)
Oklch
oklch(36.9% 0.095 13.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA9263
639CCA

Analogous

CA6368
CA9263
CAC563

Triadic

CA9263
63CA91
9163CA

Split-Comp.

CA9263
63CAC5
6368CA

Tetradic

CA9263
68CA63
639CCA
C563CA

Contrast Matrix WCAG 2.1 Contrast

CA9263
B96B44
7D6C52
576E5C
682630
—
1.5
Fail
1.9
Fail
2.1
Fail
4.1
AA Large
1.5
Fail
—
1.3
Fail
1.4
Fail
2.8
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
2.2
Fail
2.1
Fail
1.4
Fail
1.1
Fail
—
2.0
Fail
4.1
AA Large
2.8
Fail
2.2
Fail
2.0
Fail
—
White BG
2.7Fail
4.0AA Large
5.1AA
5.5AA
11.0AAA
Black BG
7.8AAA
5.2AA
4.1AA Large
3.8AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B16E
97974D
767558
616160
4B4B2E

Deuteranopia

B5B971
9CA250
77785A
605E61
4F542D

Tritanopia

C77779
B55557
7C5D5E
586465
652C2B

Achromatopsia

9D9D9D
7E7E7E
6E6E6E
656565
3B3B3B

Shades & Tints Shades & Tints

#CA9263

Dark
Light

#B96B44

Dark
Light

#7D6C52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca9263;
  --color-2: #b96b44;
  --color-3: #7d6c52;
  --color-4: #576e5c;
  --color-5: #682630;
}

SCSS

$color-1: #ca9263;
$color-2: #b96b44;
$color-3: #7d6c52;
$color-4: #576e5c;
$color-5: #682630;

TAILWIND

colors: {
  'brand-1': '#ca9263',
  'brand-2': '#b96b44',
  'brand-3': '#7d6c52',
  'brand-4': '#576e5c',
  'brand-5': '#682630',
}

RGB Array

[202, 146, 99], [185, 107, 68], [125, 108, 82], [87, 110, 92], [104, 38, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CA9263, #B96B44, #7D6C52, #576E5C, #682630 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ca9263; --color-2: #b96b44; --color-3: #7d6c52; --color-4: #576e5c; --color-5: #682630. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color