← Back to Editor

#FFB884 · #F5DF98 · #FFF8D4 · #C0D1C2 · #2E4347

warm

A 5-color warm 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

#FFB884

Apricot · LightSalmon · Peach Orange

HEX
#FFB884
RGB
rgb(255, 184, 132)
HSL
hsl(25, 100%, 76%)
HSB
hsb(25, 48%, 100%)
CMYK
cmyk(0%, 28%, 48%, 0%)
Oklch
oklch(83.8% 0.107 56.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F5DF98

Goose Yellow · Khaki · Lemon Cream

HEX
#F5DF98
RGB
rgb(245, 223, 152)
HSL
hsl(46, 82%, 78%)
HSB
hsb(46, 38%, 96%)
CMYK
cmyk(0%, 9%, 38%, 4%)
Oklch
oklch(90.6% 0.093 92.9)

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

#FFF8D4

Fresh Green · Beige · Lemon Cream

HEX
#FFF8D4
RGB
rgb(255, 248, 212)
HSL
hsl(50, 100%, 92%)
HSB
hsb(50, 17%, 100%)
CMYK
cmyk(0%, 3%, 17%, 0%)
Oklch
oklch(97.5% 0.047 98.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C0D1C2

Celadon · Silver · Apple Green

HEX
#C0D1C2
RGB
rgb(192, 209, 194)
HSL
hsl(127, 16%, 79%)
HSB
hsb(127, 8%, 82%)
CMYK
cmyk(8%, 0%, 7%, 18%)
Oklch
oklch(84.4% 0.028 148.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#2E4347

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2E4347
RGB
rgb(46, 67, 71)
HSL
hsl(190, 21%, 23%)
HSB
hsb(190, 35%, 28%)
CMYK
cmyk(35%, 6%, 0%, 72%)
Oklch
oklch(36.7% 0.027 210.7)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB884
85CCFF

Analogous

FF858F
FFB884
FFF585

Triadic

FFB884
85FFB8
B885FF

Split-Comp.

FFB884
85FFF5
858FFF

Tetradic

FFB884
8FFF85
85CCFF
F585FF

Contrast Matrix WCAG 2.1 Contrast

FFB884
F5DF98
FFF8D4
C0D1C2
2E4347
—
1.3
Fail
1.6
Fail
1.1
Fail
6.2
AA
1.3
Fail
—
1.2
Fail
1.2
Fail
7.9
AAA
1.6
Fail
1.2
Fail
—
1.5
Fail
9.8
AAA
1.1
Fail
1.2
Fail
1.5
Fail
—
6.5
AA
6.2
AA
7.9
AAA
9.8
AAA
6.5
AA
—
White BG
1.7Fail
1.3Fail
1.1Fail
1.6Fail
10.4AAA
Black BG
12.4AAA
15.9AAA
19.6AAA
13.1AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E091
EBEBA9
FCFCDD
C7C8C6
373746

Deuteranopia

E4EA94
EDEEAD
FCFDDF
C6C5C6
363446

Tritanopia

FB9B9D
F4B7BA
FFE4E5
C1C8C9
2F4545

Achromatopsia

C7C7C7
DDDDDD
F6F6F6
CACACA
3D3D3D

Shades & Tints Shades & Tints

#FFB884

Dark
Light

#F5DF98

Dark
Light

#FFF8D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb884;
  --color-2: #f5df98;
  --color-3: #fff8d4;
  --color-4: #c0d1c2;
  --color-5: #2e4347;
}

SCSS

$color-1: #ffb884;
$color-2: #f5df98;
$color-3: #fff8d4;
$color-4: #c0d1c2;
$color-5: #2e4347;

TAILWIND

colors: {
  'brand-1': '#ffb884',
  'brand-2': '#f5df98',
  'brand-3': '#fff8d4',
  'brand-4': '#c0d1c2',
  'brand-5': '#2e4347',
}

RGB Array

[255, 184, 132], [245, 223, 152], [255, 248, 212], [192, 209, 194], [46, 67, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFB884, #F5DF98, #FFF8D4, #C0D1C2, #2E4347 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #ffb884; --color-2: #f5df98; --color-3: #fff8d4; --color-4: #c0d1c2; --color-5: #2e4347. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 warm-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