← Back to Editor

#FBECC5 · #CCBB4F · #BC3823 · #753536 · #312411

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 LibraryData Visualization

Color Details Color Details

#FBECC5

Goose Yellow · Bisque · Lemon Cream

HEX
#FBECC5
RGB
rgb(251, 236, 197)
HSL
hsl(43, 87%, 88%)
HSB
hsb(43, 22%, 98%)
CMYK
cmyk(0%, 6%, 22%, 2%)
Oklch
oklch(94.5% 0.053 89.5)

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

#CCBB4F

Autumn Sage · SandyBrown · Sunflower

HEX
#CCBB4F
RGB
rgb(204, 187, 79)
HSL
hsl(52, 55%, 55%)
HSB
hsb(52, 61%, 80%)
CMYK
cmyk(0%, 8%, 61%, 20%)
Oklch
oklch(78.6% 0.129 100.4)

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

#BC3823

Vermilion · FireBrick · Passion Red

HEX
#BC3823
RGB
rgb(188, 56, 35)
HSL
hsl(8, 69%, 44%)
HSB
hsb(8, 81%, 74%)
CMYK
cmyk(0%, 70%, 81%, 26%)
Oklch
oklch(53.5% 0.172 31.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#753536

Crimson · Brown · Wine Red

HEX
#753536
RGB
rgb(117, 53, 54)
HSL
hsl(359, 38%, 33%)
HSB
hsb(359, 55%, 46%)
CMYK
cmyk(0%, 55%, 54%, 54%)
Oklch
oklch(41.5% 0.090 20.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#312411

Ochre · Black · Cinnamon

HEX
#312411
RGB
rgb(49, 36, 17)
HSL
hsl(36, 48%, 13%)
HSB
hsb(36, 65%, 19%)
CMYK
cmyk(0%, 27%, 65%, 81%)
Oklch
oklch(27.1% 0.037 75.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBECC5
C6D5FB

Analogous

FBD1C6
FBECC5
EFFBC6

Triadic

FBECC5
C6FBEC
ECC6FB

Split-Comp.

FBECC5
C6EFFB
D1C6FB

Tetradic

FBECC5
C6FBD1
C6D5FB
FBC6EF

Contrast Matrix WCAG 2.1 Contrast

FBECC5
CCBB4F
BC3823
753536
312411
—
1.7
Fail
4.8
AA
7.7
AAA
12.9
AAA
1.7
Fail
—
2.9
Fail
4.7
AA
7.8
AAA
4.8
AA
2.9
Fail
—
1.6
Fail
2.7
Fail
7.7
AAA
4.7
AA
1.6
Fail
—
1.7
Fail
12.9
AAA
7.8
AAA
2.7
Fail
1.7
Fail
—
White BG
1.2Fail
1.9Fail
5.6AA
9.1AAA
15.1AAA
Black BG
17.9AAA
10.8AAA
3.7AA Large
2.3Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F4CE
C5C469
838228
595936
2B2B16

Deuteranopia

F5F7D1
C6C76F
8B9429
5D6236
2C2D17

Tritanopia

FAD6D8
CB7E82
B52C2D
723636
30191A

Achromatopsia

ECECEC
B4B4B4
5D5D5D
484848
262626

Shades & Tints Shades & Tints

#FBECC5

Dark
Light

#CCBB4F

Dark
Light

#BC3823

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbecc5;
  --color-2: #ccbb4f;
  --color-3: #bc3823;
  --color-4: #753536;
  --color-5: #312411;
}

SCSS

$color-1: #fbecc5;
$color-2: #ccbb4f;
$color-3: #bc3823;
$color-4: #753536;
$color-5: #312411;

TAILWIND

colors: {
  'brand-1': '#fbecc5',
  'brand-2': '#ccbb4f',
  'brand-3': '#bc3823',
  'brand-4': '#753536',
  'brand-5': '#312411',
}

RGB Array

[251, 236, 197], [204, 187, 79], [188, 56, 35], [117, 53, 54], [49, 36, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBECC5, #CCBB4F, #BC3823, #753536, #312411 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #fbecc5; --color-2: #ccbb4f; --color-3: #bc3823; --color-4: #753536; --color-5: #312411. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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