← Back to Editor

#B2B781 · #D5C788 · #E5B27D · #FB8851 · #3C3429

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

#B2B781

Fresh Green · Tan · Sunflower

HEX
#B2B781
RGB
rgb(178, 183, 129)
HSL
hsl(66, 27%, 61%)
HSB
hsb(66, 30%, 72%)
CMYK
cmyk(3%, 0%, 30%, 28%)
Oklch
oklch(76.2% 0.073 112.4)

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

#D5C788

Ginger · BurlyWood · Sunflower

HEX
#D5C788
RGB
rgb(213, 199, 136)
HSL
hsl(49, 48%, 68%)
HSB
hsb(49, 36%, 84%)
CMYK
cmyk(0%, 7%, 36%, 16%)
Oklch
oklch(82.7% 0.083 97.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E5B27D

Ginger · BurlyWood · Warm Sun

HEX
#E5B27D
RGB
rgb(229, 178, 125)
HSL
hsl(31, 67%, 69%)
HSB
hsb(31, 45%, 90%)
CMYK
cmyk(0%, 22%, 45%, 10%)
Oklch
oklch(79.8% 0.091 67.0)

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

#FB8851

Apricot · Coral · Warm Sun

HEX
#FB8851
RGB
rgb(251, 136, 81)
HSL
hsl(19, 96%, 65%)
HSB
hsb(19, 68%, 98%)
CMYK
cmyk(0%, 46%, 68%, 2%)
Oklch
oklch(74.4% 0.156 45.0)

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

#3C3429

Ochre · DarkSlateGray · Cinnamon

HEX
#3C3429
RGB
rgb(60, 52, 41)
HSL
hsl(35, 19%, 20%)
HSB
hsb(35, 32%, 24%)
CMYK
cmyk(0%, 13%, 32%, 76%)
Oklch
oklch(33.0% 0.022 75.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2B781
8681B6

Analogous

B6A181
B2B781
96B681

Triadic

B2B781
81B1B6
B681B1

Split-Comp.

B2B781
8196B6
A181B6

Tetradic

B2B781
81B6A1
8681B6
B68196

Contrast Matrix WCAG 2.1 Contrast

B2B781
D5C788
E5B27D
FB8851
3C3429
—
1.2
Fail
1.1
Fail
1.1
Fail
5.8
AA
1.2
Fail
—
1.1
Fail
1.4
Fail
7.2
AAA
1.1
Fail
1.1
Fail
—
1.3
Fail
6.4
AA
1.1
Fail
1.4
Fail
1.3
Fail
—
5.1
AA
5.8
AA
7.2
AAA
6.4
AA
5.1
AA
—
White BG
2.1Fail
1.7Fail
1.9Fail
2.4Fail
12.2AAA
Black BG
10.0AAA
12.4AAA
11.0AAA
8.7AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B48E
CFCF97
CFCE8A
C9C85E
39382C

Deuteranopia

B4B491
D0D19B
D2D68D
D0D962
393A2C

Tritanopia

B2989B
D4A3A6
E29496
F5696B
3C2E2E

Achromatopsia

AFAFAF
C4C4C4
BBBBBB
A4A4A4
353535

Shades & Tints Shades & Tints

#B2B781

Dark
Light

#D5C788

Dark
Light

#E5B27D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2b781;
  --color-2: #d5c788;
  --color-3: #e5b27d;
  --color-4: #fb8851;
  --color-5: #3c3429;
}

SCSS

$color-1: #b2b781;
$color-2: #d5c788;
$color-3: #e5b27d;
$color-4: #fb8851;
$color-5: #3c3429;

TAILWIND

colors: {
  'brand-1': '#b2b781',
  'brand-2': '#d5c788',
  'brand-3': '#e5b27d',
  'brand-4': '#fb8851',
  'brand-5': '#3c3429',
}

RGB Array

[178, 183, 129], [213, 199, 136], [229, 178, 125], [251, 136, 81], [60, 52, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2B781, #D5C788, #E5B27D, #FB8851, #3C3429 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: #b2b781; --color-2: #d5c788; --color-3: #e5b27d; --color-4: #fb8851; --color-5: #3c3429. 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