← Back to Editor

#DAFEF4 · #FFF3AF · #D1E89A · #8ACBDD · #E68F4C

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 App

Color Details Color Details

#DAFEF4

Jade · Lavender · Glacier Blue

HEX
#DAFEF4
RGB
rgb(218, 254, 244)
HSL
hsl(163, 95%, 93%)
HSB
hsb(163, 14%, 100%)
CMYK
cmyk(14%, 0%, 4%, 0%)
Oklch
oklch(96.9% 0.039 176.8)

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

#FFF3AF

Fresh Green · Wheat · Lemon Cream

HEX
#FFF3AF
RGB
rgb(255, 243, 175)
HSL
hsl(51, 100%, 84%)
HSB
hsb(51, 31%, 100%)
CMYK
cmyk(0%, 5%, 31%, 0%)
Oklch
oklch(95.8% 0.087 99.3)

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

#D1E89A

Willow Green · Khaki · Apple Green

HEX
#D1E89A
RGB
rgb(209, 232, 154)
HSL
hsl(78, 63%, 76%)
HSB
hsb(78, 34%, 91%)
CMYK
cmyk(10%, 0%, 34%, 9%)
Oklch
oklch(89.6% 0.104 121.9)

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

#8ACBDD

Sky Blue · SkyBlue · Lake Green

HEX
#8ACBDD
RGB
rgb(138, 203, 221)
HSL
hsl(193, 55%, 70%)
HSB
hsb(193, 38%, 87%)
CMYK
cmyk(38%, 8%, 0%, 13%)
Oklch
oklch(80.5% 0.071 217.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#E68F4C

Tangerine · Coral · Warm Sun

HEX
#E68F4C
RGB
rgb(230, 143, 76)
HSL
hsl(26, 75%, 60%)
HSB
hsb(26, 67%, 90%)
CMYK
cmyk(0%, 38%, 67%, 10%)
Oklch
oklch(72.8% 0.134 56.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAFEF4
FEDCE6

Analogous

DCFEE4
DAFEF4
DCF7FE

Triadic

DAFEF4
F4DCFE
FEF4DC

Split-Comp.

DAFEF4
FEDCF7
FEE4DC

Tetradic

DAFEF4
E4DCFE
FEDCE6
F7FEDC

Contrast Matrix WCAG 2.1 Contrast

DAFEF4
FFF3AF
D1E89A
8ACBDD
E68F4C
—
1.0
Fail
1.2
Fail
1.7
Fail
2.3
Fail
1.0
Fail
—
1.2
Fail
1.6
Fail
2.2
Fail
1.2
Fail
1.2
Fail
—
1.3
Fail
1.9
Fail
1.7
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.3
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
White BG
1.1Fail
1.1Fail
1.3Fail
1.8Fail
2.5Fail
Black BG
19.5AAA
18.7AAA
15.7AAA
11.7AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAF6
FAFABF
DBDBAD
A6A7D9
C0C05C

Deuteranopia

E8E5F7
FBFBC3
DAD8B1
A29ED8
C5CC60

Tritanopia

DCF8F9
FECCCF
D2BCBF
8DD5D4
E2696C

Achromatopsia

F2F2F2
EFEFEF
D8D8D8
BABABA
A1A1A1

Shades & Tints Shades & Tints

#DAFEF4

Dark
Light

#FFF3AF

Dark
Light

#D1E89A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dafef4;
  --color-2: #fff3af;
  --color-3: #d1e89a;
  --color-4: #8acbdd;
  --color-5: #e68f4c;
}

SCSS

$color-1: #dafef4;
$color-2: #fff3af;
$color-3: #d1e89a;
$color-4: #8acbdd;
$color-5: #e68f4c;

TAILWIND

colors: {
  'brand-1': '#dafef4',
  'brand-2': '#fff3af',
  'brand-3': '#d1e89a',
  'brand-4': '#8acbdd',
  'brand-5': '#e68f4c',
}

RGB Array

[218, 254, 244], [255, 243, 175], [209, 232, 154], [138, 203, 221], [230, 143, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DAFEF4, #FFF3AF, #D1E89A, #8ACBDD, #E68F4C 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: #dafef4; --color-2: #fff3af; --color-3: #d1e89a; --color-4: #8acbdd; --color-5: #e68f4c. 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 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