← Back to Editor

#D3E373 · #D3DD8D · #D2D7A7 · #D2D1C0 · #D1CBDA

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

WorkspaceReading

Color Details Color Details

#D3E373

Fresh Green · Khaki · Sunflower

HEX
#D3E373
RGB
rgb(211, 227, 115)
HSL
hsl(69, 67%, 67%)
HSB
hsb(69, 49%, 89%)
CMYK
cmyk(7%, 0%, 49%, 11%)
Oklch
oklch(88.1% 0.138 116.0)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#D3DD8D

Fresh Green · Khaki · Sunflower

HEX
#D3DD8D
RGB
rgb(211, 221, 141)
HSL
hsl(68, 54%, 71%)
HSB
hsb(68, 36%, 87%)
CMYK
cmyk(5%, 0%, 36%, 13%)
Oklch
oklch(87.2% 0.103 114.4)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#D2D7A7

Fresh Green · Wheat · Sunflower

HEX
#D2D7A7
RGB
rgb(210, 215, 167)
HSL
hsl(66, 38%, 75%)
HSB
hsb(66, 22%, 84%)
CMYK
cmyk(2%, 0%, 22%, 16%)
Oklch
oklch(86.3% 0.064 112.6)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#D2D1C0

Fresh Green · LightGray · Lemon Cream

HEX
#D2D1C0
RGB
rgb(210, 209, 192)
HSL
hsl(57, 17%, 79%)
HSB
hsb(57, 9%, 82%)
CMYK
cmyk(0%, 0%, 9%, 18%)
Oklch
oklch(85.7% 0.023 104.1)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#D1CBDA

Wisteria · LightGray · Lavender

HEX
#D1CBDA
RGB
rgb(209, 203, 218)
HSL
hsl(264, 17%, 83%)
HSB
hsb(264, 7%, 85%)
CMYK
cmyk(4%, 7%, 0%, 15%)
Oklch
oklch(85.1% 0.022 304.0)

TraditionalWisteria」· PaintLavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3E373
8372E3

Analogous

E3BC72
D3E373
9AE372

Triadic

D3E373
72D2E3
E372D2

Split-Comp.

D3E373
729AE3
BC72E3

Tetradic

D3E373
72E3BC
8372E3
E3729A

Contrast Matrix WCAG 2.1 Contrast

D3E373
D3DD8D
D2D7A7
D2D1C0
D1CBDA
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
White BG
1.4Fail
1.4Fail
1.5Fail
1.5Fail
1.6Fail
Black BG
15.0AAA
14.5AAA
14.0AAA
13.6AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADA8E
D7D7A0
D4D4B3
D2D2C4
CECED6

Deuteranopia

D9D895
D7D6A5
D4D4B5
D2D2C5
CFCFD6

Tritanopia

D4A3A8
D4B0B3
D2BCBE
D2C7C8
D1D4D3

Achromatopsia

D1D1D1
D1D1D1
D0D0D0
CFCFCF
CFCFCF

Shades & Tints Shades & Tints

#D3E373

Dark
Light

#D3DD8D

Dark
Light

#D2D7A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3e373;
  --color-2: #d3dd8d;
  --color-3: #d2d7a7;
  --color-4: #d2d1c0;
  --color-5: #d1cbda;
}

SCSS

$color-1: #d3e373;
$color-2: #d3dd8d;
$color-3: #d2d7a7;
$color-4: #d2d1c0;
$color-5: #d1cbda;

TAILWIND

colors: {
  'brand-1': '#d3e373',
  'brand-2': '#d3dd8d',
  'brand-3': '#d2d7a7',
  'brand-4': '#d2d1c0',
  'brand-5': '#d1cbda',
}

RGB Array

[211, 227, 115], [211, 221, 141], [210, 215, 167], [210, 209, 192], [209, 203, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3E373, #D3DD8D, #D2D7A7, #D2D1C0, #D1CBDA is ideal for: health products, baby brands, fresh-style blogs. 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: #d3e373; --color-2: #d3dd8d; --color-3: #d2d7a7; --color-4: #d2d1c0; --color-5: #d1cbda. 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 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