← Back to Editor

#8AB6A5 · #C69260 · #E16239 · #5B6B5E · #3D4054

space

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

#8AB6A5

Jade · DarkSeaGreen · Apple Green

HEX
#8AB6A5
RGB
rgb(138, 182, 165)
HSL
hsl(157, 23%, 63%)
HSB
hsb(157, 24%, 71%)
CMYK
cmyk(24%, 0%, 9%, 29%)
Oklch
oklch(74.0% 0.053 169.1)

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

#C69260

Tangerine · DarkSalmon · Warm Sun

HEX
#C69260
RGB
rgb(198, 146, 96)
HSL
hsl(29, 47%, 58%)
HSB
hsb(29, 52%, 78%)
CMYK
cmyk(0%, 26%, 52%, 22%)
Oklch
oklch(69.9% 0.091 64.3)

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

#E16239

Tangerine · Chocolate · Warm Sun

HEX
#E16239
RGB
rgb(225, 98, 57)
HSL
hsl(15, 74%, 55%)
HSB
hsb(15, 75%, 88%)
CMYK
cmyk(0%, 56%, 75%, 12%)
Oklch
oklch(64.8% 0.168 38.1)

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

#5B6B5E

Celadon · DimGray · Charcoal

HEX
#5B6B5E
RGB
rgb(91, 107, 94)
HSL
hsl(131, 8%, 39%)
HSB
hsb(131, 15%, 42%)
CMYK
cmyk(15%, 0%, 12%, 58%)
Oklch
oklch(51.0% 0.028 150.7)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

#3D4054

Indigo · DarkSlateGray · Prussian Blue

HEX
#3D4054
RGB
rgb(61, 64, 84)
HSL
hsl(232, 16%, 28%)
HSB
hsb(232, 27%, 33%)
CMYK
cmyk(27%, 24%, 0%, 67%)
Oklch
oklch(37.7% 0.034 278.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8AB6A5
B68B9C

Analogous

8BB690
8AB6A5
8BB1B6

Triadic

8AB6A5
A68BB6
B6A68B

Split-Comp.

8AB6A5
B68BB1
B6908B

Tetradic

8AB6A5
908BB6
B68B9C
B1B68B

Contrast Matrix WCAG 2.1 Contrast

8AB6A5
C69260
E16239
5B6B5E
3D4054
—
1.2
Fail
1.6
Fail
2.5
Fail
4.5
AA
1.2
Fail
—
1.3
Fail
2.1
Fail
3.7
AA Large
1.6
Fail
1.3
Fail
—
1.6
Fail
2.9
Fail
2.5
Fail
2.1
Fail
1.6
Fail
—
1.8
Fail
4.5
AA
3.7
AA Large
2.9
Fail
1.8
Fail
—
White BG
2.3Fail
2.7Fail
3.5AA Large
5.7AA
10.2AAA
Black BG
9.3AAA
7.7AAA
6.0AA
3.7AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DA9
AFAF6C
AAA943
626261
3E3E4F

Deuteranopia

9B97AA
B3B66F
B1BB45
616062
3E3E4E

Tritanopia

8CACAD
C37678
DB4B4C
5C6464
3D4B4B

Achromatopsia

A7A7A7
9C9C9C
838383
656565
414141

Shades & Tints Shades & Tints

#8AB6A5

Dark
Light

#C69260

Dark
Light

#E16239

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ab6a5;
  --color-2: #c69260;
  --color-3: #e16239;
  --color-4: #5b6b5e;
  --color-5: #3d4054;
}

SCSS

$color-1: #8ab6a5;
$color-2: #c69260;
$color-3: #e16239;
$color-4: #5b6b5e;
$color-5: #3d4054;

TAILWIND

colors: {
  'brand-1': '#8ab6a5',
  'brand-2': '#c69260',
  'brand-3': '#e16239',
  'brand-4': '#5b6b5e',
  'brand-5': '#3d4054',
}

RGB Array

[138, 182, 165], [198, 146, 96], [225, 98, 57], [91, 107, 94], [61, 64, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #8AB6A5, #C69260, #E16239, #5B6B5E, #3D4054 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: #8ab6a5; --color-2: #c69260; --color-3: #e16239; --color-4: #5b6b5e; --color-5: #3d4054. 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 space-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