← Back to Editor

#D5CED8 · #30FF3A · #21F605 · #B4CBB1 · #3C8EDE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D5CED8

Lilac · LightGray · Lavender

HEX
#D5CED8
RGB
rgb(213, 206, 216)
HSL
hsl(282, 11%, 83%)
HSB
hsb(282, 5%, 85%)
CMYK
cmyk(1%, 5%, 0%, 15%)
Oklch
oklch(86.0% 0.016 316.0)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#30FF3A

Emerald · LimeGreen · Olive Green

HEX
#30FF3A
RGB
rgb(48, 255, 58)
HSL
hsl(123, 100%, 59%)
HSB
hsb(123, 81%, 100%)
CMYK
cmyk(81%, 0%, 77%, 0%)
Oklch
oklch(87.2% 0.276 143.2)

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

#21F605

Pine Green · Lime · Olive Green

HEX
#21F605
RGB
rgb(33, 246, 5)
HSL
hsl(113, 96%, 49%)
HSB
hsb(113, 98%, 96%)
CMYK
cmyk(87%, 0%, 98%, 4%)
Oklch
oklch(84.5% 0.284 142.1)

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

#B4CBB1

Celadon · Silver · Apple Green

HEX
#B4CBB1
RGB
rgb(180, 203, 177)
HSL
hsl(113, 20%, 75%)
HSB
hsb(113, 13%, 80%)
CMYK
cmyk(11%, 0%, 13%, 20%)
Oklch
oklch(81.8% 0.044 142.0)

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

#3C8EDE

Azure · CornflowerBlue · Navy Blue

HEX
#3C8EDE
RGB
rgb(60, 142, 222)
HSL
hsl(210, 71%, 55%)
HSB
hsb(210, 73%, 87%)
CMYK
cmyk(73%, 36%, 0%, 13%)
Oklch
oklch(63.4% 0.144 250.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5CED8
D2D8CF

Analogous

D1CFD8
D5CED8
D8CFD7

Triadic

D5CED8
D8D6CF
CFD8D6

Split-Comp.

D5CED8
D7D8CF
CFD8D1

Tetradic

D5CED8
D8D1CF
D2D8CF
CFD7D8

Contrast Matrix WCAG 2.1 Contrast

D5CED8
30FF3A
21F605
B4CBB1
3C8EDE
—
1.1
Fail
1.0
Fail
1.1
Fail
2.2
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
2.5
Fail
1.0
Fail
1.1
Fail
—
1.2
Fail
2.3
Fail
1.1
Fail
1.3
Fail
1.2
Fail
—
2.0
Fail
2.2
Fail
2.5
Fail
2.3
Fail
2.0
Fail
—
White BG
1.5Fail
1.4Fail
1.5Fail
1.7Fail
3.4AA Large
Black BG
13.6AAA
15.5AAA
14.2AAA
12.1AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D6
8A8B6A
7D7F3F
BEBEB7
6060CB

Deuteranopia

D2D3D5
7E6E75
71614D
BDBBB9
5B55C6

Tritanopia

D5D4D3
3A8F98
2C6D77
B5BCBD
40BBB8

Achromatopsia

D1D1D1
ABABAB
9B9B9B
C1C1C1
7F7F7F

Shades & Tints Shades & Tints

#D5CED8

Dark
Light

#30FF3A

Dark
Light

#21F605

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5ced8;
  --color-2: #30ff3a;
  --color-3: #21f605;
  --color-4: #b4cbb1;
  --color-5: #3c8ede;
}

SCSS

$color-1: #d5ced8;
$color-2: #30ff3a;
$color-3: #21f605;
$color-4: #b4cbb1;
$color-5: #3c8ede;

TAILWIND

colors: {
  'brand-1': '#d5ced8',
  'brand-2': '#30ff3a',
  'brand-3': '#21f605',
  'brand-4': '#b4cbb1',
  'brand-5': '#3c8ede',
}

RGB Array

[213, 206, 216], [48, 255, 58], [33, 246, 5], [180, 203, 177], [60, 142, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5CED8, #30FF3A, #21F605, #B4CBB1, #3C8EDE 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: #d5ced8; --color-2: #30ff3a; --color-3: #21f605; --color-4: #b4cbb1; --color-5: #3c8ede. 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