#CFF5E0 + #CFF09F + #D6BE98 + #8BA699 + #7288A0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFF5E0

Emerald · LightGray · Mint Green

HEX

#CFF5E0

RGB

rgb(207, 245, 224)

HSL

hsl(147, 66%, 89%)

HSB

hsb(147, 16%, 96%)

CMYK

cmyk(16%, 0%, 9%, 4%)

Oklch

oklch(93.7% 0.048 161.2)

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

#CFF09F

Willow Green · Khaki · Apple Green

HEX

#CFF09F

RGB

rgb(207, 240, 159)

HSL

hsl(84, 73%, 78%)

HSB

hsb(84, 34%, 94%)

CMYK

cmyk(14%, 0%, 34%, 6%)

Oklch

oklch(91.2% 0.110 126.5)

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

#D6BE98

Goose Yellow · Tan · Warm Sun

HEX

#D6BE98

RGB

rgb(214, 190, 152)

HSL

hsl(37, 43%, 72%)

HSB

hsb(37, 29%, 84%)

CMYK

cmyk(0%, 11%, 29%, 16%)

Oklch

oklch(81.2% 0.058 79.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#8BA699

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#8BA699

RGB

rgb(139, 166, 153)

HSL

hsl(151, 13%, 60%)

HSB

hsb(151, 16%, 65%)

CMYK

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

Oklch

oklch(70.1% 0.035 164.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#7288A0

Azure · LightSlateGray · Navy Blue

HEX

#7288A0

RGB

rgb(114, 136, 160)

HSL

hsl(211, 19%, 54%)

HSB

hsb(211, 29%, 63%)

CMYK

cmyk(29%, 15%, 0%, 37%)

Oklch

oklch(61.8% 0.044 250.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFF5E0

F5D0E5

Analogous

D2F5D0

CFF5E0

D0F5F4

Triadic

CFF5E0

E1D0F5

F5E1D0

Split-Comp.

CFF5E0

F4D0F5

F5D0D2

Tetradic

CFF5E0

D0D2F5

F5D0E5

F5F4D0

Contrast Matrix WCAG 2.1 Contrast

CFF5E0	CFF09F	D6BE98	8BA699	7288A0
—	1.1 Fail	1.5 Fail	2.2 Fail	3.1 AA Large
1.1 Fail	—	1.4 Fail	2.1 Fail	2.9 Fail
1.5 Fail	1.4 Fail	—	1.5 Fail	2.0 Fail
2.2 Fail	2.1 Fail	1.5 Fail	—	1.4 Fail
3.1 AA Large	2.9 Fail	2.0 Fail	1.4 Fail	—

White BG

1.2Fail

1.3Fail

1.8Fail

2.6Fail

3.7AA Large

Black BG

17.8AAA

16.6AAA

11.7AAA

8.0AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFE0E5

DDDEB3

CCCBA1

97979C

7C7C9A

Deuteranopia

DDDAE6

DBD9B7

CDCFA3

95939D

7A7999

Tritanopia

D1E9EA

D1C2C5

D5A8AA

8C9F9F

739695

Achromatopsia

E7E7E7

DDDDDD

C1C1C1

9C9C9C

848484

Shades & Tints Shades & Tints

#CFF5E0

Dark

Light

#CFF09F

Dark

Light

#D6BE98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cff5e0;
  --color-2: #cff09f;
  --color-3: #d6be98;
  --color-4: #8ba699;
  --color-5: #7288a0;
}

SCSS

$color-1: #cff5e0;
$color-2: #cff09f;
$color-3: #d6be98;
$color-4: #8ba699;
$color-5: #7288a0;

TAILWIND

colors: {
  'brand-1': '#cff5e0',
  'brand-2': '#cff09f',
  'brand-3': '#d6be98',
  'brand-4': '#8ba699',
  'brand-5': '#7288a0',
}

RGB Array

[207, 245, 224], [207, 240, 159], [214, 190, 152], [139, 166, 153], [114, 136, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFF5E0, #CFF09F, #D6BE98, #8BA699, #7288A0 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: #cff5e0; --color-2: #cff09f; --color-3: #d6be98; --color-4: #8ba699; --color-5: #7288a0. 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