← Back to Editor

#DEF9CB · #D2D3F2 · #AFC6F2 · #77B2C2 · #9288EA

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#DEF9CB

Emerald · Beige · Mint Green

HEX
#DEF9CB
RGB
rgb(222, 249, 203)
HSL
hsl(95, 79%, 89%)
HSB
hsb(95, 18%, 98%)
CMYK
cmyk(11%, 0%, 18%, 2%)
Oklch
oklch(95.1% 0.067 132.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#D2D3F2

Azure · Lavender · Sky Blue

HEX
#D2D3F2
RGB
rgb(210, 211, 242)
HSL
hsl(238, 55%, 89%)
HSB
hsb(238, 13%, 95%)
CMYK
cmyk(13%, 13%, 0%, 5%)
Oklch
oklch(87.6% 0.043 284.0)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#AFC6F2

Azure · LightSteelBlue · Sky Blue

HEX
#AFC6F2
RGB
rgb(175, 198, 242)
HSL
hsl(219, 72%, 82%)
HSB
hsb(219, 28%, 95%)
CMYK
cmyk(28%, 18%, 0%, 5%)
Oklch
oklch(82.4% 0.067 263.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#77B2C2

Sky Blue · MediumAquaMarine · Lake Green

HEX
#77B2C2
RGB
rgb(119, 178, 194)
HSL
hsl(193, 38%, 61%)
HSB
hsb(193, 39%, 76%)
CMYK
cmyk(39%, 8%, 0%, 24%)
Oklch
oklch(72.9% 0.065 216.7)

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

#9288EA

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#9288EA
RGB
rgb(146, 136, 234)
HSL
hsl(246, 70%, 73%)
HSB
hsb(246, 42%, 92%)
CMYK
cmyk(38%, 42%, 0%, 8%)
Oklch
oklch(67.7% 0.142 286.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEF9CB
E7CDF9

Analogous

F5F9CD
DEF9CB
CDF9D0

Triadic

DEF9CB
CDDFF9
F9CDDF

Split-Comp.

DEF9CB
D0CDF9
F9CDF5

Tetradic

DEF9CB
CDF5F9
E7CDF9
F9D0CD

Contrast Matrix WCAG 2.1 Contrast

DEF9CB
D2D3F2
AFC6F2
77B2C2
9288EA
—
1.3
Fail
1.5
Fail
2.1
Fail
2.7
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.1
Fail
1.6
Fail
1.4
Fail
—
1.3
Fail
2.7
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
White BG
1.1Fail
1.5Fail
1.7Fail
2.4Fail
3.0AA Large
Black BG
18.5AAA
14.3AAA
12.2AAA
8.9AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAD6
D2D2EA
B9B9E7
9191BE
8E8ED2

Deuteranopia

E8E6D9
D2D2E9
B8B6E5
8D89BD
8E8FCD

Tritanopia

DFDFE1
D2E5E3
B0DFDD
7ABBBA
92C0BB

Achromatopsia

ECECEC
D6D6D6
C4C4C4
A2A2A2
969696

Shades & Tints Shades & Tints

#DEF9CB

Dark
Light

#D2D3F2

Dark
Light

#AFC6F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #def9cb;
  --color-2: #d2d3f2;
  --color-3: #afc6f2;
  --color-4: #77b2c2;
  --color-5: #9288ea;
}

SCSS

$color-1: #def9cb;
$color-2: #d2d3f2;
$color-3: #afc6f2;
$color-4: #77b2c2;
$color-5: #9288ea;

TAILWIND

colors: {
  'brand-1': '#def9cb',
  'brand-2': '#d2d3f2',
  'brand-3': '#afc6f2',
  'brand-4': '#77b2c2',
  'brand-5': '#9288ea',
}

RGB Array

[222, 249, 203], [210, 211, 242], [175, 198, 242], [119, 178, 194], [146, 136, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DEF9CB, #D2D3F2, #AFC6F2, #77B2C2, #9288EA 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: #def9cb; --color-2: #d2d3f2; --color-3: #afc6f2; --color-4: #77b2c2; --color-5: #9288ea. 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 nature-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