#8EA1AC + #FFD093 + #F8B75A + #B38C69 + #C3A080 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EA1AC

Sky Blue · DarkGray · Cobalt Blue

HEX

#8EA1AC

RGB

rgb(142, 161, 172)

HSL

hsl(202, 15%, 62%)

HSB

hsb(202, 17%, 67%)

CMYK

cmyk(17%, 6%, 0%, 33%)

Oklch

oklch(69.8% 0.027 233.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#FFD093

Goose Yellow · Khaki · Peach Orange

HEX

#FFD093

RGB

rgb(255, 208, 147)

HSL

hsl(34, 100%, 79%)

HSB

hsb(34, 42%, 100%)

CMYK

cmyk(0%, 18%, 42%, 0%)

Oklch

oklch(88.5% 0.094 73.4)

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

#F8B75A

Ginger · SandyBrown · Warm Sun

HEX

#F8B75A

RGB

rgb(248, 183, 90)

HSL

hsl(35, 92%, 66%)

HSB

hsb(35, 64%, 97%)

CMYK

cmyk(0%, 26%, 64%, 3%)

Oklch

oklch(82.2% 0.133 73.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#B38C69

Tangerine · Gray · Warm Sun

HEX

#B38C69

RGB

rgb(179, 140, 105)

HSL

hsl(28, 33%, 56%)

HSB

hsb(28, 41%, 70%)

CMYK

cmyk(0%, 22%, 41%, 30%)

Oklch

oklch(66.8% 0.068 63.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C3A080

Apricot · Tan · Warm Sun

HEX

#C3A080

RGB

rgb(195, 160, 128)

HSL

hsl(29, 36%, 63%)

HSB

hsb(29, 34%, 76%)

CMYK

cmyk(0%, 18%, 34%, 24%)

Oklch

oklch(72.9% 0.061 64.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EA1AC

AD9A90

Analogous

90ADA9

8EA1AC

9093AD

Triadic

8EA1AC

AD90A2

A2AD90

Split-Comp.

8EA1AC

AD9093

ADA990

Tetradic

8EA1AC

A990AD

AD9A90

93AD90

Contrast Matrix WCAG 2.1 Contrast

8EA1AC	FFD093	F8B75A	B38C69	C3A080
—	1.9 Fail	1.5 Fail	1.1 Fail	1.1 Fail
1.9 Fail	—	1.2 Fail	2.1 Fail	1.7 Fail
1.5 Fail	1.2 Fail	—	1.7 Fail	1.4 Fail
1.1 Fail	2.1 Fail	1.7 Fail	—	1.3 Fail
1.1 Fail	1.7 Fail	1.4 Fail	1.3 Fail	—

White BG

2.7Fail

1.4Fail

1.8Fail

3.1AA Large

2.4Fail

Black BG

7.8AAA

14.7AAA

11.9AAA

6.9AA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9696A9

EBEAA2

DCDB71

A2A271

B4B488

Deuteranopia

9594A9

EDF1A5

E0E576

A4A774

B6B98A

Tritanopia

8FA7A7

FDADB0

F58286

B1787A

C18E8F

Achromatopsia

9D9D9D

D7D7D7

C0C0C0

949494

A7A7A7

Shades & Tints Shades & Tints

#8EA1AC

Dark

Light

#FFD093

Dark

Light

#F8B75A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ea1ac;
  --color-2: #ffd093;
  --color-3: #f8b75a;
  --color-4: #b38c69;
  --color-5: #c3a080;
}

SCSS

$color-1: #8ea1ac;
$color-2: #ffd093;
$color-3: #f8b75a;
$color-4: #b38c69;
$color-5: #c3a080;

TAILWIND

colors: {
  'brand-1': '#8ea1ac',
  'brand-2': '#ffd093',
  'brand-3': '#f8b75a',
  'brand-4': '#b38c69',
  'brand-5': '#c3a080',
}

RGB Array

[142, 161, 172], [255, 208, 147], [248, 183, 90], [179, 140, 105], [195, 160, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #8EA1AC, #FFD093, #F8B75A, #B38C69, #C3A080 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: #8ea1ac; --color-2: #ffd093; --color-3: #f8b75a; --color-4: #b38c69; --color-5: #c3a080. 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