← Back to Editor

#8AA586 · #B7957A · #CF8465 · #DE7C3D · #B35C62

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8AA586

Celadon · DarkSeaGreen · Olive Green

HEX
#8AA586
RGB
rgb(138, 165, 134)
HSL
hsl(112, 15%, 59%)
HSB
hsb(112, 19%, 65%)
CMYK
cmyk(16%, 0%, 19%, 35%)
Oklch
oklch(69.3% 0.054 141.5)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#B7957A

Tangerine · Tan · Warm Sun

HEX
#B7957A
RGB
rgb(183, 149, 122)
HSL
hsl(27, 30%, 60%)
HSB
hsb(27, 33%, 72%)
CMYK
cmyk(0%, 19%, 33%, 28%)
Oklch
oklch(69.4% 0.056 60.1)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#CF8465

Tangerine · DarkSalmon · Warm Sun

HEX
#CF8465
RGB
rgb(207, 132, 101)
HSL
hsl(18, 52%, 60%)
HSB
hsb(18, 51%, 81%)
CMYK
cmyk(0%, 36%, 51%, 19%)
Oklch
oklch(68.4% 0.103 43.1)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#DE7C3D

Tangerine · Coral · Warm Sun

HEX
#DE7C3D
RGB
rgb(222, 124, 61)
HSL
hsl(23, 71%, 55%)
HSB
hsb(23, 73%, 87%)
CMYK
cmyk(0%, 44%, 73%, 13%)
Oklch
oklch(68.4% 0.144 50.8)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#B35C62

Crimson · Sienna · Passion Red

HEX
#B35C62
RGB
rgb(179, 92, 98)
HSL
hsl(356, 36%, 53%)
HSB
hsb(356, 49%, 70%)
CMYK
cmyk(0%, 49%, 45%, 30%)
Oklch
oklch(58.0% 0.113 16.9)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8AA586
A287A6

Analogous

9BA687
8AA586
87A692

Triadic

8AA586
878BA6
A6878B

Split-Comp.

8AA586
9287A6
A6879B

Tetradic

8AA586
879BA6
A287A6
A69287

Contrast Matrix WCAG 2.1 Contrast

8AA586
B7957A
CF8465
DE7C3D
B35C62
1.0
Fail
1.1
Fail
1.1
Fail
1.7
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.6
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.5
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.5
Fail
1.7
Fail
1.6
Fail
1.5
Fail
1.5
Fail
White BG
2.7Fail
2.8Fail
2.9Fail
3.0Fail
4.5AA
Black BG
7.8AAA
7.6AAA
7.1AAA
7.1AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

96968E
A8A881
AFAE6D
B4B34C
8D8D61

Deuteranopia

94928F
AAAD82
B3B86E
B9C150
929960

Tritanopia

8B9395
B58687
CB7274
D9585B
AF5F5F

Achromatopsia

999999
9C9C9C
979797
929292
777777

Shades & Tints Shades & Tints

#8AA586

Dark
Light

#B7957A

Dark
Light

#CF8465

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8aa586;
  --color-2: #b7957a;
  --color-3: #cf8465;
  --color-4: #de7c3d;
  --color-5: #b35c62;
}

SCSS

$color-1: #8aa586;
$color-2: #b7957a;
$color-3: #cf8465;
$color-4: #de7c3d;
$color-5: #b35c62;

TAILWIND

colors: {
  'brand-1': '#8aa586',
  'brand-2': '#b7957a',
  'brand-3': '#cf8465',
  'brand-4': '#de7c3d',
  'brand-5': '#b35c62',
}

RGB Array

[138, 165, 134], [183, 149, 122], [207, 132, 101], [222, 124, 61], [179, 92, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #8AA586, #B7957A, #CF8465, #DE7C3D, #B35C62 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: #8aa586; --color-2: #b7957a; --color-3: #cf8465; --color-4: #de7c3d; --color-5: #b35c62. 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 spring-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