#DEBF42 + #D3DA7A + #DAECA7 + #BBD5BB + #CCB8D2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DEBF42

Ginger · GoldenRod · Sunflower

HEX

#DEBF42

RGB

rgb(222, 191, 66)

HSL

hsl(48, 70%, 56%)

HSB

hsb(48, 70%, 87%)

CMYK

cmyk(0%, 14%, 70%, 13%)

Oklch

oklch(81.0% 0.143 94.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D3DA7A

Fresh Green · Khaki · Sunflower

HEX

#D3DA7A

RGB

rgb(211, 218, 122)

HSL

hsl(64, 56%, 67%)

HSB

hsb(64, 44%, 85%)

CMYK

cmyk(3%, 0%, 44%, 15%)

Oklch

oklch(86.2% 0.120 112.3)

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

#DAECA7

Willow Green · Wheat · Apple Green

HEX

#DAECA7

RGB

rgb(218, 236, 167)

HSL

hsl(76, 64%, 79%)

HSB

hsb(76, 29%, 93%)

CMYK

cmyk(8%, 0%, 29%, 7%)

Oklch

oklch(91.3% 0.091 120.1)

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

#BBD5BB

Celadon · Silver · Apple Green

HEX

#BBD5BB

RGB

rgb(187, 213, 187)

HSL

hsl(120, 24%, 78%)

HSB

hsb(120, 12%, 84%)

CMYK

cmyk(12%, 0%, 12%, 16%)

Oklch

oklch(84.7% 0.045 145.2)

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

#CCB8D2

Lilac · Silver · Lilac Purple

HEX

#CCB8D2

RGB

rgb(204, 184, 210)

HSL

hsl(286, 22%, 77%)

HSB

hsb(286, 12%, 82%)

CMYK

cmyk(3%, 12%, 0%, 18%)

Oklch

oklch(80.7% 0.042 318.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEBF42

4060DD

Analogous

DD6F40

DEBF42

AEDD40

Triadic

DEBF42

40DDBE

BE40DD

Split-Comp.

DEBF42

40AEDD

6F40DD

Tetradic

DEBF42

40DD6F

4060DD

DD40AE

Contrast Matrix WCAG 2.1 Contrast

DEBF42	D3DA7A	DAECA7	BBD5BB	CCB8D2
—	1.2 Fail	1.4 Fail	1.1 Fail	1.0 Fail
1.2 Fail	—	1.2 Fail	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.1 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.0 Fail	1.2 Fail	1.5 Fail	1.2 Fail	—

White BG

1.8Fail

1.5Fail

1.3Fail

1.6Fail

1.8Fail

Black BG

11.6AAA

14.1AAA

16.5AAA

13.3AAA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D060

D6D691

E2E2B8

C6C6C1

C3C3CC

Deuteranopia

D2D568

D6D597

E1DFBC

C5C3C3

C5C6CA

Tritanopia

DC787D

D3A4A8

DBC5C8

BCC6C7

CBC7C6

Achromatopsia

BABABA

CDCDCD

DFDFDF

CACACA

C1C1C1

Shades & Tints Shades & Tints

#DEBF42

Dark

Light

#D3DA7A

Dark

Light

#DAECA7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #debf42;
  --color-2: #d3da7a;
  --color-3: #daeca7;
  --color-4: #bbd5bb;
  --color-5: #ccb8d2;
}

SCSS

$color-1: #debf42;
$color-2: #d3da7a;
$color-3: #daeca7;
$color-4: #bbd5bb;
$color-5: #ccb8d2;

TAILWIND

colors: {
  'brand-1': '#debf42',
  'brand-2': '#d3da7a',
  'brand-3': '#daeca7',
  'brand-4': '#bbd5bb',
  'brand-5': '#ccb8d2',
}

RGB Array

[222, 191, 66], [211, 218, 122], [218, 236, 167], [187, 213, 187], [204, 184, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEBF42, #D3DA7A, #DAECA7, #BBD5BB, #CCB8D2 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: #debf42; --color-2: #d3da7a; --color-3: #daeca7; --color-4: #bbd5bb; --color-5: #ccb8d2. 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