← Back to Editor

#D3F255 · #DBCA5A · #CC8D91 · #946087 · #4F5066

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D3F255

Willow Green · GreenYellow · Apple Green

HEX
#D3F255
RGB
rgb(211, 242, 85)
HSL
hsl(72, 86%, 64%)
HSB
hsb(72, 65%, 95%)
CMYK
cmyk(13%, 0%, 65%, 5%)
Oklch
oklch(91.0% 0.181 119.7)

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

#DBCA5A

Fresh Green · SandyBrown · Sunflower

HEX
#DBCA5A
RGB
rgb(219, 202, 90)
HSL
hsl(52, 64%, 61%)
HSB
hsb(52, 59%, 86%)
CMYK
cmyk(0%, 8%, 59%, 14%)
Oklch
oklch(83.2% 0.133 100.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#CC8D91

Peach Pink · DarkSalmon · Coral Red

HEX
#CC8D91
RGB
rgb(204, 141, 145)
HSL
hsl(356, 38%, 68%)
HSB
hsb(356, 31%, 80%)
CMYK
cmyk(0%, 31%, 29%, 20%)
Oklch
oklch(70.7% 0.077 15.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#946087

Rose Purple · Gray · Violet

HEX
#946087
RGB
rgb(148, 96, 135)
HSL
hsl(315, 21%, 48%)
HSB
hsb(315, 35%, 58%)
CMYK
cmyk(0%, 35%, 9%, 42%)
Oklch
oklch(55.8% 0.086 336.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#4F5066

Indigo · DimGray · Prussian Blue

HEX
#4F5066
RGB
rgb(79, 80, 102)
HSL
hsl(237, 13%, 35%)
HSB
hsb(237, 23%, 40%)
CMYK
cmyk(23%, 22%, 0%, 60%)
Oklch
oklch(43.9% 0.036 282.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3F255
7454F2

Analogous

F2C354
D3F255
84F254

Triadic

D3F255
54D3F2
F254D3

Split-Comp.

D3F255
5484F2
C354F2

Tetradic

D3F255
54F2C3
7454F2
F25484

Contrast Matrix WCAG 2.1 Contrast

D3F255
DBCA5A
CC8D91
946087
4F5066
—
1.3
Fail
2.1
Fail
3.9
AA Large
6.2
AA
1.3
Fail
—
1.6
Fail
2.9
Fail
4.7
AA
2.1
Fail
1.6
Fail
—
1.8
Fail
2.9
Fail
3.9
AA Large
2.9
Fail
1.8
Fail
—
1.6
Fail
6.2
AA
4.7
AA
2.9
Fail
1.6
Fail
—
White BG
1.3Fail
1.7Fail
2.7Fail
4.9AA
7.9AAA
Black BG
16.6AAA
12.6AAA
7.8AAA
4.3AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E17B
D4D375
B1B090
7D7D7E
4F4F61

Deuteranopia

DFDC84
D5D67C
B4B990
81847B
4F4F5F

Tritanopia

D599A0
DA8A8F
C98F8F
917674
4F5C5C

Achromatopsia

D7D7D7
C2C2C2
A0A0A0
747474
525252

Shades & Tints Shades & Tints

#D3F255

Dark
Light

#DBCA5A

Dark
Light

#CC8D91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3f255;
  --color-2: #dbca5a;
  --color-3: #cc8d91;
  --color-4: #946087;
  --color-5: #4f5066;
}

SCSS

$color-1: #d3f255;
$color-2: #dbca5a;
$color-3: #cc8d91;
$color-4: #946087;
$color-5: #4f5066;

TAILWIND

colors: {
  'brand-1': '#d3f255',
  'brand-2': '#dbca5a',
  'brand-3': '#cc8d91',
  'brand-4': '#946087',
  'brand-5': '#4f5066',
}

RGB Array

[211, 242, 85], [219, 202, 90], [204, 141, 145], [148, 96, 135], [79, 80, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3F255, #DBCA5A, #CC8D91, #946087, #4F5066 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: #d3f255; --color-2: #dbca5a; --color-3: #cc8d91; --color-4: #946087; --color-5: #4f5066. 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