#DBE248 + #ABD758 + #7ACC68 + #639567 + #4C5D66 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DBE248

Autumn Sage · GreenYellow · Sunflower

HEX

#DBE248

RGB

rgb(219, 226, 72)

HSL

hsl(63, 73%, 58%)

HSB

hsb(63, 68%, 89%)

CMYK

cmyk(3%, 0%, 68%, 11%)

Oklch

oklch(88.0% 0.170 112.0)

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

#ABD758

Grass Green · GreenYellow · Olive Green

HEX

#ABD758

RGB

rgb(171, 215, 88)

HSL

hsl(81, 61%, 59%)

HSB

hsb(81, 59%, 84%)

CMYK

cmyk(20%, 0%, 59%, 16%)

Oklch

oklch(82.2% 0.162 125.9)

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

#7ACC68

Celadon · DarkSeaGreen · Olive Green

HEX

#7ACC68

RGB

rgb(122, 204, 104)

HSL

hsl(109, 50%, 60%)

HSB

hsb(109, 49%, 80%)

CMYK

cmyk(40%, 0%, 49%, 20%)

Oklch

oklch(77.0% 0.157 140.0)

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

#639567

Celadon · Gray · Olive Green

HEX

#639567

RGB

rgb(99, 149, 103)

HSL

hsl(125, 20%, 49%)

HSB

hsb(125, 34%, 58%)

CMYK

cmyk(34%, 0%, 31%, 42%)

Oklch

oklch(62.2% 0.087 146.4)

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

#4C5D66

Slate Blue · DimGray · Prussian Blue

HEX

#4C5D66

RGB

rgb(76, 93, 102)

HSL

hsl(201, 15%, 35%)

HSB

hsb(201, 25%, 40%)

CMYK

cmyk(25%, 9%, 0%, 60%)

Oklch

oklch(46.7% 0.025 231.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBE248

4E46E2

Analogous

E29C46

DBE248

8CE246

Triadic

DBE248

46DAE2

E246DA

Split-Comp.

DBE248

468CE2

9C46E2

Tetradic

DBE248

46E29C

4E46E2

E2468C

Contrast Matrix WCAG 2.1 Contrast

DBE248	ABD758	7ACC68	639567	4C5D66
—	1.2 Fail	1.4 Fail	2.5 Fail	4.9 AA
1.2 Fail	—	1.2 Fail	2.1 Fail	4.1 AA Large
1.4 Fail	1.2 Fail	—	1.8 Fail	3.5 AA Large
2.5 Fail	2.1 Fail	1.8 Fail	—	2.0 Fail
4.9 AA	4.1 AA Large	3.5 AA Large	2.0 Fail	—

White BG

1.4Fail

1.7Fail

2.0Fail

3.5AA Large

6.9AA

Black BG

15.0AAA

12.6AAA

10.7AAA

6.0AA

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDE6D

BEBE77

9E9E80

797972

535464

Deuteranopia

DEDD76

BCB87E

999386

767275

525163

Tritanopia

DB8B91

AD8F94

7E9398

667B7D

4D6262

Achromatopsia

CECECE

BBBBBB

A8A8A8

818181

595959

Shades & Tints Shades & Tints

#DBE248

Dark

Light

#ABD758

Dark

Light

#7ACC68

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbe248;
  --color-2: #abd758;
  --color-3: #7acc68;
  --color-4: #639567;
  --color-5: #4c5d66;
}

SCSS

$color-1: #dbe248;
$color-2: #abd758;
$color-3: #7acc68;
$color-4: #639567;
$color-5: #4c5d66;

TAILWIND

colors: {
  'brand-1': '#dbe248',
  'brand-2': '#abd758',
  'brand-3': '#7acc68',
  'brand-4': '#639567',
  'brand-5': '#4c5d66',
}

RGB Array

[219, 226, 72], [171, 215, 88], [122, 204, 104], [99, 149, 103], [76, 93, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBE248, #ABD758, #7ACC68, #639567, #4C5D66 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: #dbe248; --color-2: #abd758; --color-3: #7acc68; --color-4: #639567; --color-5: #4c5d66. 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