← Back to Editor

#A7BE8A · #D2C992 · #C2B05E · #C38963 · #D25368

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 Library

Color Details Color Details

#A7BE8A

Willow Green · DarkSeaGreen · Apple Green

HEX
#A7BE8A
RGB
rgb(167, 190, 138)
HSL
hsl(87, 29%, 64%)
HSB
hsb(87, 27%, 75%)
CMYK
cmyk(12%, 0%, 27%, 25%)
Oklch
oklch(77.1% 0.075 127.5)

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

#D2C992

Fresh Green · Tan · Sunflower

HEX
#D2C992
RGB
rgb(210, 201, 146)
HSL
hsl(52, 42%, 70%)
HSB
hsb(52, 30%, 82%)
CMYK
cmyk(0%, 4%, 30%, 18%)
Oklch
oklch(83.0% 0.073 99.9)

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

#C2B05E

Ginger · Tan · Sunflower

HEX
#C2B05E
RGB
rgb(194, 176, 94)
HSL
hsl(49, 45%, 56%)
HSB
hsb(49, 52%, 76%)
CMYK
cmyk(0%, 9%, 52%, 24%)
Oklch
oklch(75.5% 0.105 97.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C38963

Tangerine · DarkSalmon · Warm Sun

HEX
#C38963
RGB
rgb(195, 137, 99)
HSL
hsl(24, 44%, 58%)
HSB
hsb(24, 49%, 76%)
CMYK
cmyk(0%, 30%, 49%, 24%)
Oklch
oklch(67.9% 0.088 53.9)

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

#D25368

Crimson · Tomato · Passion Red

HEX
#D25368
RGB
rgb(210, 83, 104)
HSL
hsl(350, 59%, 57%)
HSB
hsb(350, 60%, 82%)
CMYK
cmyk(0%, 60%, 50%, 18%)
Oklch
oklch(61.4% 0.161 13.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7BE8A
A189BE

Analogous

BEBB89
A7BE8A
8BBE89

Triadic

A7BE8A
89A6BE
BE89A6

Split-Comp.

A7BE8A
898BBE
BB89BE

Tetradic

A7BE8A
89BEBB
A189BE
BE898B

Contrast Matrix WCAG 2.1 Contrast

A7BE8A
D2C992
C2B05E
C38963
D25368
—
1.2
Fail
1.1
Fail
1.5
Fail
2.0
Fail
1.2
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.1
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
1.5
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
White BG
2.0Fail
1.7Fail
2.2Fail
3.0Fail
4.1AA Large
Black BG
10.4AAA
12.5AAA
9.7AAA
7.1AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B197
CECE9F
BABA72
AAA96C
9B9A63

Deuteranopia

B0AE9A
CFCFA3
BBBD77
ADB26E
A2AC62

Tritanopia

A8A1A3
D2AAAC
C18285
C07375
CC5F5E

Achromatopsia

B1B1B1
C5C5C5
ACACAC
969696
7B7B7B

Shades & Tints Shades & Tints

#A7BE8A

Dark
Light

#D2C992

Dark
Light

#C2B05E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7be8a;
  --color-2: #d2c992;
  --color-3: #c2b05e;
  --color-4: #c38963;
  --color-5: #d25368;
}

SCSS

$color-1: #a7be8a;
$color-2: #d2c992;
$color-3: #c2b05e;
$color-4: #c38963;
$color-5: #d25368;

TAILWIND

colors: {
  'brand-1': '#a7be8a',
  'brand-2': '#d2c992',
  'brand-3': '#c2b05e',
  'brand-4': '#c38963',
  'brand-5': '#d25368',
}

RGB Array

[167, 190, 138], [210, 201, 146], [194, 176, 94], [195, 137, 99], [210, 83, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7BE8A, #D2C992, #C2B05E, #C38963, #D25368 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: #a7be8a; --color-2: #d2c992; --color-3: #c2b05e; --color-4: #c38963; --color-5: #d25368. 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