← Back to Editor

#CCCB9D · #FFB64F · #DE9559 · #BF8556 · #917666

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

#CCCB9D

Fresh Green · Tan · Sunflower

HEX
#CCCB9D
RGB
rgb(204, 203, 157)
HSL
hsl(59, 32%, 71%)
HSB
hsb(59, 23%, 80%)
CMYK
cmyk(0%, 0%, 23%, 20%)
Oklch
oklch(83.1% 0.061 106.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FFB64F

Ginger · SandyBrown · Warm Sun

HEX
#FFB64F
RGB
rgb(255, 182, 79)
HSL
hsl(35, 100%, 65%)
HSB
hsb(35, 69%, 100%)
CMYK
cmyk(0%, 29%, 69%, 0%)
Oklch
oklch(82.7% 0.144 72.5)

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

#DE9559

Apricot · SandyBrown · Warm Sun

HEX
#DE9559
RGB
rgb(222, 149, 89)
HSL
hsl(27, 67%, 61%)
HSB
hsb(27, 60%, 87%)
CMYK
cmyk(0%, 33%, 60%, 13%)
Oklch
oklch(73.1% 0.117 58.9)

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

#BF8556

Tangerine · DarkSalmon · Warm Sun

HEX
#BF8556
RGB
rgb(191, 133, 86)
HSL
hsl(27, 45%, 54%)
HSB
hsb(27, 55%, 75%)
CMYK
cmyk(0%, 30%, 55%, 25%)
Oklch
oklch(66.5% 0.095 59.2)

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

#917666

Tangerine · Gray · Amber Brown

HEX
#917666
RGB
rgb(145, 118, 102)
HSL
hsl(22, 17%, 48%)
HSB
hsb(22, 30%, 57%)
CMYK
cmyk(0%, 19%, 30%, 43%)
Oklch
oklch(58.7% 0.041 52.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCB9D
9D9ECD

Analogous

CDB49D
CCCB9D
B6CD9D

Triadic

CCCB9D
9DCDCC
CC9DCD

Split-Comp.

CCCB9D
9DB6CD
B49DCD

Tetradic

CCCB9D
9DCDB4
9D9ECD
CD9DB6

Contrast Matrix WCAG 2.1 Contrast

CCCB9D
FFB64F
DE9559
BF8556
917666
—
1.0
Fail
1.5
Fail
1.9
Fail
2.5
Fail
1.0
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
1.5
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
2.5
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
White BG
1.7Fail
1.7Fail
2.5Fail
3.1AA Large
4.2AA Large
Black BG
12.6AAA
12.1AAA
8.5AAA
6.7AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCA8
DFDF68
BEBE68
A6A561
85856A

Deuteranopia

CCCCAB
E4E96E
C3C86B
A9AE64
87896B

Tritanopia

CCB1B3
FB7C80
DA7376
BC6A6C
906D6E

Achromatopsia

C6C6C6
C0C0C0
A4A4A4
919191
7C7C7C

Shades & Tints Shades & Tints

#CCCB9D

Dark
Light

#FFB64F

Dark
Light

#DE9559

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccb9d;
  --color-2: #ffb64f;
  --color-3: #de9559;
  --color-4: #bf8556;
  --color-5: #917666;
}

SCSS

$color-1: #cccb9d;
$color-2: #ffb64f;
$color-3: #de9559;
$color-4: #bf8556;
$color-5: #917666;

TAILWIND

colors: {
  'brand-1': '#cccb9d',
  'brand-2': '#ffb64f',
  'brand-3': '#de9559',
  'brand-4': '#bf8556',
  'brand-5': '#917666',
}

RGB Array

[204, 203, 157], [255, 182, 79], [222, 149, 89], [191, 133, 86], [145, 118, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCCB9D, #FFB64F, #DE9559, #BF8556, #917666 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: #cccb9d; --color-2: #ffb64f; --color-3: #de9559; --color-4: #bf8556; --color-5: #917666. 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