#FF8F8F + #E1A966 + #9FA880 + #699396 + #6B7987 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF8F8F

Peach Pink · LightCoral · Coral Red

HEX

#FF8F8F

RGB

rgb(255, 143, 143)

HSL

hsl(0, 100%, 78%)

HSB

hsb(0, 44%, 100%)

CMYK

cmyk(0%, 44%, 44%, 0%)

Oklch

oklch(77.0% 0.136 20.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E1A966

Ginger · SandyBrown · Warm Sun

HEX

#E1A966

RGB

rgb(225, 169, 102)

HSL

hsl(33, 67%, 64%)

HSB

hsb(33, 55%, 88%)

CMYK

cmyk(0%, 25%, 55%, 12%)

Oklch

oklch(77.3% 0.107 70.1)

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

#9FA880

Grass Green · DarkSeaGreen · Olive Green

HEX

#9FA880

RGB

rgb(159, 168, 128)

HSL

hsl(73, 19%, 58%)

HSB

hsb(73, 24%, 66%)

CMYK

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

Oklch

oklch(71.4% 0.057 118.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#699396

Slate Blue · CadetBlue · Mint Ice

HEX

#699396

RGB

rgb(105, 147, 150)

HSL

hsl(184, 18%, 50%)

HSB

hsb(184, 30%, 59%)

CMYK

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

Oklch

oklch(63.4% 0.046 201.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#6B7987

Indigo · SlateGray · Navy Blue

HEX

#6B7987

RGB

rgb(107, 121, 135)

HSL

hsl(210, 12%, 47%)

HSB

hsb(210, 21%, 53%)

CMYK

cmyk(21%, 10%, 0%, 47%)

Oklch

oklch(56.9% 0.027 248.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8F8F

8FFFFF

Analogous

FF8FC7

FF8F8F

FFC78F

Triadic

FF8F8F

8FFF8F

8F8FFF

Split-Comp.

FF8F8F

8FFFC7

8FC7FF

Tetradic

FF8F8F

C7FF8F

8FFFFF

C78FFF

Contrast Matrix WCAG 2.1 Contrast

FF8F8F	E1A966	9FA880	699396	6B7987
—	1.1 Fail	1.1 Fail	1.5 Fail	2.0 Fail
1.1 Fail	—	1.2 Fail	1.6 Fail	2.1 Fail
1.1 Fail	1.2 Fail	—	1.3 Fail	1.8 Fail
1.5 Fail	1.6 Fail	1.3 Fail	—	1.3 Fail
2.0 Fail	2.1 Fail	1.8 Fail	1.3 Fail	—

White BG

2.2Fail

2.1Fail

2.5Fail

3.4AA Large

4.5AA Large

Black BG

9.6AAA

10.1AAA

8.4AAA

6.2AA

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCD8F

C9C876

A3A38A

7B7C95

717184

Deuteranopia

D5DD8F

CCD07A

A2A28C

797695

706F83

Tritanopia

F98F8F

DE8386

9F9193

6B9595

6C8180

Achromatopsia

B0B0B0

B2B2B2

A1A1A1

878787

767676

Shades & Tints Shades & Tints

#FF8F8F

Dark

Light

#E1A966

Dark

Light

#9FA880

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8f8f;
  --color-2: #e1a966;
  --color-3: #9fa880;
  --color-4: #699396;
  --color-5: #6b7987;
}

SCSS

$color-1: #ff8f8f;
$color-2: #e1a966;
$color-3: #9fa880;
$color-4: #699396;
$color-5: #6b7987;

TAILWIND

colors: {
  'brand-1': '#ff8f8f',
  'brand-2': '#e1a966',
  'brand-3': '#9fa880',
  'brand-4': '#699396',
  'brand-5': '#6b7987',
}

RGB Array

[255, 143, 143], [225, 169, 102], [159, 168, 128], [105, 147, 150], [107, 121, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #FF8F8F, #E1A966, #9FA880, #699396, #6B7987 is ideal for: corporate websites, product showcases, portfolios. 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: #ff8f8f; --color-2: #e1a966; --color-3: #9fa880; --color-4: #699396; --color-5: #6b7987. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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