← Back to Editor

#E4F4D6 · #BBDCCD · #E9AE62 · #4D2A16 · #FAF5E0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E4F4D6

Emerald · Beige · Mint Green

HEX
#E4F4D6
RGB
rgb(228, 244, 214)
HSL
hsl(92, 58%, 90%)
HSB
hsb(92, 12%, 96%)
CMYK
cmyk(7%, 0%, 12%, 4%)
Oklch
oklch(94.7% 0.043 130.2)

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

#BBDCCD

Jade · LightGray · Apple Green

HEX
#BBDCCD
RGB
rgb(187, 220, 205)
HSL
hsl(153, 32%, 80%)
HSB
hsb(153, 15%, 86%)
CMYK
cmyk(15%, 0%, 7%, 14%)
Oklch
oklch(86.6% 0.041 166.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#E9AE62

Ginger · SandyBrown · Warm Sun

HEX
#E9AE62
RGB
rgb(233, 174, 98)
HSL
hsl(34, 75%, 65%)
HSB
hsb(34, 58%, 91%)
CMYK
cmyk(0%, 25%, 58%, 9%)
Oklch
oklch(79.1% 0.116 71.7)

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

#4D2A16

Tangerine · Maroon · Cinnamon

HEX
#4D2A16
RGB
rgb(77, 42, 22)
HSL
hsl(22, 56%, 19%)
HSB
hsb(22, 71%, 30%)
CMYK
cmyk(0%, 45%, 71%, 70%)
Oklch
oklch(32.6% 0.061 49.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#FAF5E0

Goose Yellow · Beige · Lemon Cream

HEX
#FAF5E0
RGB
rgb(250, 245, 224)
HSL
hsl(48, 72%, 93%)
HSB
hsb(48, 10%, 98%)
CMYK
cmyk(0%, 2%, 10%, 2%)
Oklch
oklch(96.8% 0.028 95.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4F4D6
E6D7F4

Analogous

F3F4D7
E4F4D6
D7F4D8

Triadic

E4F4D6
D7E5F4
F4D7E5

Split-Comp.

E4F4D6
D8D7F4
F4D7F3

Tetradic

E4F4D6
D7F3F4
E6D7F4
F4D8D7

Contrast Matrix WCAG 2.1 Contrast

E4F4D6
BBDCCD
E9AE62
4D2A16
FAF5E0
—
1.3
Fail
1.7
Fail
11.0
AAA
1.1
Fail
1.3
Fail
—
1.3
Fail
8.6
AAA
1.3
Fail
1.7
Fail
1.3
Fail
—
6.4
AA
1.8
Fail
11.0
AAA
8.6
AAA
6.4
AA
—
11.6
AAA
1.1
Fail
1.3
Fail
1.8
Fail
11.6
AAA
—
White BG
1.2Fail
1.5Fail
2.0Fail
12.7AAA
1.1Fail
Black BG
18.2AAA
14.2AAA
10.7AAA
1.7Fail
19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBDD
C9CAD1
CFCF74
3E3E1B
F8F8E5

Deuteranopia

EAE9DF
C7C5D2
D3D779
40431C
F8F9E6

Tritanopia

E5E3E4
BDD3D4
E68386
4B1F20
FAE9EA

Achromatopsia

ECECEC
D0D0D0
B7B7B7
323232
F4F4F4

Shades & Tints Shades & Tints

#E4F4D6

Dark
Light

#BBDCCD

Dark
Light

#E9AE62

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4f4d6;
  --color-2: #bbdccd;
  --color-3: #e9ae62;
  --color-4: #4d2a16;
  --color-5: #faf5e0;
}

SCSS

$color-1: #e4f4d6;
$color-2: #bbdccd;
$color-3: #e9ae62;
$color-4: #4d2a16;
$color-5: #faf5e0;

TAILWIND

colors: {
  'brand-1': '#e4f4d6',
  'brand-2': '#bbdccd',
  'brand-3': '#e9ae62',
  'brand-4': '#4d2a16',
  'brand-5': '#faf5e0',
}

RGB Array

[228, 244, 214], [187, 220, 205], [233, 174, 98], [77, 42, 22], [250, 245, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4F4D6, #BBDCCD, #E9AE62, #4D2A16, #FAF5E0 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e4f4d6; --color-2: #bbdccd; --color-3: #e9ae62; --color-4: #4d2a16; --color-5: #faf5e0. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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