#97DEDA + #F0E17D + #DDEDDE + #A1CDC1 + #63BFC0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#97DEDA

Jade · LightBlue · Lake Green

HEX

#97DEDA

RGB

rgb(151, 222, 218)

HSL

hsl(177, 52%, 73%)

HSB

hsb(177, 32%, 87%)

CMYK

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

Oklch

oklch(85.3% 0.071 191.4)

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

#F0E17D

Fresh Green · Khaki · Sunflower

HEX

#F0E17D

RGB

rgb(240, 225, 125)

HSL

hsl(52, 79%, 72%)

HSB

hsb(52, 48%, 94%)

CMYK

cmyk(0%, 6%, 48%, 6%)

Oklch

oklch(90.1% 0.123 100.9)

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

#DDEDDE

Celadon · Beige · Mint Green

HEX

#DDEDDE

RGB

rgb(221, 237, 222)

HSL

hsl(124, 31%, 90%)

HSB

hsb(124, 7%, 93%)

CMYK

cmyk(7%, 0%, 6%, 7%)

Oklch

oklch(93.0% 0.026 147.1)

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

#A1CDC1

Jade · Silver · Lake Green

HEX

#A1CDC1

RGB

rgb(161, 205, 193)

HSL

hsl(164, 31%, 72%)

HSB

hsb(164, 21%, 80%)

CMYK

cmyk(21%, 0%, 6%, 20%)

Oklch

oklch(81.4% 0.049 176.5)

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

#63BFC0

Slate Blue · MediumAquaMarine · Lake Green

HEX

#63BFC0

RGB

rgb(99, 191, 192)

HSL

hsl(181, 42%, 57%)

HSB

hsb(181, 48%, 75%)

CMYK

cmyk(48%, 1%, 0%, 25%)

Oklch

oklch(74.9% 0.088 196.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97DEDA

DE969A

Analogous

96DEB7

97DEDA

96BEDE

Triadic

97DEDA

DA96DE

DEDA96

Split-Comp.

97DEDA

DE96BE

DEB796

Tetradic

97DEDA

B796DE

DE969A

BEDE96

Contrast Matrix WCAG 2.1 Contrast

97DEDA	F0E17D	DDEDDE	A1CDC1	63BFC0
—	1.1 Fail	1.3 Fail	1.1 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	1.8 Fail
1.1 Fail	1.3 Fail	1.4 Fail	—	1.2 Fail
1.4 Fail	1.6 Fail	1.8 Fail	1.2 Fail	—

White BG

1.5Fail

1.3Fail

1.2Fail

1.7Fail

2.2Fail

Black BG

13.8AAA

15.8AAA

17.2AAA

12.0AAA

9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6DB

EAE995

E4E4E2

B4B4C4

8B8CC0

Deuteranopia

B2ACDB

EAEC9B

E3E2E2

B2AEC5

867FC0

Tritanopia

9BDCDC

EFA8AD

DEE4E5

A3C6C7

68C0C0

Achromatopsia

C8C8C8

DADADA

E7E7E7

BEBEBE

A4A4A4

Shades & Tints Shades & Tints

#97DEDA

Dark

Light

#F0E17D

Dark

Light

#DDEDDE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97deda;
  --color-2: #f0e17d;
  --color-3: #ddedde;
  --color-4: #a1cdc1;
  --color-5: #63bfc0;
}

SCSS

$color-1: #97deda;
$color-2: #f0e17d;
$color-3: #ddedde;
$color-4: #a1cdc1;
$color-5: #63bfc0;

TAILWIND

colors: {
  'brand-1': '#97deda',
  'brand-2': '#f0e17d',
  'brand-3': '#ddedde',
  'brand-4': '#a1cdc1',
  'brand-5': '#63bfc0',
}

RGB Array

[151, 222, 218], [240, 225, 125], [221, 237, 222], [161, 205, 193], [99, 191, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97DEDA, #F0E17D, #DDEDDE, #A1CDC1, #63BFC0 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: #97deda; --color-2: #f0e17d; --color-3: #ddedde; --color-4: #a1cdc1; --color-5: #63bfc0. 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 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