← Back to Editor

#9CBD82 · #D1C799 · #D1BB58 · #DE933F · #FF6529

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

#9CBD82

Celadon · DarkSeaGreen · Apple Green

HEX
#9CBD82
RGB
rgb(156, 189, 130)
HSL
hsl(94, 31%, 63%)
HSB
hsb(94, 31%, 74%)
CMYK
cmyk(17%, 0%, 31%, 26%)
Oklch
oklch(75.9% 0.089 132.0)

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

#D1C799

Goose Yellow · Tan · Sunflower

HEX
#D1C799
RGB
rgb(209, 199, 153)
HSL
hsl(49, 38%, 71%)
HSB
hsb(49, 27%, 82%)
CMYK
cmyk(0%, 5%, 27%, 18%)
Oklch
oklch(82.6% 0.062 97.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D1BB58

Ginger · SandyBrown · Sunflower

HEX
#D1BB58
RGB
rgb(209, 187, 88)
HSL
hsl(49, 57%, 58%)
HSB
hsb(49, 58%, 82%)
CMYK
cmyk(0%, 11%, 58%, 18%)
Oklch
oklch(79.1% 0.122 96.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DE933F

Ginger · GoldenRod · Warm Sun

HEX
#DE933F
RGB
rgb(222, 147, 63)
HSL
hsl(32, 71%, 56%)
HSB
hsb(32, 72%, 87%)
CMYK
cmyk(0%, 34%, 72%, 13%)
Oklch
oklch(72.4% 0.133 65.6)

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

#FF6529

Tangerine · Tomato · Warm Sun

HEX
#FF6529
RGB
rgb(255, 101, 41)
HSL
hsl(17, 100%, 58%)
HSB
hsb(17, 84%, 100%)
CMYK
cmyk(0%, 60%, 84%, 0%)
Oklch
oklch(69.6% 0.200 39.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CBD82
A583BE

Analogous

BABE83
9CBD82
83BE87

Triadic

9CBD82
839DBE
BE839D

Split-Comp.

9CBD82
8783BE
BE83BA

Tetradic

9CBD82
83BABE
A583BE
BE8783

Contrast Matrix WCAG 2.1 Contrast

9CBD82
D1C799
D1BB58
DE933F
FF6529
—
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.7
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
1.5
Fail
1.2
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
White BG
2.1Fail
1.7Fail
1.9Fail
2.5Fail
2.9Fail
Black BG
10.0AAA
12.3AAA
11.0AAA
8.4AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAB90
CDCDA4
C7C770
BEBD53
BCBB38

Deuteranopia

A8A694
CDCEA7
C9CA76
C2C758
C5D13B

Tritanopia

9E9C9E
D0ADAF
D08387
DA6367
F74346

Achromatopsia

ACACAC
C5C5C5
B6B6B6
A0A0A0
8C8C8C

Shades & Tints Shades & Tints

#9CBD82

Dark
Light

#D1C799

Dark
Light

#D1BB58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cbd82;
  --color-2: #d1c799;
  --color-3: #d1bb58;
  --color-4: #de933f;
  --color-5: #ff6529;
}

SCSS

$color-1: #9cbd82;
$color-2: #d1c799;
$color-3: #d1bb58;
$color-4: #de933f;
$color-5: #ff6529;

TAILWIND

colors: {
  'brand-1': '#9cbd82',
  'brand-2': '#d1c799',
  'brand-3': '#d1bb58',
  'brand-4': '#de933f',
  'brand-5': '#ff6529',
}

RGB Array

[156, 189, 130], [209, 199, 153], [209, 187, 88], [222, 147, 63], [255, 101, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CBD82, #D1C799, #D1BB58, #DE933F, #FF6529 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: #9cbd82; --color-2: #d1c799; --color-3: #d1bb58; --color-4: #de933f; --color-5: #ff6529. 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