#CCD7D1 + #F5E6EB + #AC9283 + #D8DD9B + #F5FF72 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCD7D1

Celadon · LightGray · Mint Green

HEX

#CCD7D1

RGB

rgb(204, 215, 209)

HSL

hsl(147, 12%, 82%)

HSB

hsb(147, 5%, 84%)

CMYK

cmyk(5%, 0%, 3%, 16%)

Oklch

oklch(86.9% 0.014 162.4)

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

#F5E6EB

Rouge · Linen · Cherry Blossom

HEX

#F5E6EB

RGB

rgb(245, 230, 235)

HSL

hsl(340, 43%, 93%)

HSB

hsb(340, 6%, 96%)

CMYK

cmyk(0%, 6%, 4%, 4%)

Oklch

oklch(93.8% 0.018 355.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#AC9283

Tangerine · DarkGray · Warm Sun

HEX

#AC9283

RGB

rgb(172, 146, 131)

HSL

hsl(22, 20%, 59%)

HSB

hsb(22, 24%, 67%)

CMYK

cmyk(0%, 15%, 24%, 33%)

Oklch

oklch(67.9% 0.038 51.8)

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

#D8DD9B

Fresh Green · Khaki · Sunflower

HEX

#D8DD9B

RGB

rgb(216, 221, 155)

HSL

hsl(65, 49%, 74%)

HSB

hsb(65, 30%, 87%)

CMYK

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

Oklch

oklch(87.8% 0.086 111.7)

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

#F5FF72

Fresh Green · Khaki · Sunflower

HEX

#F5FF72

RGB

rgb(245, 255, 114)

HSL

hsl(64, 100%, 72%)

HSB

hsb(64, 55%, 100%)

CMYK

cmyk(4%, 0%, 55%, 0%)

Oklch

oklch(96.6% 0.164 112.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD7D1

D7CCD2

Analogous

CCD7CC

CCD7D1

CCD7D6

Triadic

CCD7D1

D1CCD7

D7D1CC

Split-Comp.

CCD7D1

D6CCD7

D7CCCC

Tetradic

CCD7D1

CCCCD7

D7CCD2

D7D6CC

Contrast Matrix WCAG 2.1 Contrast

CCD7D1	F5E6EB	AC9283	D8DD9B	F5FF72
—	1.2 Fail	2.0 Fail	1.0 Fail	1.4 Fail
1.2 Fail	—	2.4 Fail	1.2 Fail	1.1 Fail
2.0 Fail	2.4 Fail	—	2.0 Fail	2.7 Fail
1.0 Fail	1.2 Fail	2.0 Fail	—	1.3 Fail
1.4 Fail	1.1 Fail	2.7 Fail	1.3 Fail	—

White BG

1.5Fail

1.2Fail

2.9Fail

1.4Fail

1.1Fail

Black BG

14.2AAA

17.4AAA

7.2AAA

14.7AAA

19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1D2

EFEEEA

A1A187

DADAAB

F9F994

Deuteranopia

D0CFD3

EFF1EA

A2A488

DADAAF

F9F89C

Tritanopia

CDD4D4

F4E9E9

AB898A

D8B8BA

F6AFB5

Achromatopsia

D3D3D3

EBEBEB

989898

D4D4D4

ECECEC

Shades & Tints Shades & Tints

#CCD7D1

Dark

Light

#F5E6EB

Dark

Light

#AC9283

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd7d1;
  --color-2: #f5e6eb;
  --color-3: #ac9283;
  --color-4: #d8dd9b;
  --color-5: #f5ff72;
}

SCSS

$color-1: #ccd7d1;
$color-2: #f5e6eb;
$color-3: #ac9283;
$color-4: #d8dd9b;
$color-5: #f5ff72;

TAILWIND

colors: {
  'brand-1': '#ccd7d1',
  'brand-2': '#f5e6eb',
  'brand-3': '#ac9283',
  'brand-4': '#d8dd9b',
  'brand-5': '#f5ff72',
}

RGB Array

[204, 215, 209], [245, 230, 235], [172, 146, 131], [216, 221, 155], [245, 255, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CCD7D1, #F5E6EB, #AC9283, #D8DD9B, #F5FF72 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: #ccd7d1; --color-2: #f5e6eb; --color-3: #ac9283; --color-4: #d8dd9b; --color-5: #f5ff72. 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