← Back to Editor

#90BBAA · #8EC3AF · #C6923C · #B2A847 · #685952

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

#90BBAA

Jade · DarkSeaGreen · Apple Green

HEX
#90BBAA
RGB
rgb(144, 187, 170)
HSL
hsl(156, 24%, 65%)
HSB
hsb(156, 23%, 73%)
CMYK
cmyk(23%, 0%, 9%, 27%)
Oklch
oklch(75.6% 0.052 168.7)

TraditionalJade」· PaintApple Green」· Creative Arctic Pool

#8EC3AF

Jade · DarkSeaGreen · Apple Green

HEX
#8EC3AF
RGB
rgb(142, 195, 175)
HSL
hsl(157, 31%, 66%)
HSB
hsb(157, 27%, 76%)
CMYK
cmyk(27%, 0%, 10%, 24%)
Oklch
oklch(77.4% 0.062 169.3)

TraditionalJade」· PaintApple Green」· Creative Arctic Pool

#C6923C

Ginger · GoldenRod · Warm Sun

HEX
#C6923C
RGB
rgb(198, 146, 60)
HSL
hsl(37, 55%, 51%)
HSB
hsb(37, 70%, 78%)
CMYK
cmyk(0%, 26%, 70%, 22%)
Oklch
oklch(69.4% 0.119 76.9)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#B2A847

Autumn Sage · GoldenRod · Honey Gold

HEX
#B2A847
RGB
rgb(178, 168, 71)
HSL
hsl(54, 43%, 49%)
HSB
hsb(54, 60%, 70%)
CMYK
cmyk(0%, 6%, 60%, 30%)
Oklch
oklch(72.1% 0.119 103.4)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#685952

Tangerine · DimGray · Amber Brown

HEX
#685952
RGB
rgb(104, 89, 82)
HSL
hsl(19, 12%, 36%)
HSB
hsb(19, 21%, 41%)
CMYK
cmyk(0%, 14%, 21%, 59%)
Oklch
oklch(47.7% 0.023 46.5)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

90BBAA
BB90A1

Analogous

90BB95
90BBAA
90B7BB

Triadic

90BBAA
AA90BB
BBAA90

Split-Comp.

90BBAA
BB90B7
BB9590

Tetradic

90BBAA
9590BB
BB90A1
B7BB90

Contrast Matrix WCAG 2.1 Contrast

90BBAA
8EC3AF
C6923C
B2A847
685952
1.1
Fail
1.3
Fail
1.2
Fail
3.1
AA Large
1.1
Fail
1.4
Fail
1.2
Fail
3.4
AA Large
1.3
Fail
1.4
Fail
1.1
Fail
2.4
Fail
1.2
Fail
1.2
Fail
1.1
Fail
2.7
Fail
3.1
AA Large
3.4
AA Large
2.4
Fail
2.7
Fail
White BG
2.1Fail
2.0Fail
2.8Fail
2.4Fail
6.7AA
Black BG
9.9AAA
10.6AAA
7.6AAA
8.6AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3AE
A5A5B4
AFAF51
AEAE5E
626154

Deuteranopia

A09DAF
A29EB5
B3B656
AEAF64
626454

Tritanopia

92B1B2
91B8B9
C36165
B27175
675555

Achromatopsia

ACACAC
B1B1B1
989898
A0A0A0
5D5D5D

Shades & Tints Shades & Tints

#90BBAA

Dark
Light

#8EC3AF

Dark
Light

#C6923C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #90bbaa;
  --color-2: #8ec3af;
  --color-3: #c6923c;
  --color-4: #b2a847;
  --color-5: #685952;
}

SCSS

$color-1: #90bbaa;
$color-2: #8ec3af;
$color-3: #c6923c;
$color-4: #b2a847;
$color-5: #685952;

TAILWIND

colors: {
  'brand-1': '#90bbaa',
  'brand-2': '#8ec3af',
  'brand-3': '#c6923c',
  'brand-4': '#b2a847',
  'brand-5': '#685952',
}

RGB Array

[144, 187, 170], [142, 195, 175], [198, 146, 60], [178, 168, 71], [104, 89, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #90BBAA, #8EC3AF, #C6923C, #B2A847, #685952 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: #90bbaa; --color-2: #8ec3af; --color-3: #c6923c; --color-4: #b2a847; --color-5: #685952. 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