← Back to Editor

#463B3F · #B98168 · #F8A877 · #FAC991 · #FFE4BB

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

#463B3F

Dark Violet · DarkSlateGray · Dark Stone

HEX
#463B3F
RGB
rgb(70, 59, 63)
HSL
hsl(338, 9%, 25%)
HSB
hsb(338, 16%, 27%)
CMYK
cmyk(0%, 16%, 10%, 73%)
Oklch
oklch(36.5% 0.017 354.0)

Traditional「Dark Violet」· Paint「Dark Stone」· Creative Midnight Shadow

#B98168

Tangerine · DarkSalmon · Warm Sun

HEX
#B98168
RGB
rgb(185, 129, 104)
HSL
hsl(19, 37%, 57%)
HSB
hsb(19, 44%, 73%)
CMYK
cmyk(0%, 30%, 44%, 27%)
Oklch
oklch(65.3% 0.079 44.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F8A877

Apricot · LightSalmon · Warm Sun

HEX
#F8A877
RGB
rgb(248, 168, 119)
HSL
hsl(23, 90%, 72%)
HSB
hsb(23, 52%, 97%)
CMYK
cmyk(0%, 32%, 52%, 3%)
Oklch
oklch(79.9% 0.114 51.9)

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

#FAC991

Goose Yellow · Khaki · Peach Orange

HEX
#FAC991
RGB
rgb(250, 201, 145)
HSL
hsl(32, 91%, 77%)
HSB
hsb(32, 42%, 98%)
CMYK
cmyk(0%, 20%, 42%, 2%)
Oklch
oklch(86.6% 0.091 69.9)

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

#FFE4BB

Goose Yellow · Bisque · Peach Orange

HEX
#FFE4BB
RGB
rgb(255, 228, 187)
HSL
hsl(36, 100%, 87%)
HSB
hsb(36, 27%, 100%)
CMYK
cmyk(0%, 11%, 27%, 0%)
Oklch
oklch(93.1% 0.061 78.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

463B3F
3A4541

Analogous

453A44
463B3F
453C3A

Triadic

463B3F
3E453A
3A3E45

Split-Comp.

463B3F
3A453C
3A4445

Tetradic

463B3F
44453A
3A4541
3C3A45

Contrast Matrix WCAG 2.1 Contrast

463B3F
B98168
F8A877
FAC991
FFE4BB
—
3.3
AA Large
5.5
AA
7.1
AAA
8.7
AAA
3.3
AA Large
—
1.7
Fail
2.2
Fail
2.7
Fail
5.5
AA
1.7
Fail
—
1.3
Fail
1.6
Fail
7.1
AAA
2.2
Fail
1.3
Fail
—
1.2
Fail
8.7
AAA
2.7
Fail
1.6
Fail
1.2
Fail
—
White BG
10.7AAA
3.3AA Large
1.9Fail
1.5Fail
1.2Fail
Black BG
2.0Fail
6.4AA
10.9AAA
13.8AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

41413E
A1A06E
D5D583
E5E49F
F3F3C5

Deuteranopia

42433E
A4A870
DAE086
E8EBA2
F5F7C7

Tritanopia

453D3D
B67374
F48C8E
F8A9AC
FECDCE

Achromatopsia

3F3F3F
8F8F8F
BABABA
D1D1D1
E7E7E7

Shades & Tints Shades & Tints

#463B3F

Dark
Light

#B98168

Dark
Light

#F8A877

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #463b3f;
  --color-2: #b98168;
  --color-3: #f8a877;
  --color-4: #fac991;
  --color-5: #ffe4bb;
}

SCSS

$color-1: #463b3f;
$color-2: #b98168;
$color-3: #f8a877;
$color-4: #fac991;
$color-5: #ffe4bb;

TAILWIND

colors: {
  'brand-1': '#463b3f',
  'brand-2': '#b98168',
  'brand-3': '#f8a877',
  'brand-4': '#fac991',
  'brand-5': '#ffe4bb',
}

RGB Array

[70, 59, 63], [185, 129, 104], [248, 168, 119], [250, 201, 145], [255, 228, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #463B3F, #B98168, #F8A877, #FAC991, #FFE4BB 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: #463b3f; --color-2: #b98168; --color-3: #f8a877; --color-4: #fac991; --color-5: #ffe4bb. 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