#CCB497 + #C8CCB1 + #E3D6C1 + #F98F6F + #D94A79 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCB497

Ginger · Tan · Warm Sun

HEX

#CCB497

RGB

rgb(204, 180, 151)

HSL

hsl(33, 34%, 70%)

HSB

hsb(33, 26%, 80%)

CMYK

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

Oklch

oklch(78.3% 0.048 72.3)

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

#C8CCB1

Fresh Green · Silver · Sunflower

HEX

#C8CCB1

RGB

rgb(200, 204, 177)

HSL

hsl(69, 21%, 75%)

HSB

hsb(69, 13%, 80%)

CMYK

cmyk(2%, 0%, 13%, 20%)

Oklch

oklch(83.5% 0.037 114.0)

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

#E3D6C1

Goose Yellow · Wheat · Peach Orange

HEX

#E3D6C1

RGB

rgb(227, 214, 193)

HSL

hsl(37, 38%, 82%)

HSB

hsb(37, 15%, 89%)

CMYK

cmyk(0%, 6%, 15%, 11%)

Oklch

oklch(88.1% 0.032 79.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F98F6F

Peach Pink · Salmon · Coral Red

HEX

#F98F6F

RGB

rgb(249, 143, 111)

HSL

hsl(14, 92%, 71%)

HSB

hsb(14, 55%, 98%)

CMYK

cmyk(0%, 43%, 55%, 2%)

Oklch

oklch(75.6% 0.137 37.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D94A79

Dark Violet · MediumVioletRed · Rose Pink

HEX

#D94A79

RGB

rgb(217, 74, 121)

HSL

hsl(340, 65%, 57%)

HSB

hsb(340, 66%, 85%)

CMYK

cmyk(0%, 66%, 44%, 15%)

Oklch

oklch(61.8% 0.182 4.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCB497

98B0CD

Analogous

CD9B98

CCB497

CACD98

Triadic

CCB497

98CDB5

B598CD

Split-Comp.

CCB497

98CACD

9B98CD

Tetradic

CCB497

98CD9B

98B0CD

CD98CA

Contrast Matrix WCAG 2.1 Contrast

CCB497	C8CCB1	E3D6C1	F98F6F	D94A79
—	1.2 Fail	1.4 Fail	1.1 Fail	2.0 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	2.4 Fail
1.4 Fail	1.2 Fail	—	1.6 Fail	2.8 Fail
1.1 Fail	1.4 Fail	1.6 Fail	—	1.8 Fail
2.0 Fail	2.4 Fail	2.8 Fail	1.8 Fail	—

White BG

2.0Fail

1.6Fail

1.4Fail

2.3Fail

4.0AA Large

Black BG

10.5AAA

12.7AAA

14.7AAA

9.2AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C19E

CACAB8

DDDDC6

CBCA77

9B9A6E

Deuteranopia

C3C5A0

CAC9B9

DEDFC7

D1D979

A3AE6B

Tritanopia

CBA4A5

C8BDBE

E2CACB

F47D7E

D26563

Achromatopsia

B8B8B8

C8C8C8

D7D7D7

ABABAB

7A7A7A

Shades & Tints Shades & Tints

#CCB497

Dark

Light

#C8CCB1

Dark

Light

#E3D6C1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccb497;
  --color-2: #c8ccb1;
  --color-3: #e3d6c1;
  --color-4: #f98f6f;
  --color-5: #d94a79;
}

SCSS

$color-1: #ccb497;
$color-2: #c8ccb1;
$color-3: #e3d6c1;
$color-4: #f98f6f;
$color-5: #d94a79;

TAILWIND

colors: {
  'brand-1': '#ccb497',
  'brand-2': '#c8ccb1',
  'brand-3': '#e3d6c1',
  'brand-4': '#f98f6f',
  'brand-5': '#d94a79',
}

RGB Array

[204, 180, 151], [200, 204, 177], [227, 214, 193], [249, 143, 111], [217, 74, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CCB497, #C8CCB1, #E3D6C1, #F98F6F, #D94A79 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: #ccb497; --color-2: #c8ccb1; --color-3: #e3d6c1; --color-4: #f98f6f; --color-5: #d94a79. 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