← Back to Editor

#553537 · #FFEBD6 · #BBAA8C · #2E2721 · #3E6066

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

#553537

Crimson · DarkSlateGray · Wine Red

HEX
#553537
RGB
rgb(85, 53, 55)
HSL
hsl(356, 23%, 27%)
HSB
hsb(356, 38%, 33%)
CMYK
cmyk(0%, 38%, 35%, 67%)
Oklch
oklch(36.8% 0.046 15.5)

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

#FFEBD6

Goose Yellow · Beige · Peach Orange

HEX
#FFEBD6
RGB
rgb(255, 235, 214)
HSL
hsl(31, 100%, 92%)
HSB
hsb(31, 16%, 100%)
CMYK
cmyk(0%, 8%, 16%, 0%)
Oklch
oklch(95.1% 0.035 68.7)

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

#BBAA8C

Ginger · Tan · Warm Sun

HEX
#BBAA8C
RGB
rgb(187, 170, 140)
HSL
hsl(38, 26%, 64%)
HSB
hsb(38, 25%, 73%)
CMYK
cmyk(0%, 9%, 25%, 27%)
Oklch
oklch(74.5% 0.046 81.8)

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

#2E2721

Tangerine · DarkSlateGray · Cinnamon

HEX
#2E2721
RGB
rgb(46, 39, 33)
HSL
hsl(28, 16%, 15%)
HSB
hsb(28, 28%, 18%)
CMYK
cmyk(0%, 15%, 28%, 82%)
Oklch
oklch(27.8% 0.015 62.8)

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

#3E6066

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3E6066
RGB
rgb(62, 96, 102)
HSL
hsl(189, 24%, 32%)
HSB
hsb(189, 39%, 40%)
CMYK
cmyk(39%, 6%, 0%, 60%)
Oklch
oklch(46.5% 0.040 209.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

553537
355553

Analogous

553547
553537
554335

Triadic

553537
375535
353755

Split-Comp.

553537
355543
354755

Tetradic

553537
475535
355553
433555

Contrast Matrix WCAG 2.1 Contrast

553537
FFEBD6
BBAA8C
2E2721
3E6066
—
9.3
AAA
4.7
AA
1.4
Fail
1.6
Fail
9.3
AAA
—
2.0
Fail
12.7
AAA
5.9
AA
4.7
AA
2.0
Fail
—
6.5
AA
3.0
AA Large
1.4
Fail
12.7
AAA
6.5
AA
—
2.1
Fail
1.6
Fail
5.9
AA
3.0
AA Large
2.1
Fail
—
White BG
10.8AAA
1.2Fail
2.3Fail
14.7AAA
6.8AA
Black BG
2.0Fail
18.1AAA
9.2AAA
1.4Fail
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

474737
F6F6DB
B4B393
2B2B22
4D4D65

Deuteranopia

494B36
F8F9DC
B5B695
2B2C23
4B4864

Tritanopia

533636
FEDFE0
BA999A
2E2424
406363

Achromatopsia

3F3F3F
EFEFEF
ACACAC
282828
575757

Shades & Tints Shades & Tints

#553537

Dark
Light

#FFEBD6

Dark
Light

#BBAA8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #553537;
  --color-2: #ffebd6;
  --color-3: #bbaa8c;
  --color-4: #2e2721;
  --color-5: #3e6066;
}

SCSS

$color-1: #553537;
$color-2: #ffebd6;
$color-3: #bbaa8c;
$color-4: #2e2721;
$color-5: #3e6066;

TAILWIND

colors: {
  'brand-1': '#553537',
  'brand-2': '#ffebd6',
  'brand-3': '#bbaa8c',
  'brand-4': '#2e2721',
  'brand-5': '#3e6066',
}

RGB Array

[85, 53, 55], [255, 235, 214], [187, 170, 140], [46, 39, 33], [62, 96, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #553537, #FFEBD6, #BBAA8C, #2E2721, #3E6066 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: #553537; --color-2: #ffebd6; --color-3: #bbaa8c; --color-4: #2e2721; --color-5: #3e6066. 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