← Back to Editor

#C1CFAE · #B8AF8A · #826A5E · #362121 · #73BFB5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C1CFAE

Willow Green · Silver · Apple Green

HEX
#C1CFAE
RGB
rgb(193, 207, 174)
HSL
hsl(85, 26%, 75%)
HSB
hsb(85, 16%, 81%)
CMYK
cmyk(7%, 0%, 16%, 19%)
Oklch
oklch(83.5% 0.047 126.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B8AF8A

Ginger · Tan · Sunflower

HEX
#B8AF8A
RGB
rgb(184, 175, 138)
HSL
hsl(48, 24%, 63%)
HSB
hsb(48, 25%, 72%)
CMYK
cmyk(0%, 5%, 25%, 28%)
Oklch
oklch(75.2% 0.052 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#826A5E

Tangerine · DimGray · Amber Brown

HEX
#826A5E
RGB
rgb(130, 106, 94)
HSL
hsl(20, 16%, 44%)
HSB
hsb(20, 28%, 51%)
CMYK
cmyk(0%, 18%, 28%, 49%)
Oklch
oklch(54.4% 0.036 48.0)

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

#362121

Crimson · DarkSlateGray · Deep Berry

HEX
#362121
RGB
rgb(54, 33, 33)
HSL
hsl(0, 24%, 17%)
HSB
hsb(0, 39%, 21%)
CMYK
cmyk(0%, 39%, 39%, 79%)
Oklch
oklch(27.4% 0.033 19.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#73BFB5

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#73BFB5
RGB
rgb(115, 191, 181)
HSL
hsl(172, 37%, 60%)
HSB
hsb(172, 40%, 75%)
CMYK
cmyk(40%, 0%, 5%, 25%)
Oklch
oklch(75.2% 0.077 185.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1CFAE
BCAFD0

Analogous

D0CDAF
C1CFAE
B1D0AF

Triadic

C1CFAE
AFC2D0
D0AFC2

Split-Comp.

C1CFAE
AFB1D0
CDAFD0

Tetradic

C1CFAE
AFD0CD
BCAFD0
D0AFB1

Contrast Matrix WCAG 2.1 Contrast

C1CFAE
B8AF8A
826A5E
362121
73BFB5
—
1.3
Fail
3.1
AA Large
9.2
AAA
1.3
Fail
1.3
Fail
—
2.3
Fail
6.8
AA
1.0
Fail
3.1
AA Large
2.3
Fail
—
3.0
Fail
2.4
Fail
9.2
AAA
6.8
AA
3.0
Fail
—
7.1
AAA
1.3
Fail
1.0
Fail
2.4
Fail
7.1
AAA
—
White BG
1.6Fail
2.2Fail
5.0AA
15.0AAA
2.1Fail
Black BG
12.8AAA
9.5AAA
4.2AA Large
1.4Fail
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7B6
B4B493
787761
2D2D21
9495B7

Deuteranopia

C6C5B8
B5B595
797B62
2E3021
908AB8

Tritanopia

C2BCBE
B89A9C
816364
352121
77B9BA

Achromatopsia

C7C7C7
ADADAD
707070
272727
A7A7A7

Shades & Tints Shades & Tints

#C1CFAE

Dark
Light

#B8AF8A

Dark
Light

#826A5E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1cfae;
  --color-2: #b8af8a;
  --color-3: #826a5e;
  --color-4: #362121;
  --color-5: #73bfb5;
}

SCSS

$color-1: #c1cfae;
$color-2: #b8af8a;
$color-3: #826a5e;
$color-4: #362121;
$color-5: #73bfb5;

TAILWIND

colors: {
  'brand-1': '#c1cfae',
  'brand-2': '#b8af8a',
  'brand-3': '#826a5e',
  'brand-4': '#362121',
  'brand-5': '#73bfb5',
}

RGB Array

[193, 207, 174], [184, 175, 138], [130, 106, 94], [54, 33, 33], [115, 191, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1CFAE, #B8AF8A, #826A5E, #362121, #73BFB5 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: #c1cfae; --color-2: #b8af8a; --color-3: #826a5e; --color-4: #362121; --color-5: #73bfb5. 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