← Back to Editor

#68749C · #8689AA · #927F78 · #BA895E · #E3AF7F

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

#68749C

Azure · SlateGray · Navy Blue

HEX
#68749C
RGB
rgb(104, 116, 156)
HSL
hsl(226, 21%, 51%)
HSB
hsb(226, 33%, 61%)
CMYK
cmyk(33%, 26%, 0%, 39%)
Oklch
oklch(56.5% 0.064 271.3)

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

#8689AA

Azure · LightSlateGray · Navy Blue

HEX
#8689AA
RGB
rgb(134, 137, 170)
HSL
hsl(235, 17%, 60%)
HSB
hsb(235, 21%, 67%)
CMYK
cmyk(21%, 19%, 0%, 33%)
Oklch
oklch(63.9% 0.049 280.8)

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

#927F78

Tangerine · Gray · Warm Sun

HEX
#927F78
RGB
rgb(146, 127, 120)
HSL
hsl(16, 11%, 52%)
HSB
hsb(16, 18%, 57%)
CMYK
cmyk(0%, 13%, 18%, 43%)
Oklch
oklch(61.2% 0.026 41.3)

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

#BA895E

Tangerine · DarkSalmon · Warm Sun

HEX
#BA895E
RGB
rgb(186, 137, 94)
HSL
hsl(28, 40%, 55%)
HSB
hsb(28, 49%, 73%)
CMYK
cmyk(0%, 26%, 49%, 27%)
Oklch
oklch(66.8% 0.084 61.9)

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

#E3AF7F

Apricot · BurlyWood · Warm Sun

HEX
#E3AF7F
RGB
rgb(227, 175, 127)
HSL
hsl(29, 64%, 69%)
HSB
hsb(29, 44%, 89%)
CMYK
cmyk(0%, 23%, 44%, 11%)
Oklch
oklch(79.1% 0.088 63.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

68749C
9C9068

Analogous

688E9C
68749C
76689C

Triadic

68749C
9C6874
749C68

Split-Comp.

68749C
9C7668
8E9C68

Tetradic

68749C
9C688E
9C9068
689C76

Contrast Matrix WCAG 2.1 Contrast

68749C
8689AA
927F78
BA895E
E3AF7F
—
1.4
Fail
1.2
Fail
1.5
Fail
2.3
Fail
1.4
Fail
—
1.1
Fail
1.1
Fail
1.7
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.9
Fail
1.5
Fail
1.1
Fail
1.2
Fail
—
1.6
Fail
2.3
Fail
1.7
Fail
1.9
Fail
1.6
Fail
—
White BG
4.6AA
3.4AA Large
3.8AA Large
3.1AA Large
2.0Fail
Black BG
4.6AA
6.2AA
5.5AA
6.8AA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D92
8787A2
8A8A7A
A5A468
CCCC8B

Deuteranopia

6D6C90
8787A0
8B8C7A
A8AB6B
D0D38D

Tritanopia

698B89
869C9A
917B7B
B87172
E09496

Achromatopsia

757575
8C8C8C
848484
939393
B9B9B9

Shades & Tints Shades & Tints

#68749C

Dark
Light

#8689AA

Dark
Light

#927F78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #68749c;
  --color-2: #8689aa;
  --color-3: #927f78;
  --color-4: #ba895e;
  --color-5: #e3af7f;
}

SCSS

$color-1: #68749c;
$color-2: #8689aa;
$color-3: #927f78;
$color-4: #ba895e;
$color-5: #e3af7f;

TAILWIND

colors: {
  'brand-1': '#68749c',
  'brand-2': '#8689aa',
  'brand-3': '#927f78',
  'brand-4': '#ba895e',
  'brand-5': '#e3af7f',
}

RGB Array

[104, 116, 156], [134, 137, 170], [146, 127, 120], [186, 137, 94], [227, 175, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #68749C, #8689AA, #927F78, #BA895E, #E3AF7F 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: #68749c; --color-2: #8689aa; --color-3: #927f78; --color-4: #ba895e; --color-5: #e3af7f. 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