← Back to Editor

#4B3736 · #C15E37 · #E3AA7F · #F5D5AE · #FFF2D0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#4B3736

Crimson · DarkSlateGray · Wine Red

HEX
#4B3736
RGB
rgb(75, 55, 54)
HSL
hsl(3, 16%, 25%)
HSB
hsb(3, 28%, 29%)
CMYK
cmyk(0%, 27%, 28%, 71%)
Oklch
oklch(35.9% 0.029 21.9)

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

#C15E37

Tangerine · Chocolate · Amber Brown

HEX
#C15E37
RGB
rgb(193, 94, 55)
HSL
hsl(17, 56%, 49%)
HSB
hsb(17, 72%, 76%)
CMYK
cmyk(0%, 51%, 72%, 24%)
Oklch
oklch(59.5% 0.138 41.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E3AA7F

Apricot · BurlyWood · Warm Sun

HEX
#E3AA7F
RGB
rgb(227, 170, 127)
HSL
hsl(26, 64%, 69%)
HSB
hsb(26, 44%, 89%)
CMYK
cmyk(0%, 25%, 44%, 11%)
Oklch
oklch(78.1% 0.088 58.0)

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

#F5D5AE

Goose Yellow · Wheat · Peach Orange

HEX
#F5D5AE
RGB
rgb(245, 213, 174)
HSL
hsl(33, 78%, 82%)
HSB
hsb(33, 29%, 96%)
CMYK
cmyk(0%, 13%, 29%, 4%)
Oklch
oklch(89.0% 0.062 72.4)

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

#FFF2D0

Goose Yellow · Beige · Lemon Cream

HEX
#FFF2D0
RGB
rgb(255, 242, 208)
HSL
hsl(43, 100%, 91%)
HSB
hsb(43, 18%, 100%)
CMYK
cmyk(0%, 5%, 18%, 0%)
Oklch
oklch(96.3% 0.046 89.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B3736
36494A

Analogous

4A363F
4B3736
4A4136

Triadic

4B3736
364A37
37364A

Split-Comp.

4B3736
364A41
363F4A

Tetradic

4B3736
3F4A36
36494A
41364A

Contrast Matrix WCAG 2.1 Contrast

4B3736
C15E37
E3AA7F
F5D5AE
FFF2D0
—
2.6
Fail
5.4
AA
7.9
AAA
9.9
AAA
2.6
Fail
—
2.1
Fail
3.0
AA Large
3.8
AA Large
5.4
AA
2.1
Fail
—
1.5
Fail
1.8
Fail
7.9
AAA
3.0
AA Large
1.5
Fail
—
1.3
Fail
9.9
AAA
3.8
AA Large
1.8
Fail
1.3
Fail
—
White BG
11.1AAA
4.3AA Large
2.0Fail
1.4Fail
1.1Fail
Black BG
1.9Fail
4.9AA
10.3AAA
15.0AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

424236
969540
CACA89
E7E7B7
F9F9D8

Deuteranopia

444536
9CA343
CED28C
E9EBBA
FAFBDA

Tritanopia

4A3636
BC484A
E09293
F3BFC1
FEDFE0

Achromatopsia

3D3D3D
777777
B6B6B6
DADADA
F2F2F2

Shades & Tints Shades & Tints

#4B3736

Dark
Light

#C15E37

Dark
Light

#E3AA7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b3736;
  --color-2: #c15e37;
  --color-3: #e3aa7f;
  --color-4: #f5d5ae;
  --color-5: #fff2d0;
}

SCSS

$color-1: #4b3736;
$color-2: #c15e37;
$color-3: #e3aa7f;
$color-4: #f5d5ae;
$color-5: #fff2d0;

TAILWIND

colors: {
  'brand-1': '#4b3736',
  'brand-2': '#c15e37',
  'brand-3': '#e3aa7f',
  'brand-4': '#f5d5ae',
  'brand-5': '#fff2d0',
}

RGB Array

[75, 55, 54], [193, 94, 55], [227, 170, 127], [245, 213, 174], [255, 242, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B3736, #C15E37, #E3AA7F, #F5D5AE, #FFF2D0 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4b3736; --color-2: #c15e37; --color-3: #e3aa7f; --color-4: #f5d5ae; --color-5: #fff2d0. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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