#7ED7C5 + #F8D293 + #D8CE9D + #C1C9A2 + #A7C9A6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7ED7C5

Jade · MediumAquaMarine · Lake Green

HEX

#7ED7C5

RGB

rgb(126, 215, 197)

HSL

hsl(168, 53%, 67%)

HSB

hsb(168, 41%, 84%)

CMYK

cmyk(41%, 0%, 8%, 16%)

Oklch

oklch(81.8% 0.090 179.5)

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

#F8D293

Goose Yellow · Khaki · Peach Orange

HEX

#F8D293

RGB

rgb(248, 210, 147)

HSL

hsl(37, 88%, 77%)

HSB

hsb(37, 41%, 97%)

CMYK

cmyk(0%, 15%, 41%, 3%)

Oklch

oklch(88.2% 0.091 79.8)

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

#D8CE9D

Fresh Green · Tan · Sunflower

HEX

#D8CE9D

RGB

rgb(216, 206, 157)

HSL

hsl(50, 43%, 73%)

HSB

hsb(50, 27%, 85%)

CMYK

cmyk(0%, 5%, 27%, 15%)

Oklch

oklch(84.7% 0.065 97.9)

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

#C1C9A2

Willow Green · Silver · Apple Green

HEX

#C1C9A2

RGB

rgb(193, 201, 162)

HSL

hsl(72, 27%, 71%)

HSB

hsb(72, 19%, 79%)

CMYK

cmyk(4%, 0%, 19%, 21%)

Oklch

oklch(81.9% 0.053 117.0)

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

#A7C9A6

Celadon · DarkGray · Apple Green

HEX

#A7C9A6

RGB

rgb(167, 201, 166)

HSL

hsl(118, 24%, 72%)

HSB

hsb(118, 17%, 79%)

CMYK

cmyk(17%, 0%, 17%, 21%)

Oklch

oklch(80.1% 0.061 144.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7ED7C5

D77E90

Analogous

7ED799

7ED7C5

7EBDD7

Triadic

7ED7C5

C67ED7

D7C67E

Split-Comp.

7ED7C5

D77EBD

D7997E

Tetradic

7ED7C5

997ED7

D77E90

BDD77E

Contrast Matrix WCAG 2.1 Contrast

7ED7C5	F8D293	D8CE9D	C1C9A2	A7C9A6
—	1.2 Fail	1.1 Fail	1.0 Fail	1.1 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.0 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.3 Fail	1.1 Fail	1.1 Fail	—

White BG

1.7Fail

1.4Fail

1.6Fail

1.7Fail

1.8Fail

Black BG

12.4AAA

14.6AAA

13.2AAA

12.1AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5C9

E8E7A2

D4D4A9

C4C5AB

B6B6AE

Deuteranopia

9F99CA

EAEDA6

D4D5AC

C4C3AE

B4B1B1

Tritanopia

82CDCE

F6AEB1

D8B2B4

C1B3B5

A9B5B7

Achromatopsia

BABABA

D6D6D6

CBCBCB

C2C2C2

BBBBBB

Shades & Tints Shades & Tints

#7ED7C5

Dark

Light

#F8D293

Dark

Light

#D8CE9D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ed7c5;
  --color-2: #f8d293;
  --color-3: #d8ce9d;
  --color-4: #c1c9a2;
  --color-5: #a7c9a6;
}

SCSS

$color-1: #7ed7c5;
$color-2: #f8d293;
$color-3: #d8ce9d;
$color-4: #c1c9a2;
$color-5: #a7c9a6;

TAILWIND

colors: {
  'brand-1': '#7ed7c5',
  'brand-2': '#f8d293',
  'brand-3': '#d8ce9d',
  'brand-4': '#c1c9a2',
  'brand-5': '#a7c9a6',
}

RGB Array

[126, 215, 197], [248, 210, 147], [216, 206, 157], [193, 201, 162], [167, 201, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7ED7C5, #F8D293, #D8CE9D, #C1C9A2, #A7C9A6 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: #7ed7c5; --color-2: #f8d293; --color-3: #d8ce9d; --color-4: #c1c9a2; --color-5: #a7c9a6. 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