← Back to Editor

#E1A966 · #BFA083 · #9B9B9A · #7F8DA5 · #627DA5

earth

A 5-color earth palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#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

#BFA083

Apricot · Tan · Warm Sun

HEX
#BFA083
RGB
rgb(191, 160, 131)
HSL
hsl(29, 32%, 63%)
HSB
hsb(29, 31%, 75%)
CMYK
cmyk(0%, 16%, 31%, 25%)
Oklch
oklch(72.6% 0.054 64.9)

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

#9B9B9A

Ash · DarkGray · Silver Sand

HEX
#9B9B9A
RGB
rgb(155, 155, 154)
HSL
hsl(60, 0%, 61%)
HSB
hsb(60, 1%, 61%)
CMYK
cmyk(0%, 0%, 1%, 39%)
Oklch
oklch(68.9% 0.001 106.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#7F8DA5

Azure · LightSlateGray · Navy Blue

HEX
#7F8DA5
RGB
rgb(127, 141, 165)
HSL
hsl(218, 17%, 57%)
HSB
hsb(218, 23%, 65%)
CMYK
cmyk(23%, 15%, 0%, 35%)
Oklch
oklch(64.1% 0.040 261.2)

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

#627DA5

Azure · SlateGray · Navy Blue

HEX
#627DA5
RGB
rgb(98, 125, 165)
HSL
hsl(216, 27%, 52%)
HSB
hsb(216, 41%, 65%)
CMYK
cmyk(41%, 24%, 0%, 35%)
Oklch
oklch(58.5% 0.069 258.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1A966
669DE1

Analogous

E16C66
E1A966
DBE166

Triadic

E1A966
66E1A9
A966E1

Split-Comp.

E1A966
66DBE1
6C66E1

Tetradic

E1A966
66E16C
669DE1
E166DB

Contrast Matrix WCAG 2.1 Contrast

E1A966
BFA083
9B9B9A
7F8DA5
627DA5
—
1.2
Fail
1.3
Fail
1.6
Fail
2.0
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
1.7
Fail
1.5
Fail
1.3
Fail
—
White BG
2.1Fail
2.5Fail
2.8Fail
3.4AA Large
4.2AA Large
Black BG
10.1AAA
8.6AAA
7.5AAA
6.3AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C876
B2B18A
9B9B9A
85859F
6E6E9B

Deuteranopia

CCD07A
B3B68C
9B9B9A
84839E
6C6A99

Tritanopia

DE8386
BD9091
9B9A9A
809B9A
639492

Achromatopsia

B2B2B2
A6A6A6
9B9B9B
8C8C8C
797979

Shades & Tints Shades & Tints

#E1A966

Dark
Light

#BFA083

Dark
Light

#9B9B9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1a966;
  --color-2: #bfa083;
  --color-3: #9b9b9a;
  --color-4: #7f8da5;
  --color-5: #627da5;
}

SCSS

$color-1: #e1a966;
$color-2: #bfa083;
$color-3: #9b9b9a;
$color-4: #7f8da5;
$color-5: #627da5;

TAILWIND

colors: {
  'brand-1': '#e1a966',
  'brand-2': '#bfa083',
  'brand-3': '#9b9b9a',
  'brand-4': '#7f8da5',
  'brand-5': '#627da5',
}

RGB Array

[225, 169, 102], [191, 160, 131], [155, 155, 154], [127, 141, 165], [98, 125, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #E1A966, #BFA083, #9B9B9A, #7F8DA5, #627DA5 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e1a966; --color-2: #bfa083; --color-3: #9b9b9a; --color-4: #7f8da5; --color-5: #627da5. 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. Restrained colors convey professionalism and trust. 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