← Back to Editor

#D4F6D2 · #AABEA3 · #7F8674 · #554D44 · #2A1515

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D4F6D2

Emerald · Beige · Mint Green

HEX
#D4F6D2
RGB
rgb(212, 246, 210)
HSL
hsl(117, 67%, 89%)
HSB
hsb(117, 15%, 96%)
CMYK
cmyk(14%, 0%, 15%, 4%)
Oklch
oklch(93.9% 0.060 143.6)

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

#AABEA3

Celadon · DarkGray · Apple Green

HEX
#AABEA3
RGB
rgb(170, 190, 163)
HSL
hsl(104, 17%, 69%)
HSB
hsb(104, 14%, 75%)
CMYK
cmyk(11%, 0%, 14%, 25%)
Oklch
oklch(77.9% 0.044 137.6)

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

#7F8674

Ink Gray · Gray · Warm Gray

HEX
#7F8674
RGB
rgb(127, 134, 116)
HSL
hsl(83, 7%, 49%)
HSB
hsb(83, 13%, 53%)
CMYK
cmyk(5%, 0%, 13%, 47%)
Oklch
oklch(60.9% 0.028 124.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#554D44

Ochre · DarkOliveGreen · Amber Brown

HEX
#554D44
RGB
rgb(85, 77, 68)
HSL
hsl(32, 11%, 30%)
HSB
hsb(32, 20%, 33%)
CMYK
cmyk(0%, 9%, 20%, 67%)
Oklch
oklch(42.5% 0.018 70.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#2A1515

Crimson · Black · Deep Berry

HEX
#2A1515
RGB
rgb(42, 21, 21)
HSL
hsl(0, 33%, 12%)
HSB
hsb(0, 50%, 16%)
CMYK
cmyk(0%, 50%, 50%, 84%)
Oklch
oklch(22.5% 0.035 20.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4F6D2
F4D0F6

Analogous

E5F6D0
D4F6D2
D0F6E1

Triadic

D4F6D2
D0D2F6
F6D0D2

Split-Comp.

D4F6D2
E1D0F6
F6D0E5

Tetradic

D4F6D2
D0E5F6
F4D0F6
F6E1D0

Contrast Matrix WCAG 2.1 Contrast

D4F6D2
AABEA3
7F8674
554D44
2A1515
—
1.7
Fail
3.2
AA Large
7.1
AAA
14.7
AAA
1.7
Fail
—
1.9
Fail
4.2
AA Large
8.7
AAA
3.2
AA Large
1.9
Fail
—
2.2
Fail
4.6
AA
7.1
AAA
4.2
AA Large
2.2
Fail
—
2.1
Fail
14.7
AAA
8.7
AAA
4.6
AA
2.1
Fail
—
White BG
1.2Fail
2.0Fail
3.8AA Large
8.3AAA
17.3AAA
Black BG
17.9AAA
10.6AAA
5.6AA
2.5Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3DB
B3B3AA
828278
525146
212115

Deuteranopia

E1DEDD
B2B0AB
828179
525347
222415

Tritanopia

D6E2E3
ABAFB0
7F7C7D
554848
291515

Achromatopsia

E8E8E8
B5B5B5
828282
4E4E4E
1B1B1B

Shades & Tints Shades & Tints

#D4F6D2

Dark
Light

#AABEA3

Dark
Light

#7F8674

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4f6d2;
  --color-2: #aabea3;
  --color-3: #7f8674;
  --color-4: #554d44;
  --color-5: #2a1515;
}

SCSS

$color-1: #d4f6d2;
$color-2: #aabea3;
$color-3: #7f8674;
$color-4: #554d44;
$color-5: #2a1515;

TAILWIND

colors: {
  'brand-1': '#d4f6d2',
  'brand-2': '#aabea3',
  'brand-3': '#7f8674',
  'brand-4': '#554d44',
  'brand-5': '#2a1515',
}

RGB Array

[212, 246, 210], [170, 190, 163], [127, 134, 116], [85, 77, 68], [42, 21, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4F6D2, #AABEA3, #7F8674, #554D44, #2A1515 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d4f6d2; --color-2: #aabea3; --color-3: #7f8674; --color-4: #554d44; --color-5: #2a1515. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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