← Back to Editor

#D93F8A · #AA8C64 · #7CD93F · #B2D998 · #D2D9CE

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 Library

Color Details Color Details

#D93F8A

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D93F8A
RGB
rgb(217, 63, 138)
HSL
hsl(331, 67%, 55%)
HSB
hsb(331, 71%, 85%)
CMYK
cmyk(0%, 71%, 36%, 15%)
Oklch
oklch(61.3% 0.201 355.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#AA8C64

Ginger · Gray · Warm Sun

HEX
#AA8C64
RGB
rgb(170, 140, 100)
HSL
hsl(34, 29%, 53%)
HSB
hsb(34, 41%, 67%)
CMYK
cmyk(0%, 18%, 41%, 33%)
Oklch
oklch(65.8% 0.066 74.2)

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

#7CD93F

Emerald · GreenYellow · Olive Green

HEX
#7CD93F
RGB
rgb(124, 217, 63)
HSL
hsl(96, 67%, 55%)
HSB
hsb(96, 71%, 85%)
CMYK
cmyk(43%, 0%, 71%, 15%)
Oklch
oklch(79.8% 0.206 135.7)

Traditional「Emerald」· Paint「Olive Green」· Creative Blush Sunrise

#B2D998

Celadon · LightGreen · Apple Green

HEX
#B2D998
RGB
rgb(178, 217, 152)
HSL
hsl(96, 46%, 72%)
HSB
hsb(96, 30%, 85%)
CMYK
cmyk(18%, 0%, 30%, 15%)
Oklch
oklch(84.1% 0.097 133.3)

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

#D2D9CE

Celadon · LightGray · Mint Green

HEX
#D2D9CE
RGB
rgb(210, 217, 206)
HSL
hsl(98, 13%, 83%)
HSB
hsb(98, 5%, 85%)
CMYK
cmyk(3%, 0%, 5%, 15%)
Oklch
oklch(87.7% 0.017 133.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D93F8A
3FD98F

Analogous

D93FD7
D93F8A
D9423F

Triadic

D93F8A
8AD93F
3F8AD9

Split-Comp.

D93F8A
3FD942
3FD7D9

Tetradic

D93F8A
D7D93F
3FD98F
423FD9

Contrast Matrix WCAG 2.1 Contrast

D93F8A
AA8C64
7CD93F
B2D998
D2D9CE
—
1.3
Fail
2.4
Fail
2.6
Fail
2.9
Fail
1.3
Fail
—
1.8
Fail
2.0
Fail
2.2
Fail
2.4
Fail
1.8
Fail
—
1.1
Fail
1.2
Fail
2.6
Fail
2.0
Fail
1.1
Fail
—
1.1
Fail
2.9
Fail
2.2
Fail
1.2
Fail
1.1
Fail
—
White BG
4.2AA Large
3.2AA Large
1.8Fail
1.6Fail
1.4Fail
Black BG
5.0AA
6.6AA
11.9AAA
13.3AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969578
9D9D6E
A4A564
C3C3A8
D5D5D1

Deuteranopia

9FAB74
9FA170
9F986D
C1BEAC
D5D4D1

Tritanopia

D16A66
A97577
818288
B4B4B7
D2D3D3

Achromatopsia

767676
909090
ACACAC
C6C6C6
D6D6D6

Shades & Tints Shades & Tints

#D93F8A

Dark
Light

#AA8C64

Dark
Light

#7CD93F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d93f8a;
  --color-2: #aa8c64;
  --color-3: #7cd93f;
  --color-4: #b2d998;
  --color-5: #d2d9ce;
}

SCSS

$color-1: #d93f8a;
$color-2: #aa8c64;
$color-3: #7cd93f;
$color-4: #b2d998;
$color-5: #d2d9ce;

TAILWIND

colors: {
  'brand-1': '#d93f8a',
  'brand-2': '#aa8c64',
  'brand-3': '#7cd93f',
  'brand-4': '#b2d998',
  'brand-5': '#d2d9ce',
}

RGB Array

[217, 63, 138], [170, 140, 100], [124, 217, 63], [178, 217, 152], [210, 217, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D93F8A, #AA8C64, #7CD93F, #B2D998, #D2D9CE is ideal for: corporate websites, product showcases, portfolios. 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: #d93f8a; --color-2: #aa8c64; --color-3: #7cd93f; --color-4: #b2d998; --color-5: #d2d9ce. 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. 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