← Back to Editor

#242136 · #2D2233 · #F2684C · #FFB97F · #FFD9A5

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

#242136

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#242136
RGB
rgb(36, 33, 54)
HSL
hsl(249, 24%, 17%)
HSB
hsb(249, 39%, 21%)
CMYK
cmyk(33%, 39%, 0%, 79%)
Oklch
oklch(26.1% 0.039 290.0)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#2D2233

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2D2233
RGB
rgb(45, 34, 51)
HSL
hsl(279, 20%, 17%)
HSB
hsb(279, 33%, 20%)
CMYK
cmyk(12%, 33%, 0%, 80%)
Oklch
oklch(27.2% 0.034 313.4)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#F2684C

Peach Pink · Tomato · Coral Red

HEX
#F2684C
RGB
rgb(242, 104, 76)
HSL
hsl(10, 86%, 62%)
HSB
hsb(10, 69%, 95%)
CMYK
cmyk(0%, 57%, 69%, 5%)
Oklch
oklch(68.4% 0.176 33.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FFB97F

Apricot · LightSalmon · Warm Sun

HEX
#FFB97F
RGB
rgb(255, 185, 127)
HSL
hsl(27, 100%, 75%)
HSB
hsb(27, 50%, 100%)
CMYK
cmyk(0%, 27%, 50%, 0%)
Oklch
oklch(83.9% 0.110 60.1)

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

#FFD9A5

Goose Yellow · Wheat · Peach Orange

HEX
#FFD9A5
RGB
rgb(255, 217, 165)
HSL
hsl(35, 100%, 82%)
HSB
hsb(35, 35%, 100%)
CMYK
cmyk(0%, 15%, 35%, 0%)
Oklch
oklch(90.5% 0.079 75.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242136
333621

Analogous

212836
242136
2E2136

Triadic

242136
362421
213624

Split-Comp.

242136
362E21
283621

Tetradic

242136
362128
333621
21362E

Contrast Matrix WCAG 2.1 Contrast

242136
2D2233
F2684C
FFB97F
FFD9A5
—
1.0
Fail
5.1
AA
9.3
AAA
11.7
AAA
1.0
Fail
—
4.9
AA
9.0
AAA
11.3
AAA
5.1
AA
4.9
AA
—
1.8
Fail
2.3
Fail
9.3
AAA
9.0
AAA
1.8
Fail
—
1.3
Fail
11.7
AAA
11.3
AAA
2.3
Fail
1.3
Fail
—
White BG
15.6AAA
15.1AAA
3.1AA Large
1.7Fail
1.3Fail
Black BG
1.3Fail
1.4Fail
6.9AA
12.5AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

232331
28282F
B6B553
E1E08D
EFEEB2

Deuteranopia

232330
292A2E
BEC954
E5EA90
F1F4B5

Tritanopia

242D2C
2C2C2B
EB5859
FC989B
FDBCBE

Achromatopsia

242424
272727
8E8E8E
C7C7C7
DEDEDE

Shades & Tints Shades & Tints

#242136

Dark
Light

#2D2233

Dark
Light

#F2684C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242136;
  --color-2: #2d2233;
  --color-3: #f2684c;
  --color-4: #ffb97f;
  --color-5: #ffd9a5;
}

SCSS

$color-1: #242136;
$color-2: #2d2233;
$color-3: #f2684c;
$color-4: #ffb97f;
$color-5: #ffd9a5;

TAILWIND

colors: {
  'brand-1': '#242136',
  'brand-2': '#2d2233',
  'brand-3': '#f2684c',
  'brand-4': '#ffb97f',
  'brand-5': '#ffd9a5',
}

RGB Array

[36, 33, 54], [45, 34, 51], [242, 104, 76], [255, 185, 127], [255, 217, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #242136, #2D2233, #F2684C, #FFB97F, #FFD9A5 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: #242136; --color-2: #2d2233; --color-3: #f2684c; --color-4: #ffb97f; --color-5: #ffd9a5. 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