#C3AD86 + #E2DCBA + #EDF8E7 + #C5EDCB + #97BC93 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3AD86

Ginger · Tan · Warm Sun

HEX

#C3AD86

RGB

rgb(195, 173, 134)

HSL

hsl(38, 34%, 65%)

HSB

hsb(38, 31%, 76%)

CMYK

cmyk(0%, 11%, 31%, 24%)

Oklch

oklch(75.7% 0.059 81.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E2DCBA

Fresh Green · Wheat · Lemon Cream

HEX

#E2DCBA

RGB

rgb(226, 220, 186)

HSL

hsl(51, 41%, 81%)

HSB

hsb(51, 18%, 89%)

CMYK

cmyk(0%, 3%, 18%, 11%)

Oklch

oklch(89.0% 0.046 99.0)

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

#EDF8E7

Emerald · Beige · Mint Green

HEX

#EDF8E7

RGB

rgb(237, 248, 231)

HSL

hsl(99, 55%, 94%)

HSB

hsb(99, 7%, 97%)

CMYK

cmyk(4%, 0%, 7%, 3%)

Oklch

oklch(96.6% 0.025 134.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#C5EDCB

Emerald · LightGray · Mint Green

HEX

#C5EDCB

RGB

rgb(197, 237, 203)

HSL

hsl(129, 53%, 85%)

HSB

hsb(129, 17%, 93%)

CMYK

cmyk(17%, 0%, 14%, 7%)

Oklch

oklch(90.9% 0.062 149.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#97BC93

Celadon · DarkSeaGreen · Apple Green

HEX

#97BC93

RGB

rgb(151, 188, 147)

HSL

hsl(114, 23%, 66%)

HSB

hsb(114, 22%, 74%)

CMYK

cmyk(20%, 0%, 22%, 26%)

Oklch

oklch(75.7% 0.070 142.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3AD86

879EC4

Analogous

C48F87

C3AD86

BCC487

Triadic

C3AD86

87C4AE

AE87C4

Split-Comp.

C3AD86

87BCC4

8F87C4

Tetradic

C3AD86

87C48F

879EC4

C487BC

Contrast Matrix WCAG 2.1 Contrast

C3AD86	E2DCBA	EDF8E7	C5EDCB	97BC93
—	1.6 Fail	2.0 Fail	1.7 Fail	1.0 Fail
1.6 Fail	—	1.3 Fail	1.1 Fail	1.5 Fail
2.0 Fail	1.3 Fail	—	1.2 Fail	1.9 Fail
1.7 Fail	1.1 Fail	1.2 Fail	—	1.6 Fail
1.0 Fail	1.5 Fail	1.9 Fail	1.6 Fail	—

White BG

2.2Fail

1.4Fail

1.1Fail

1.3Fail

2.1Fail

Black BG

9.6AAA

15.2AAA

19.2AAA

16.4AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B98F

DFDFC2

F2F2EB

D6D7D3

A7A79D

Deuteranopia

BBBC92

E0E0C4

F1F0EC

D4D1D5

A5A29F

Tritanopia

C29799

E2C9CA

EEEEEF

C7DADB

99A5A6

Achromatopsia

AFAFAF

DADADA

F3F3F3

DDDDDD

ACACAC

Shades & Tints Shades & Tints

#C3AD86

Dark

Light

#E2DCBA

Dark

Light

#EDF8E7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3ad86;
  --color-2: #e2dcba;
  --color-3: #edf8e7;
  --color-4: #c5edcb;
  --color-5: #97bc93;
}

SCSS

$color-1: #c3ad86;
$color-2: #e2dcba;
$color-3: #edf8e7;
$color-4: #c5edcb;
$color-5: #97bc93;

TAILWIND

colors: {
  'brand-1': '#c3ad86',
  'brand-2': '#e2dcba',
  'brand-3': '#edf8e7',
  'brand-4': '#c5edcb',
  'brand-5': '#97bc93',
}

RGB Array

[195, 173, 134], [226, 220, 186], [237, 248, 231], [197, 237, 203], [151, 188, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #C3AD86, #E2DCBA, #EDF8E7, #C5EDCB, #97BC93 is ideal for: health products, baby brands, fresh-style blogs. 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: #c3ad86; --color-2: #e2dcba; --color-3: #edf8e7; --color-4: #c5edcb; --color-5: #97bc93. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 spring-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