← Back to Editor

#313138 · #B2D9D8 · #FFF1B5 · #FAB57D · #EB9249

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#313138

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#313138
RGB
rgb(49, 49, 56)
HSL
hsl(240, 7%, 21%)
HSB
hsb(240, 12%, 22%)
CMYK
cmyk(13%, 13%, 0%, 78%)
Oklch
oklch(31.6% 0.012 285.7)

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

#B2D9D8

Jade · LightBlue · Glacier Blue

HEX
#B2D9D8
RGB
rgb(178, 217, 216)
HSL
hsl(178, 34%, 77%)
HSB
hsb(178, 18%, 85%)
CMYK
cmyk(18%, 0%, 0%, 15%)
Oklch
oklch(85.7% 0.041 194.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#FFF1B5

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF1B5
RGB
rgb(255, 241, 181)
HSL
hsl(49, 100%, 85%)
HSB
hsb(49, 29%, 100%)
CMYK
cmyk(0%, 5%, 29%, 0%)
Oklch
oklch(95.5% 0.078 96.5)

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

#FAB57D

Apricot · LightSalmon · Warm Sun

HEX
#FAB57D
RGB
rgb(250, 181, 125)
HSL
hsl(27, 93%, 74%)
HSB
hsb(27, 50%, 98%)
CMYK
cmyk(0%, 28%, 50%, 2%)
Oklch
oklch(82.6% 0.108 59.6)

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

#EB9249

Tangerine · Coral · Warm Sun

HEX
#EB9249
RGB
rgb(235, 146, 73)
HSL
hsl(27, 80%, 60%)
HSB
hsb(27, 69%, 92%)
CMYK
cmyk(0%, 38%, 69%, 8%)
Oklch
oklch(73.9% 0.139 57.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

313138
393932

Analogous

323639
313138
363239

Triadic

313138
393232
323932

Split-Comp.

313138
393632
363932

Tetradic

313138
393236
393932
323936

Contrast Matrix WCAG 2.1 Contrast

313138
B2D9D8
FFF1B5
FAB57D
EB9249
—
8.5
AAA
11.4
AAA
7.4
AAA
5.4
AA
8.5
AAA
—
1.3
Fail
1.2
Fail
1.6
Fail
11.4
AAA
1.3
Fail
—
1.5
Fail
2.1
Fail
7.4
AAA
1.2
Fail
1.5
Fail
—
1.4
Fail
5.4
AA
1.6
Fail
2.1
Fail
1.4
Fail
—
White BG
12.9AAA
1.5Fail
1.1Fail
1.8Fail
2.4Fail
Black BG
1.6Fail
13.8AAA
18.5AAA
12.0AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313136
C3C3D8
F9F9C4
DCDC8B
C4C45B

Deuteranopia

313136
C1BED8
FAFBC7
E0E58E
CAD05F

Tritanopia

313535
B4D8D8
FECFD2
F79598
E7696C

Achromatopsia

323232
CDCDCD
EEEEEE
C3C3C3
A4A4A4

Shades & Tints Shades & Tints

#313138

Dark
Light

#B2D9D8

Dark
Light

#FFF1B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #313138;
  --color-2: #b2d9d8;
  --color-3: #fff1b5;
  --color-4: #fab57d;
  --color-5: #eb9249;
}

SCSS

$color-1: #313138;
$color-2: #b2d9d8;
$color-3: #fff1b5;
$color-4: #fab57d;
$color-5: #eb9249;

TAILWIND

colors: {
  'brand-1': '#313138',
  'brand-2': '#b2d9d8',
  'brand-3': '#fff1b5',
  'brand-4': '#fab57d',
  'brand-5': '#eb9249',
}

RGB Array

[49, 49, 56], [178, 217, 216], [255, 241, 181], [250, 181, 125], [235, 146, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #313138, #B2D9D8, #FFF1B5, #FAB57D, #EB9249 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: #313138; --color-2: #b2d9d8; --color-3: #fff1b5; --color-4: #fab57d; --color-5: #eb9249. 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