← Back to Editor

#C5AE3E · #FFB87F · #B9B075 · #9EA883 · #ADC8A9

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

#C5AE3E

Autumn Sage · GoldenRod · Sunflower

HEX
#C5AE3E
RGB
rgb(197, 174, 62)
HSL
hsl(50, 54%, 51%)
HSB
hsb(50, 69%, 77%)
CMYK
cmyk(0%, 12%, 69%, 23%)
Oklch
oklch(75.0% 0.131 97.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FFB87F

Apricot · LightSalmon · Warm Sun

HEX
#FFB87F
RGB
rgb(255, 184, 127)
HSL
hsl(27, 100%, 75%)
HSB
hsb(27, 50%, 100%)
CMYK
cmyk(0%, 28%, 50%, 0%)
Oklch
oklch(83.7% 0.110 59.3)

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

#B9B075

Autumn Sage · Tan · Sunflower

HEX
#B9B075
RGB
rgb(185, 176, 117)
HSL
hsl(52, 33%, 59%)
HSB
hsb(52, 37%, 73%)
CMYK
cmyk(0%, 5%, 37%, 27%)
Oklch
oklch(75.1% 0.079 100.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9EA883

Grass Green · DarkSeaGreen · Olive Green

HEX
#9EA883
RGB
rgb(158, 168, 131)
HSL
hsl(76, 18%, 59%)
HSB
hsb(76, 22%, 66%)
CMYK
cmyk(6%, 0%, 22%, 34%)
Oklch
oklch(71.4% 0.053 120.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#ADC8A9

Celadon · Silver · Apple Green

HEX
#ADC8A9
RGB
rgb(173, 200, 169)
HSL
hsl(112, 22%, 72%)
HSB
hsb(112, 16%, 78%)
CMYK
cmyk(13%, 0%, 16%, 22%)
Oklch
oklch(80.4% 0.052 141.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5AE3E
3F55C6

Analogous

C66C3F
C5AE3E
99C63F

Triadic

C5AE3E
3FC6AF
AF3FC6

Split-Comp.

C5AE3E
3F99C6
6C3FC6

Tetradic

C5AE3E
3FC66C
3F55C6
C63F99

Contrast Matrix WCAG 2.1 Contrast

C5AE3E
FFB87F
B9B075
9EA883
ADC8A9
—
1.3
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.1
Fail
1.0
Fail
1.3
Fail
—
1.1
Fail
1.2
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
1.4
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
—
White BG
2.2Fail
1.7Fail
2.2Fail
2.5Fail
1.8Fail
Black BG
9.5AAA
12.4AAA
9.5AAA
8.4AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBB59
E0E08D
B5B583
A2A28C
B9B9B1

Deuteranopia

BCBE60
E4EA90
B6B687
A2A18E
B7B5B2

Tritanopia

C46E73
FB989A
B98F91
9F9395
AEB6B8

Achromatopsia

A8A8A8
C7C7C7
ACACAC
A1A1A1
BCBCBC

Shades & Tints Shades & Tints

#C5AE3E

Dark
Light

#FFB87F

Dark
Light

#B9B075

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5ae3e;
  --color-2: #ffb87f;
  --color-3: #b9b075;
  --color-4: #9ea883;
  --color-5: #adc8a9;
}

SCSS

$color-1: #c5ae3e;
$color-2: #ffb87f;
$color-3: #b9b075;
$color-4: #9ea883;
$color-5: #adc8a9;

TAILWIND

colors: {
  'brand-1': '#c5ae3e',
  'brand-2': '#ffb87f',
  'brand-3': '#b9b075',
  'brand-4': '#9ea883',
  'brand-5': '#adc8a9',
}

RGB Array

[197, 174, 62], [255, 184, 127], [185, 176, 117], [158, 168, 131], [173, 200, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5AE3E, #FFB87F, #B9B075, #9EA883, #ADC8A9 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: #c5ae3e; --color-2: #ffb87f; --color-3: #b9b075; --color-4: #9ea883; --color-5: #adc8a9. 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