#FCC689 + #D5F0EC + #B6E3DC + #8FC9C1 + #74B8AF · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCC689

Goose Yellow · BurlyWood · Peach Orange

HEX

#FCC689

RGB

rgb(252, 198, 137)

HSL

hsl(32, 95%, 76%)

HSB

hsb(32, 46%, 99%)

CMYK

cmyk(0%, 21%, 46%, 1%)

Oklch

oklch(86.1% 0.099 69.3)

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

#D5F0EC

Jade · Lavender · Glacier Blue

HEX

#D5F0EC

RGB

rgb(213, 240, 236)

HSL

hsl(171, 47%, 89%)

HSB

hsb(171, 11%, 94%)

CMYK

cmyk(11%, 0%, 2%, 6%)

Oklch

oklch(93.4% 0.029 185.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#B6E3DC

Jade · LightBlue · Glacier Blue

HEX

#B6E3DC

RGB

rgb(182, 227, 220)

HSL

hsl(171, 45%, 80%)

HSB

hsb(171, 20%, 89%)

CMYK

cmyk(20%, 0%, 3%, 11%)

Oklch

oklch(88.2% 0.048 184.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#8FC9C1

Jade · SkyBlue · Lake Green

HEX

#8FC9C1

RGB

rgb(143, 201, 193)

HSL

hsl(172, 35%, 67%)

HSB

hsb(172, 29%, 79%)

CMYK

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

Oklch

oklch(79.4% 0.061 185.4)

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

#74B8AF

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#74B8AF

RGB

rgb(116, 184, 175)

HSL

hsl(172, 32%, 59%)

HSB

hsb(172, 37%, 72%)

CMYK

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

Oklch

oklch(73.5% 0.070 185.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCC689

88BEFC

Analogous

FC8C88

FCC689

F8FC88

Triadic

FCC689

88FCC6

C688FC

Split-Comp.

FCC689

88F8FC

8C88FC

Tetradic

FCC689

88FC8C

88BEFC

FC88F8

Contrast Matrix WCAG 2.1 Contrast

FCC689	D5F0EC	B6E3DC	8FC9C1	74B8AF
—	1.3 Fail	1.1 Fail	1.2 Fail	1.5 Fail
1.3 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.1 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
1.2 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
1.5 Fail	1.9 Fail	1.6 Fail	1.2 Fail	—

White BG

1.5Fail

1.2Fail

1.4Fail

1.9Fail

2.3Fail

Black BG

13.6AAA

17.5AAA

15.0AAA

11.3AAA

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E498

E1E1ED

C9CADE

A8A9C3

9192B1

Deuteranopia

E8EC9B

DFDDED

C7C4DE

A5A0C3

8E88B2

Tritanopia

F9A3A6

D6EEEE

B8DFDF

92C4C5

77B3B3

Achromatopsia

CFCFCF

E7E7E7

D5D5D5

B7B7B7

A3A3A3

Shades & Tints Shades & Tints

#FCC689

Dark

Light

#D5F0EC

Dark

Light

#B6E3DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcc689;
  --color-2: #d5f0ec;
  --color-3: #b6e3dc;
  --color-4: #8fc9c1;
  --color-5: #74b8af;
}

SCSS

$color-1: #fcc689;
$color-2: #d5f0ec;
$color-3: #b6e3dc;
$color-4: #8fc9c1;
$color-5: #74b8af;

TAILWIND

colors: {
  'brand-1': '#fcc689',
  'brand-2': '#d5f0ec',
  'brand-3': '#b6e3dc',
  'brand-4': '#8fc9c1',
  'brand-5': '#74b8af',
}

RGB Array

[252, 198, 137], [213, 240, 236], [182, 227, 220], [143, 201, 193], [116, 184, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #FCC689, #D5F0EC, #B6E3DC, #8FC9C1, #74B8AF 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: #fcc689; --color-2: #d5f0ec; --color-3: #b6e3dc; --color-4: #8fc9c1; --color-5: #74b8af. 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 earth-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