#44B9B3 + #BBD867 + #E2ECB7 + #D8DFD6 + #DC8536 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#44B9B3

Mineral Blue · MediumTurquoise · Mint Ice

HEX

#44B9B3

RGB

rgb(68, 185, 179)

HSL

hsl(177, 46%, 50%)

HSB

hsb(177, 63%, 73%)

CMYK

cmyk(63%, 0%, 3%, 27%)

Oklch

oklch(71.9% 0.104 190.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#BBD867

Willow Green · Tan · Apple Green

HEX

#BBD867

RGB

rgb(187, 216, 103)

HSL

hsl(75, 59%, 63%)

HSB

hsb(75, 52%, 85%)

CMYK

cmyk(13%, 0%, 52%, 15%)

Oklch

oklch(83.7% 0.144 121.5)

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

#E2ECB7

Willow Green · Wheat · Mint Green

HEX

#E2ECB7

RGB

rgb(226, 236, 183)

HSL

hsl(71, 58%, 82%)

HSB

hsb(71, 22%, 93%)

CMYK

cmyk(4%, 0%, 22%, 7%)

Oklch

oklch(92.2% 0.070 116.5)

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

#D8DFD6

Celadon · LightGray · Mint Green

HEX

#D8DFD6

RGB

rgb(216, 223, 214)

HSL

hsl(107, 12%, 86%)

HSB

hsb(107, 4%, 87%)

CMYK

cmyk(3%, 0%, 4%, 13%)

Oklch

oklch(89.6% 0.014 138.7)

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

#DC8536

Tangerine · Chocolate · Warm Sun

HEX

#DC8536

RGB

rgb(220, 133, 54)

HSL

hsl(29, 70%, 54%)

HSB

hsb(29, 75%, 86%)

CMYK

cmyk(0%, 40%, 75%, 14%)

Oklch

oklch(69.6% 0.140 59.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

44B9B3

BA454B

Analogous

45BA7A

44B9B3

4585BA

Triadic

44B9B3

B445BA

BAB445

Split-Comp.

44B9B3

BA4585

BA7A45

Tetradic

44B9B3

7A45BA

BA454B

85BA45

Contrast Matrix WCAG 2.1 Contrast

44B9B3	BBD867	E2ECB7	D8DFD6	DC8536
—	1.5 Fail	1.9 Fail	1.7 Fail	1.2 Fail
1.5 Fail	—	1.3 Fail	1.2 Fail	1.8 Fail
1.9 Fail	1.3 Fail	—	1.1 Fail	2.3 Fail
1.7 Fail	1.2 Fail	1.1 Fail	—	2.1 Fail
1.2 Fail	1.8 Fail	2.3 Fail	2.1 Fail	—

White BG

2.4Fail

1.6Fail

1.2Fail

1.4Fail

2.8Fail

Black BG

8.8AAA

13.1AAA

16.9AAA

15.4AAA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7778B4

C8C882

E6E6C4

DBDBD8

B6B649

Deuteranopia

7067B5

C6C489

E6E5C7

DBDAD9

BBC24E

Tritanopia

4AB6B6

BC989D

E3CED0

D8DADA

D8585C

Achromatopsia

959595

C2C2C2

E3E3E3

DCDCDC

969696

Shades & Tints Shades & Tints

#44B9B3

Dark

Light

#BBD867

Dark

Light

#E2ECB7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #44b9b3;
  --color-2: #bbd867;
  --color-3: #e2ecb7;
  --color-4: #d8dfd6;
  --color-5: #dc8536;
}

SCSS

$color-1: #44b9b3;
$color-2: #bbd867;
$color-3: #e2ecb7;
$color-4: #d8dfd6;
$color-5: #dc8536;

TAILWIND

colors: {
  'brand-1': '#44b9b3',
  'brand-2': '#bbd867',
  'brand-3': '#e2ecb7',
  'brand-4': '#d8dfd6',
  'brand-5': '#dc8536',
}

RGB Array

[68, 185, 179], [187, 216, 103], [226, 236, 183], [216, 223, 214], [220, 133, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #44B9B3, #BBD867, #E2ECB7, #D8DFD6, #DC8536 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: #44b9b3; --color-2: #bbd867; --color-3: #e2ecb7; --color-4: #d8dfd6; --color-5: #dc8536. 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