← Back to Editor

#CAC8AF · #B37E4C · #985B2E · #403B38 · #2F2B2A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CAC8AF

Fresh Green · Silver · Sunflower

HEX
#CAC8AF
RGB
rgb(202, 200, 175)
HSL
hsl(56, 20%, 74%)
HSB
hsb(56, 13%, 79%)
CMYK
cmyk(0%, 1%, 13%, 21%)
Oklch
oklch(82.8% 0.034 103.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B37E4C

Tangerine · Sienna · Amber Brown

HEX
#B37E4C
RGB
rgb(179, 126, 76)
HSL
hsl(29, 40%, 50%)
HSB
hsb(29, 58%, 70%)
CMYK
cmyk(0%, 30%, 58%, 30%)
Oklch
oklch(63.6% 0.093 63.2)

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

#985B2E

Tangerine · Sienna · Amber Brown

HEX
#985B2E
RGB
rgb(152, 91, 46)
HSL
hsl(25, 54%, 39%)
HSB
hsb(25, 70%, 60%)
CMYK
cmyk(0%, 40%, 70%, 40%)
Oklch
oklch(53.1% 0.100 54.9)

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

#403B38

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#403B38
RGB
rgb(64, 59, 56)
HSL
hsl(23, 7%, 24%)
HSB
hsb(23, 13%, 25%)
CMYK
cmyk(0%, 8%, 13%, 75%)
Oklch
oklch(35.6% 0.009 53.2)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#2F2B2A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2F2B2A
RGB
rgb(47, 43, 42)
HSL
hsl(12, 6%, 17%)
HSB
hsb(12, 11%, 18%)
CMYK
cmyk(0%, 9%, 11%, 82%)
Oklch
oklch(29.3% 0.006 34.3)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAC8AF
AFB1CA

Analogous

CABBAF
CAC8AF
BECAAF

Triadic

CAC8AF
AFCAC8
C8AFCA

Split-Comp.

CAC8AF
AFBECA
BBAFCA

Tetradic

CAC8AF
AFCABB
AFB1CA
CAAFBE

Contrast Matrix WCAG 2.1 Contrast

CAC8AF
B37E4C
985B2E
403B38
2F2B2A
—
2.1
Fail
3.2
AA Large
6.5
AA
8.3
AAA
2.1
Fail
—
1.6
Fail
3.2
AA Large
4.0
AA Large
3.2
AA Large
1.6
Fail
—
2.0
Fail
2.6
Fail
6.5
AA
3.2
AA Large
2.0
Fail
—
1.3
Fail
8.3
AAA
4.0
AA Large
2.6
Fail
1.3
Fail
—
White BG
1.7Fail
3.5AA Large
5.4AA
11.0AAA
14.0AAA
Black BG
12.4AAA
6.0AA
3.9AA Large
1.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9B5
9C9C58
7E7D39
3E3E39
2D2D2A

Deuteranopia

C9C9B7
9FA35B
81863C
3E3F39
2E2E2A

Tritanopia

CABABB
B06264
954143
403939
2F2A2A

Achromatopsia

C6C6C6
888888
686868
3C3C3C
2C2C2C

Shades & Tints Shades & Tints

#CAC8AF

Dark
Light

#B37E4C

Dark
Light

#985B2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cac8af;
  --color-2: #b37e4c;
  --color-3: #985b2e;
  --color-4: #403b38;
  --color-5: #2f2b2a;
}

SCSS

$color-1: #cac8af;
$color-2: #b37e4c;
$color-3: #985b2e;
$color-4: #403b38;
$color-5: #2f2b2a;

TAILWIND

colors: {
  'brand-1': '#cac8af',
  'brand-2': '#b37e4c',
  'brand-3': '#985b2e',
  'brand-4': '#403b38',
  'brand-5': '#2f2b2a',
}

RGB Array

[202, 200, 175], [179, 126, 76], [152, 91, 46], [64, 59, 56], [47, 43, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAC8AF, #B37E4C, #985B2E, #403B38, #2F2B2A is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cac8af; --color-2: #b37e4c; --color-3: #985b2e; --color-4: #403b38; --color-5: #2f2b2a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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