← Back to Editor

#A3CEBD · #A6CB6E · #BCA77C · #BE6577 · #C13A3E

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 Library

Color Details Color Details

#A3CEBD

Jade · Silver · Apple Green

HEX
#A3CEBD
RGB
rgb(163, 206, 189)
HSL
hsl(156, 30%, 72%)
HSB
hsb(156, 21%, 81%)
CMYK
cmyk(21%, 0%, 8%, 19%)
Oklch
oklch(81.6% 0.051 168.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#A6CB6E

Willow Green · DarkSeaGreen · Apple Green

HEX
#A6CB6E
RGB
rgb(166, 203, 110)
HSL
hsl(84, 47%, 61%)
HSB
hsb(84, 46%, 80%)
CMYK
cmyk(18%, 0%, 46%, 20%)
Oklch
oklch(79.4% 0.127 126.9)

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

#BCA77C

Ginger · Tan · Sunflower

HEX
#BCA77C
RGB
rgb(188, 167, 124)
HSL
hsl(40, 32%, 61%)
HSB
hsb(40, 34%, 74%)
CMYK
cmyk(0%, 11%, 34%, 26%)
Oklch
oklch(73.6% 0.063 84.8)

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

#BE6577

Crimson · LightCoral · Passion Red

HEX
#BE6577
RGB
rgb(190, 101, 119)
HSL
hsl(348, 41%, 57%)
HSB
hsb(348, 47%, 75%)
CMYK
cmyk(0%, 47%, 37%, 25%)
Oklch
oklch(61.4% 0.115 8.2)

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

#C13A3E

Crimson · Brown · Passion Red

HEX
#C13A3E
RGB
rgb(193, 58, 62)
HSL
hsl(358, 54%, 49%)
HSB
hsb(358, 70%, 76%)
CMYK
cmyk(0%, 70%, 68%, 24%)
Oklch
oklch(54.9% 0.171 23.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3CEBD
CDA2B3

Analogous

A2CDA6
A3CEBD
A2C9CD

Triadic

A3CEBD
BCA2CD
CDBCA2

Split-Comp.

A3CEBD
CDA2C9
CDA6A2

Tetradic

A3CEBD
A6A2CD
CDA2B3
C9CDA2

Contrast Matrix WCAG 2.1 Contrast

A3CEBD
A6CB6E
BCA77C
BE6577
C13A3E
—
1.1
Fail
1.4
Fail
2.3
Fail
3.1
AA Large
1.1
Fail
—
1.3
Fail
2.1
Fail
2.9
Fail
1.4
Fail
1.3
Fail
—
1.7
Fail
2.3
Fail
2.3
Fail
2.1
Fail
1.7
Fail
—
1.3
Fail
3.1
AA Large
2.9
Fail
2.3
Fail
1.3
Fail
—
White BG
1.7Fail
1.8Fail
2.3Fail
3.9AA Large
5.3AA
Black BG
12.1AAA
11.4AAA
9.0AAA
5.3AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6C1
B6B685
B3B386
979773
87853D

Deuteranopia

B3B0C2
B4B18A
B4B689
9DA372
8E993D

Tritanopia

A5C4C5
A8969A
BB8F90
BA6F6E
BA3C3C

Achromatopsia

BFBFBF
B5B5B5
A8A8A8
828282
636363

Shades & Tints Shades & Tints

#A3CEBD

Dark
Light

#A6CB6E

Dark
Light

#BCA77C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3cebd;
  --color-2: #a6cb6e;
  --color-3: #bca77c;
  --color-4: #be6577;
  --color-5: #c13a3e;
}

SCSS

$color-1: #a3cebd;
$color-2: #a6cb6e;
$color-3: #bca77c;
$color-4: #be6577;
$color-5: #c13a3e;

TAILWIND

colors: {
  'brand-1': '#a3cebd',
  'brand-2': '#a6cb6e',
  'brand-3': '#bca77c',
  'brand-4': '#be6577',
  'brand-5': '#c13a3e',
}

RGB Array

[163, 206, 189], [166, 203, 110], [188, 167, 124], [190, 101, 119], [193, 58, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3CEBD, #A6CB6E, #BCA77C, #BE6577, #C13A3E 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: #a3cebd; --color-2: #a6cb6e; --color-3: #bca77c; --color-4: #be6577; --color-5: #c13a3e. 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 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