#C1DECA + #9AF1D1 + #D3D4AA + #E0DB99 + #F9D887 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C1DECA

Celadon · LightGray · Mint Green

HEX

#C1DECA

RGB

rgb(193, 222, 202)

HSL

hsl(139, 31%, 81%)

HSB

hsb(139, 13%, 87%)

CMYK

cmyk(13%, 0%, 9%, 13%)

Oklch

oklch(87.4% 0.041 155.3)

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

#9AF1D1

Jade · LightBlue · Apple Green

HEX

#9AF1D1

RGB

rgb(154, 241, 209)

HSL

hsl(158, 76%, 77%)

HSB

hsb(158, 36%, 95%)

CMYK

cmyk(36%, 0%, 13%, 5%)

Oklch

oklch(89.4% 0.096 168.9)

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

#D3D4AA

Fresh Green · Silver · Sunflower

HEX

#D3D4AA

RGB

rgb(211, 212, 170)

HSL

hsl(61, 33%, 75%)

HSB

hsb(61, 20%, 83%)

CMYK

cmyk(0%, 0%, 20%, 17%)

Oklch

oklch(85.8% 0.056 108.6)

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

#E0DB99

Fresh Green · Khaki · Sunflower

HEX

#E0DB99

RGB

rgb(224, 219, 153)

HSL

hsl(56, 53%, 74%)

HSB

hsb(56, 32%, 88%)

CMYK

cmyk(0%, 2%, 32%, 12%)

Oklch

oklch(88.0% 0.085 104.3)

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

#F9D887

Goose Yellow · Khaki · Sunflower

HEX

#F9D887

RGB

rgb(249, 216, 135)

HSL

hsl(43, 90%, 75%)

HSB

hsb(43, 46%, 98%)

CMYK

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

Oklch

oklch(89.3% 0.107 88.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1DECA

DEC0D4

Analogous

C5DEC0

C1DECA

C0DED8

Triadic

C1DECA

C9C0DE

DEC9C0

Split-Comp.

C1DECA

D8C0DE

DEC0C5

Tetradic

C1DECA

C0C5DE

DEC0D4

DED8C0

Contrast Matrix WCAG 2.1 Contrast

C1DECA	9AF1D1	D3D4AA	E0DB99	F9D887
—	1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail
1.1 Fail	—	1.2 Fail	1.1 Fail	1.0 Fail
1.1 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.0 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.3Fail

1.5Fail

1.4Fail

Black BG

14.6AAA

15.9AAA

13.8AAA

14.8AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECECF

C0C0D9

D3D3B4

DEDEA9

EBEA9B

Deuteranopia

CCCAD0

BBB4DB

D3D3B7

DEDFAD

EDEF9F

Tritanopia

C2D3D4

9EDFE0

D3BCBE

E0B6B8

F7AAAD

Achromatopsia

D3D3D3

CFCFCF

D5D5D5

D9D9D9

Shades & Tints Shades & Tints

#C1DECA

Dark

Light

#9AF1D1

Dark

Light

#D3D4AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1deca;
  --color-2: #9af1d1;
  --color-3: #d3d4aa;
  --color-4: #e0db99;
  --color-5: #f9d887;
}

SCSS

$color-1: #c1deca;
$color-2: #9af1d1;
$color-3: #d3d4aa;
$color-4: #e0db99;
$color-5: #f9d887;

TAILWIND

colors: {
  'brand-1': '#c1deca',
  'brand-2': '#9af1d1',
  'brand-3': '#d3d4aa',
  'brand-4': '#e0db99',
  'brand-5': '#f9d887',
}

RGB Array

[193, 222, 202], [154, 241, 209], [211, 212, 170], [224, 219, 153], [249, 216, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #C1DECA, #9AF1D1, #D3D4AA, #E0DB99, #F9D887 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: #c1deca; --color-2: #9af1d1; --color-3: #d3d4aa; --color-4: #e0db99; --color-5: #f9d887. 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 summer-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