← Back to Editor

#BCD1C1 · #ABBD76 · #A19C3A · #AD3A23 · #452C21

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

#BCD1C1

Celadon · Silver · Apple Green

HEX
#BCD1C1
RGB
rgb(188, 209, 193)
HSL
hsl(134, 19%, 78%)
HSB
hsb(134, 10%, 82%)
CMYK
cmyk(10%, 0%, 8%, 18%)
Oklch
oklch(84.0% 0.032 152.8)

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

#ABBD76

Grass Green · DarkSeaGreen · Olive Green

HEX
#ABBD76
RGB
rgb(171, 189, 118)
HSL
hsl(75, 35%, 60%)
HSB
hsb(75, 38%, 74%)
CMYK
cmyk(10%, 0%, 38%, 26%)
Oklch
oklch(76.8% 0.096 120.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#A19C3A

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A19C3A
RGB
rgb(161, 156, 58)
HSL
hsl(57, 47%, 43%)
HSB
hsb(57, 64%, 63%)
CMYK
cmyk(0%, 3%, 64%, 37%)
Oklch
oklch(67.8% 0.119 106.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#AD3A23

Vermilion · Brown · Passion Red

HEX
#AD3A23
RGB
rgb(173, 58, 35)
HSL
hsl(10, 66%, 41%)
HSB
hsb(10, 80%, 68%)
CMYK
cmyk(0%, 66%, 80%, 32%)
Oklch
oklch(51.1% 0.155 33.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#452C21

Tangerine · DarkSlateGray · Cinnamon

HEX
#452C21
RGB
rgb(69, 44, 33)
HSL
hsl(18, 35%, 20%)
HSB
hsb(18, 52%, 27%)
CMYK
cmyk(0%, 36%, 52%, 73%)
Oklch
oklch(32.0% 0.042 44.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCD1C1
D2BCCD

Analogous

C2D2BC
BCD1C1
BCD2CC

Triadic

BCD1C1
C1BCD2
D2C1BC

Split-Comp.

BCD1C1
CCBCD2
D2BCC2

Tetradic

BCD1C1
BCC2D2
D2BCCD
D2CCBC

Contrast Matrix WCAG 2.1 Contrast

BCD1C1
ABBD76
A19C3A
AD3A23
452C21
—
1.3
Fail
1.8
Fail
3.8
AA Large
8.0
AAA
1.3
Fail
—
1.4
Fail
3.0
AA Large
6.3
AA
1.8
Fail
1.4
Fail
—
2.2
Fail
4.5
AA Large
3.8
AA Large
3.0
AA Large
2.2
Fail
—
2.1
Fail
8.0
AAA
6.3
AA
4.5
AA Large
2.1
Fail
—
White BG
1.6Fail
2.0Fail
2.9Fail
6.2AA
12.8AAA
Black BG
13.0AAA
10.3AAA
7.3AAA
3.4AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5C5
B3B387
9F9F52
7B7A29
3A3A24

Deuteranopia

C4C2C6
B2B08B
9FA057
828B2A
3C3E24

Tritanopia

BDC8C9
AC9598
A16469
A72D2E
442626

Achromatopsia

C9C9C9
B0B0B0
929292
5A5A5A
323232

Shades & Tints Shades & Tints

#BCD1C1

Dark
Light

#ABBD76

Dark
Light

#A19C3A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcd1c1;
  --color-2: #abbd76;
  --color-3: #a19c3a;
  --color-4: #ad3a23;
  --color-5: #452c21;
}

SCSS

$color-1: #bcd1c1;
$color-2: #abbd76;
$color-3: #a19c3a;
$color-4: #ad3a23;
$color-5: #452c21;

TAILWIND

colors: {
  'brand-1': '#bcd1c1',
  'brand-2': '#abbd76',
  'brand-3': '#a19c3a',
  'brand-4': '#ad3a23',
  'brand-5': '#452c21',
}

RGB Array

[188, 209, 193], [171, 189, 118], [161, 156, 58], [173, 58, 35], [69, 44, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCD1C1, #ABBD76, #A19C3A, #AD3A23, #452C21 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bcd1c1; --color-2: #abbd76; --color-3: #a19c3a; --color-4: #ad3a23; --color-5: #452c21. 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. 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