← Back to Editor

#8EAEA3 · #F1A373 · #C99474 · #A37D7A · #6C4E5A

A 5-color palette 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

#8EAEA3

Jade · DarkSeaGreen · Apple Green

HEX
#8EAEA3
RGB
rgb(142, 174, 163)
HSL
hsl(159, 16%, 62%)
HSB
hsb(159, 18%, 68%)
CMYK
cmyk(18%, 0%, 6%, 32%)
Oklch
oklch(72.4% 0.038 172.3)

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

#F1A373

Apricot · LightSalmon · Warm Sun

HEX
#F1A373
RGB
rgb(241, 163, 115)
HSL
hsl(23, 82%, 70%)
HSB
hsb(23, 52%, 95%)
CMYK
cmyk(0%, 32%, 52%, 5%)
Oklch
oklch(78.2% 0.112 52.0)

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

#C99474

Apricot · DarkSalmon · Warm Sun

HEX
#C99474
RGB
rgb(201, 148, 116)
HSL
hsl(23, 44%, 62%)
HSB
hsb(23, 42%, 79%)
CMYK
cmyk(0%, 26%, 42%, 21%)
Oklch
oklch(71.0% 0.078 52.2)

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

#A37D7A

Crimson · Gray · Passion Red

HEX
#A37D7A
RGB
rgb(163, 125, 122)
HSL
hsl(4, 18%, 56%)
HSB
hsb(4, 25%, 64%)
CMYK
cmyk(0%, 23%, 25%, 36%)
Oklch
oklch(62.6% 0.048 23.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#6C4E5A

Dark Violet · DimGray · Camellia

HEX
#6C4E5A
RGB
rgb(108, 78, 90)
HSL
hsl(336, 16%, 36%)
HSB
hsb(336, 28%, 42%)
CMYK
cmyk(0%, 28%, 17%, 58%)
Oklch
oklch(46.0% 0.044 353.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EAEA3
AE8F99

Analogous

8FAE93
8EAEA3
8FA9AE

Triadic

8EAEA3
A38FAE
AEA38F

Split-Comp.

8EAEA3
AE8FA9
AE938F

Tetradic

8EAEA3
938FAE
AE8F99
A9AE8F

Contrast Matrix WCAG 2.1 Contrast

8EAEA3
F1A373
C99474
A37D7A
6C4E5A
—
1.2
Fail
1.1
Fail
1.5
Fail
3.0
AA Large
1.2
Fail
—
1.3
Fail
1.8
Fail
3.6
AA Large
1.1
Fail
1.3
Fail
—
1.4
Fail
2.8
Fail
1.5
Fail
1.8
Fail
1.4
Fail
—
2.0
Fail
3.0
AA Large
3.6
AA Large
2.8
Fail
2.0
Fail
—
White BG
2.4Fail
2.1Fail
2.6Fail
3.6AA Large
7.3AAA
Black BG
8.7AAA
10.2AAA
8.0AAA
5.8AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CA6
CFCF7F
B2B27C
93927B
5F5F57

Deuteranopia

9A98A6
D4DA81
B5B97E
95987B
616356

Tritanopia

90A8A8
ED888A
C68283
A17B7B
6B5554

Achromatopsia

A3A3A3
B5B5B5
A0A0A0
888888
585858

Shades & Tints Shades & Tints

#8EAEA3

Dark
Light

#F1A373

Dark
Light

#C99474

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8eaea3;
  --color-2: #f1a373;
  --color-3: #c99474;
  --color-4: #a37d7a;
  --color-5: #6c4e5a;
}

SCSS

$color-1: #8eaea3;
$color-2: #f1a373;
$color-3: #c99474;
$color-4: #a37d7a;
$color-5: #6c4e5a;

TAILWIND

colors: {
  'brand-1': '#8eaea3',
  'brand-2': '#f1a373',
  'brand-3': '#c99474',
  'brand-4': '#a37d7a',
  'brand-5': '#6c4e5a',
}

RGB Array

[142, 174, 163], [241, 163, 115], [201, 148, 116], [163, 125, 122], [108, 78, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EAEA3, #F1A373, #C99474, #A37D7A, #6C4E5A 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: #8eaea3; --color-2: #f1a373; --color-3: #c99474; --color-4: #a37d7a; --color-5: #6c4e5a. 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 general-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