← Back to Editor

#332E2A · #FF3C59 · #399878 · #C4BB3C · #FBE3BD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#332E2A

Tangerine · DarkSlateGray · Cinnamon

HEX
#332E2A
RGB
rgb(51, 46, 42)
HSL
hsl(27, 10%, 18%)
HSB
hsb(27, 18%, 20%)
CMYK
cmyk(0%, 10%, 18%, 80%)
Oklch
oklch(30.5% 0.010 61.1)

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

#FF3C59

Peach Pink · Tomato · Coral Red

HEX
#FF3C59
RGB
rgb(255, 60, 89)
HSL
hsl(351, 100%, 62%)
HSB
hsb(351, 76%, 100%)
CMYK
cmyk(0%, 76%, 65%, 0%)
Oklch
oklch(66.0% 0.228 18.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#399878

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#399878
RGB
rgb(57, 152, 120)
HSL
hsl(160, 45%, 41%)
HSB
hsb(160, 63%, 60%)
CMYK
cmyk(63%, 0%, 21%, 40%)
Oklch
oklch(61.5% 0.102 167.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#C4BB3C

Autumn Sage · GoldenRod · Honey Gold

HEX
#C4BB3C
RGB
rgb(196, 187, 60)
HSL
hsl(56, 54%, 50%)
HSB
hsb(56, 69%, 77%)
CMYK
cmyk(0%, 5%, 69%, 23%)
Oklch
oklch(77.7% 0.144 105.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FBE3BD

Goose Yellow · Bisque · Peach Orange

HEX
#FBE3BD
RGB
rgb(251, 227, 189)
HSL
hsl(37, 89%, 86%)
HSB
hsb(37, 25%, 98%)
CMYK
cmyk(0%, 10%, 25%, 2%)
Oklch
oklch(92.6% 0.056 79.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332E2A
292E32

Analogous

32292A
332E2A
323229

Triadic

332E2A
29322D
2D2932

Split-Comp.

332E2A
293232
292A32

Tetradic

332E2A
2A3229
292E32
322932

Contrast Matrix WCAG 2.1 Contrast

332E2A
FF3C59
399878
C4BB3C
FBE3BD
—
3.9
AA Large
3.8
AA Large
6.7
AA
10.8
AAA
3.9
AA Large
—
1.0
Fail
1.7
Fail
2.8
Fail
3.8
AA Large
1.0
Fail
—
1.8
Fail
2.8
Fail
6.7
AA
1.7
Fail
1.8
Fail
—
1.6
Fail
10.8
AAA
2.8
Fail
2.8
Fail
1.6
Fail
—
White BG
13.4AAA
3.5AA Large
3.5AA Large
2.0Fail
1.2Fail
Black BG
1.6Fail
6.0AA
5.9AA
10.5AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31312B
ABA952
626380
C0C05B
F1F0C6

Deuteranopia

31312B
B6C550
5D5682
C1C162
F2F4C8

Tritanopia

332C2C
F54C4B
3E8687
C47378
FACDCF

Achromatopsia

2F2F2F
7A7A7A
787878
AFAFAF
E6E6E6

Shades & Tints Shades & Tints

#332E2A

Dark
Light

#FF3C59

Dark
Light

#399878

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332e2a;
  --color-2: #ff3c59;
  --color-3: #399878;
  --color-4: #c4bb3c;
  --color-5: #fbe3bd;
}

SCSS

$color-1: #332e2a;
$color-2: #ff3c59;
$color-3: #399878;
$color-4: #c4bb3c;
$color-5: #fbe3bd;

TAILWIND

colors: {
  'brand-1': '#332e2a',
  'brand-2': '#ff3c59',
  'brand-3': '#399878',
  'brand-4': '#c4bb3c',
  'brand-5': '#fbe3bd',
}

RGB Array

[51, 46, 42], [255, 60, 89], [57, 152, 120], [196, 187, 60], [251, 227, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332E2A, #FF3C59, #399878, #C4BB3C, #FBE3BD 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: #332e2a; --color-2: #ff3c59; --color-3: #399878; --color-4: #c4bb3c; --color-5: #fbe3bd. 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