← Back to Editor

#322B21 · #B6AC93 · #F2E4C9 · #F4D376 · #F2B76B

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

#322B21

Ochre · DarkSlateGray · Cinnamon

HEX
#322B21
RGB
rgb(50, 43, 33)
HSL
hsl(35, 20%, 16%)
HSB
hsb(35, 34%, 20%)
CMYK
cmyk(0%, 14%, 34%, 80%)
Oklch
oklch(29.4% 0.020 76.6)

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

#B6AC93

Ginger · DarkGray · Sunflower

HEX
#B6AC93
RGB
rgb(182, 172, 147)
HSL
hsl(43, 19%, 65%)
HSB
hsb(43, 19%, 71%)
CMYK
cmyk(0%, 5%, 19%, 29%)
Oklch
oklch(74.6% 0.037 88.8)

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

#F2E4C9

Goose Yellow · Bisque · Lemon Cream

HEX
#F2E4C9
RGB
rgb(242, 228, 201)
HSL
hsl(40, 61%, 87%)
HSB
hsb(40, 17%, 95%)
CMYK
cmyk(0%, 6%, 17%, 5%)
Oklch
oklch(92.3% 0.039 83.8)

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

#F4D376

Goose Yellow · Khaki · Sunflower

HEX
#F4D376
RGB
rgb(244, 211, 118)
HSL
hsl(44, 85%, 71%)
HSB
hsb(44, 52%, 96%)
CMYK
cmyk(0%, 14%, 52%, 4%)
Oklch
oklch(87.6% 0.119 90.3)

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

#F2B76B

Ginger · SandyBrown · Warm Sun

HEX
#F2B76B
RGB
rgb(242, 183, 107)
HSL
hsl(34, 84%, 68%)
HSB
hsb(34, 56%, 95%)
CMYK
cmyk(0%, 24%, 56%, 5%)
Oklch
oklch(81.8% 0.116 72.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322B21
212731

Analogous

312221
322B21
303121

Triadic

322B21
21312A
2A2131

Split-Comp.

322B21
213031
222131

Tetradic

322B21
213122
212731
312130

Contrast Matrix WCAG 2.1 Contrast

322B21
B6AC93
F2E4C9
F4D376
F2B76B
—
6.2
AA
11.1
AAA
9.6
AAA
7.8
AAA
6.2
AA
—
1.8
Fail
1.5
Fail
1.3
Fail
11.1
AAA
1.8
Fail
—
1.2
Fail
1.4
Fail
9.6
AAA
1.5
Fail
1.2
Fail
—
1.2
Fail
7.8
AAA
1.3
Fail
1.4
Fail
1.2
Fail
—
White BG
14.0AAA
2.3Fail
1.3Fail
1.5Fail
1.8Fail
Black BG
1.5Fail
9.3AAA
16.7AAA
14.4AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F23
B2B299
ECECD0
E6E58D
D8D87D

Deuteranopia

2F3024
B2B39B
EDEED1
E8EA92
DCE082

Tritanopia

322526
B69E9F
F1D5D6
F29EA2
EF8C8F

Achromatopsia

2C2C2C
ACACAC
E5E5E5
D2D2D2
C0C0C0

Shades & Tints Shades & Tints

#322B21

Dark
Light

#B6AC93

Dark
Light

#F2E4C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322b21;
  --color-2: #b6ac93;
  --color-3: #f2e4c9;
  --color-4: #f4d376;
  --color-5: #f2b76b;
}

SCSS

$color-1: #322b21;
$color-2: #b6ac93;
$color-3: #f2e4c9;
$color-4: #f4d376;
$color-5: #f2b76b;

TAILWIND

colors: {
  'brand-1': '#322b21',
  'brand-2': '#b6ac93',
  'brand-3': '#f2e4c9',
  'brand-4': '#f4d376',
  'brand-5': '#f2b76b',
}

RGB Array

[50, 43, 33], [182, 172, 147], [242, 228, 201], [244, 211, 118], [242, 183, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322B21, #B6AC93, #F2E4C9, #F4D376, #F2B76B 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: #322b21; --color-2: #b6ac93; --color-3: #f2e4c9; --color-4: #f4d376; --color-5: #f2b76b. 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