← Back to Editor

#C8F3FA · #DFE2E2 · #F6D4BD · #F8C09A · #F2B365

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 App

Color Details Color Details

#C8F3FA

Sky Blue · Lavender · Glacier Blue

HEX
#C8F3FA
RGB
rgb(200, 243, 250)
HSL
hsl(188, 83%, 88%)
HSB
hsb(188, 20%, 98%)
CMYK
cmyk(20%, 3%, 0%, 2%)
Oklch
oklch(93.6% 0.045 208.5)

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

#DFE2E2

Plain White · LightGray · Cloud White

HEX
#DFE2E2
RGB
rgb(223, 226, 226)
HSL
hsl(180, 5%, 88%)
HSB
hsb(180, 1%, 89%)
CMYK
cmyk(1%, 0%, 0%, 11%)
Oklch
oklch(91.0% 0.003 197.1)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F6D4BD

Apricot · Wheat · Peach Orange

HEX
#F6D4BD
RGB
rgb(246, 212, 189)
HSL
hsl(24, 76%, 85%)
HSB
hsb(24, 23%, 96%)
CMYK
cmyk(0%, 14%, 23%, 4%)
Oklch
oklch(89.3% 0.049 56.1)

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

#F8C09A

Apricot · BurlyWood · Peach Orange

HEX
#F8C09A
RGB
rgb(248, 192, 154)
HSL
hsl(24, 87%, 79%)
HSB
hsb(24, 38%, 97%)
CMYK
cmyk(0%, 23%, 38%, 3%)
Oklch
oklch(84.9% 0.082 55.5)

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

#F2B365

Ginger · SandyBrown · Warm Sun

HEX
#F2B365
RGB
rgb(242, 179, 101)
HSL
hsl(33, 84%, 67%)
HSB
hsb(33, 58%, 95%)
CMYK
cmyk(0%, 26%, 58%, 5%)
Oklch
oklch(81.0% 0.120 70.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8F3FA
FACEC7

Analogous

C7FAE7
C8F3FA
C7DAFA

Triadic

C8F3FA
FAC7F3
F3FAC7

Split-Comp.

C8F3FA
FAC7DA
FAE7C7

Tetradic

C8F3FA
E7C7FA
FACEC7
DAFAC7

Contrast Matrix WCAG 2.1 Contrast

C8F3FA
DFE2E2
F6D4BD
F8C09A
F2B365
—
1.1
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
1.2Fail
1.3Fail
1.4Fail
1.6Fail
1.8Fail
Black BG
17.7AAA
16.1AAA
15.1AAA
13.0AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBF8
E0E0E2
E7E7C3
E0DFA3
D7D678

Deuteranopia

D8D5F8
E0E0E2
E9ECC4
E3E7A5
DADF7C

Tritanopia

CAF7F7
DFE2E2
F4C7C8
F5AAAC
EF878A

Achromatopsia

E7E7E7
E1E1E1
DCDCDC
CCCCCC
BDBDBD

Shades & Tints Shades & Tints

#C8F3FA

Dark
Light

#DFE2E2

Dark
Light

#F6D4BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8f3fa;
  --color-2: #dfe2e2;
  --color-3: #f6d4bd;
  --color-4: #f8c09a;
  --color-5: #f2b365;
}

SCSS

$color-1: #c8f3fa;
$color-2: #dfe2e2;
$color-3: #f6d4bd;
$color-4: #f8c09a;
$color-5: #f2b365;

TAILWIND

colors: {
  'brand-1': '#c8f3fa',
  'brand-2': '#dfe2e2',
  'brand-3': '#f6d4bd',
  'brand-4': '#f8c09a',
  'brand-5': '#f2b365',
}

RGB Array

[200, 243, 250], [223, 226, 226], [246, 212, 189], [248, 192, 154], [242, 179, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C8F3FA, #DFE2E2, #F6D4BD, #F8C09A, #F2B365 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #c8f3fa; --color-2: #dfe2e2; --color-3: #f6d4bd; --color-4: #f8c09a; --color-5: #f2b365. 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. 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