#93B8B0 + #B8D1B0 + #D3DEAB + #D8F291 + #C9F53B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#93B8B0

Jade · DarkGray · Lake Green

HEX

#93B8B0

RGB

rgb(147, 184, 176)

HSL

hsl(167, 21%, 65%)

HSB

hsb(167, 20%, 72%)

CMYK

cmyk(20%, 0%, 4%, 28%)

Oklch

oklch(75.3% 0.042 180.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B8D1B0

Celadon · Silver · Apple Green

HEX

#B8D1B0

RGB

rgb(184, 209, 176)

HSL

hsl(105, 26%, 75%)

HSB

hsb(105, 16%, 82%)

CMYK

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

Oklch

oklch(83.3% 0.053 138.1)

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

#D3DEAB

Willow Green · Wheat · Apple Green

HEX

#D3DEAB

RGB

rgb(211, 222, 171)

HSL

hsl(73, 44%, 77%)

HSB

hsb(73, 23%, 87%)

CMYK

cmyk(5%, 0%, 23%, 13%)

Oklch

oklch(87.9% 0.068 117.7)

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

#D8F291

Willow Green · Khaki · Apple Green

HEX

#D8F291

RGB

rgb(216, 242, 145)

HSL

hsl(76, 79%, 76%)

HSB

hsb(76, 40%, 95%)

CMYK

cmyk(11%, 0%, 40%, 5%)

Oklch

oklch(92.1% 0.125 121.2)

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

#C9F53B

Grass Green · GreenYellow · Olive Green

HEX

#C9F53B

RGB

rgb(201, 245, 59)

HSL

hsl(74, 90%, 60%)

HSB

hsb(74, 76%, 96%)

CMYK

cmyk(18%, 0%, 76%, 4%)

Oklch

oklch(90.8% 0.204 122.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

93B8B0

B8939B

Analogous

93B89E

93B8B0

93AEB8

Triadic

93B8B0

B093B8

B8B093

Split-Comp.

93B8B0

B893AE

B89E93

Tetradic

93B8B0

9E93B8

B8939B

AEB893

Contrast Matrix WCAG 2.1 Contrast

93B8B0	B8D1B0	D3DEAB	D8F291	C9F53B
—	1.3 Fail	1.5 Fail	1.8 Fail	1.7 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	1.0 Fail
1.7 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

2.2Fail

1.6Fail

1.4Fail

1.2Fail

1.3Fail

Black BG

9.7AAA

12.8AAA

14.8AAA

17.0AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3B2

C3C3B8

D8D8B7

E3E3A8

DCDC68

Deuteranopia

A19EB2

C1BFBA

D7D6BA

E2E0AE

DAD673

Tritanopia

95B3B4

B9BEC0

D4C1C3

D9BBBF

CB8C93

Achromatopsia

ACACAC

C6C6C6

D5D5D5

DFDFDF

D3D3D3

Shades & Tints Shades & Tints

#93B8B0

Dark

Light

#B8D1B0

Dark

Light

#D3DEAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #93b8b0;
  --color-2: #b8d1b0;
  --color-3: #d3deab;
  --color-4: #d8f291;
  --color-5: #c9f53b;
}

SCSS

$color-1: #93b8b0;
$color-2: #b8d1b0;
$color-3: #d3deab;
$color-4: #d8f291;
$color-5: #c9f53b;

TAILWIND

colors: {
  'brand-1': '#93b8b0',
  'brand-2': '#b8d1b0',
  'brand-3': '#d3deab',
  'brand-4': '#d8f291',
  'brand-5': '#c9f53b',
}

RGB Array

[147, 184, 176], [184, 209, 176], [211, 222, 171], [216, 242, 145], [201, 245, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #93B8B0, #B8D1B0, #D3DEAB, #D8F291, #C9F53B 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: #93b8b0; --color-2: #b8d1b0; --color-3: #d3deab; --color-4: #d8f291; --color-5: #c9f53b. 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