← Back to Editor

#DBDFD5 · #F3EF1A · #A3F107 · #4C94CF · #3C3151

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 LibraryData Visualization

Color Details Color Details

#DBDFD5

Willow Green · LightGray · Mint Green

HEX
#DBDFD5
RGB
rgb(219, 223, 213)
HSL
hsl(84, 14%, 85%)
HSB
hsb(84, 4%, 87%)
CMYK
cmyk(2%, 0%, 4%, 13%)
Oklch
oklch(89.8% 0.014 124.6)

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

#F3EF1A

Autumn Sage · Yellow · Sunflower

HEX
#F3EF1A
RGB
rgb(243, 239, 26)
HSL
hsl(59, 90%, 53%)
HSB
hsb(59, 89%, 95%)
CMYK
cmyk(0%, 2%, 89%, 5%)
Oklch
oklch(92.5% 0.196 108.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#A3F107

Grass Green · Chartreuse · Olive Green

HEX
#A3F107
RGB
rgb(163, 241, 7)
HSL
hsl(80, 94%, 49%)
HSB
hsb(80, 97%, 95%)
CMYK
cmyk(32%, 0%, 97%, 5%)
Oklch
oklch(87.4% 0.232 129.4)

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

#4C94CF

Lake Blue · SteelBlue · Navy Blue

HEX
#4C94CF
RGB
rgb(76, 148, 207)
HSL
hsl(207, 58%, 55%)
HSB
hsb(207, 63%, 81%)
CMYK
cmyk(63%, 29%, 0%, 19%)
Oklch
oklch(64.6% 0.115 245.6)

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

#3C3151

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3C3151
RGB
rgb(60, 49, 81)
HSL
hsl(261, 25%, 25%)
HSB
hsb(261, 40%, 32%)
CMYK
cmyk(26%, 40%, 0%, 68%)
Oklch
oklch(34.0% 0.056 299.2)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBDFD5
D8D3DE

Analogous

DEDDD3
DBDFD5
D4DED3

Triadic

DBDFD5
D3DADE
DED3DA

Split-Comp.

DBDFD5
D3D4DE
DDD3DE

Tetradic

DBDFD5
D3DEDD
D8D3DE
DED3D4

Contrast Matrix WCAG 2.1 Contrast

DBDFD5
F3EF1A
A3F107
4C94CF
3C3151
—
1.1
Fail
1.0
Fail
2.4
Fail
8.9
AAA
1.1
Fail
—
1.1
Fail
2.7
Fail
9.8
AAA
1.0
Fail
1.1
Fail
—
2.3
Fail
8.7
AAA
2.4
Fail
2.7
Fail
2.3
Fail
—
3.7
AA Large
8.9
AAA
9.8
AAA
8.7
AAA
3.7
AA Large
—
White BG
1.4Fail
1.2Fail
1.4Fail
3.3AA Large
12.0AAA
Black BG
15.5AAA
17.2AAA
15.1AAA
6.4AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDD7
F1F14E
C5C540
6B6CC1
373749

Deuteranopia

DDDCD8
F2F25A
C0BA4D
6762BD
383947

Tritanopia

DBD9DA
F3767F
A76C76
50B5B3
3B4342

Achromatopsia

DDDDDD
D8D8D8
BFBFBF
858585
383838

Shades & Tints Shades & Tints

#DBDFD5

Dark
Light

#F3EF1A

Dark
Light

#A3F107

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbdfd5;
  --color-2: #f3ef1a;
  --color-3: #a3f107;
  --color-4: #4c94cf;
  --color-5: #3c3151;
}

SCSS

$color-1: #dbdfd5;
$color-2: #f3ef1a;
$color-3: #a3f107;
$color-4: #4c94cf;
$color-5: #3c3151;

TAILWIND

colors: {
  'brand-1': '#dbdfd5',
  'brand-2': '#f3ef1a',
  'brand-3': '#a3f107',
  'brand-4': '#4c94cf',
  'brand-5': '#3c3151',
}

RGB Array

[219, 223, 213], [243, 239, 26], [163, 241, 7], [76, 148, 207], [60, 49, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBDFD5, #F3EF1A, #A3F107, #4C94CF, #3C3151 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #dbdfd5; --color-2: #f3ef1a; --color-3: #a3f107; --color-4: #4c94cf; --color-5: #3c3151. 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. 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