#7FB0A7 + #A9CFC8 + #F2F0DC + #DEDBC1 + #CCC9AB · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7FB0A7

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#7FB0A7

RGB

rgb(127, 176, 167)

HSL

hsl(169, 24%, 59%)

HSB

hsb(169, 28%, 69%)

CMYK

cmyk(28%, 0%, 5%, 31%)

Oklch

oklch(72.0% 0.054 182.1)

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

#A9CFC8

Jade · LightSteelBlue · Lake Green

HEX

#A9CFC8

RGB

rgb(169, 207, 200)

HSL

hsl(169, 28%, 74%)

HSB

hsb(169, 18%, 81%)

CMYK

cmyk(18%, 0%, 3%, 19%)

Oklch

oklch(82.5% 0.041 182.8)

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

#F2F0DC

Fresh Green · Beige · Lemon Cream

HEX

#F2F0DC

RGB

rgb(242, 240, 220)

HSL

hsl(55, 46%, 91%)

HSB

hsb(55, 9%, 95%)

CMYK

cmyk(0%, 1%, 9%, 5%)

Oklch

oklch(95.1% 0.026 102.2)

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

#DEDBC1

Fresh Green · LightGray · Lemon Cream

HEX

#DEDBC1

RGB

rgb(222, 219, 193)

HSL

hsl(54, 31%, 81%)

HSB

hsb(54, 13%, 87%)

CMYK

cmyk(0%, 1%, 13%, 13%)

Oklch

oklch(88.7% 0.035 101.7)

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

#CCC9AB

Fresh Green · Silver · Sunflower

HEX

#CCC9AB

RGB

rgb(204, 201, 171)

HSL

hsl(55, 24%, 74%)

HSB

hsb(55, 16%, 80%)

CMYK

cmyk(0%, 1%, 16%, 20%)

Oklch

oklch(83.0% 0.041 102.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FB0A7

B07D87

Analogous

7DB08D

7FB0A7

7DA0B0

Triadic

7FB0A7

A67DB0

B0A67D

Split-Comp.

7FB0A7

B07DA0

B08D7D

Tetradic

7FB0A7

8D7DB0

B07D87

A0B07D

Contrast Matrix WCAG 2.1 Contrast

7FB0A7	A9CFC8	F2F0DC	DEDBC1	CCC9AB
—	1.4 Fail	2.1 Fail	1.7 Fail	1.4 Fail
1.4 Fail	—	1.5 Fail	1.2 Fail	1.0 Fail
2.1 Fail	1.5 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.2 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	1.0 Fail	1.5 Fail	1.2 Fail	—

White BG

2.4Fail

1.7Fail

1.1Fail

1.4Fail

1.7Fail

Black BG

8.7AAA

12.4AAA

18.3AAA

15.0AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9495A9

B9BACA

F1F1E1

DDDDC7

CBCBB2

Deuteranopia

918EAA

B7B4CA

F1F1E2

DDDDC9

CBCBB4

Tritanopia

81ABAB

ABCBCB

F2E5E6

DECCCD

CCB8B9

Achromatopsia

A0A0A0

C3C3C3

EEEEEE

D9D9D9

C6C6C6

Shades & Tints Shades & Tints

#7FB0A7

Dark

Light

#A9CFC8

Dark

Light

#F2F0DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fb0a7;
  --color-2: #a9cfc8;
  --color-3: #f2f0dc;
  --color-4: #dedbc1;
  --color-5: #ccc9ab;
}

SCSS

$color-1: #7fb0a7;
$color-2: #a9cfc8;
$color-3: #f2f0dc;
$color-4: #dedbc1;
$color-5: #ccc9ab;

TAILWIND

colors: {
  'brand-1': '#7fb0a7',
  'brand-2': '#a9cfc8',
  'brand-3': '#f2f0dc',
  'brand-4': '#dedbc1',
  'brand-5': '#ccc9ab',
}

RGB Array

[127, 176, 167], [169, 207, 200], [242, 240, 220], [222, 219, 193], [204, 201, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #7FB0A7, #A9CFC8, #F2F0DC, #DEDBC1, #CCC9AB 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: #7fb0a7; --color-2: #a9cfc8; --color-3: #f2f0dc; --color-4: #dedbc1; --color-5: #ccc9ab. 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 cool-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