#93BFAE + #9CAEA2 + #B0C0A3 + #D5DDAE + #FFE0AA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#93BFAE

Jade · DarkSeaGreen · Apple Green

HEX

#93BFAE

RGB

rgb(147, 191, 174)

HSL

hsl(157, 26%, 66%)

HSB

hsb(157, 23%, 75%)

CMYK

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

Oklch

oklch(76.8% 0.053 169.3)

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

#9CAEA2

Celadon · DarkGray · Apple Green

HEX

#9CAEA2

RGB

rgb(156, 174, 162)

HSL

hsl(140, 10%, 65%)

HSB

hsb(140, 10%, 68%)

CMYK

cmyk(10%, 0%, 7%, 32%)

Oklch

oklch(73.3% 0.026 156.5)

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

#B0C0A3

Celadon · DarkGray · Apple Green

HEX

#B0C0A3

RGB

rgb(176, 192, 163)

HSL

hsl(93, 19%, 70%)

HSB

hsb(93, 15%, 75%)

CMYK

cmyk(8%, 0%, 15%, 25%)

Oklch

oklch(78.8% 0.044 131.0)

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

#D5DDAE

Willow Green · Wheat · Apple Green

HEX

#D5DDAE

RGB

rgb(213, 221, 174)

HSL

hsl(70, 41%, 77%)

HSB

hsb(70, 21%, 87%)

CMYK

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

Oklch

oklch(88.0% 0.063 115.6)

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

#FFE0AA

Goose Yellow · Wheat · Peach Orange

HEX

#FFE0AA

RGB

rgb(255, 224, 170)

HSL

hsl(38, 100%, 83%)

HSB

hsb(38, 33%, 100%)

CMYK

cmyk(0%, 12%, 33%, 0%)

Oklch

oklch(92.0% 0.077 81.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

93BFAE

BF92A3

Analogous

92BF97

93BFAE

92BABF

Triadic

93BFAE

AE92BF

BFAE92

Split-Comp.

93BFAE

BF92BA

BF9792

Tetradic

93BFAE

9792BF

BF92A3

BABF92

Contrast Matrix WCAG 2.1 Contrast

93BFAE	9CAEA2	B0C0A3	D5DDAE	FFE0AA
—	1.1 Fail	1.1 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.2 Fail	1.6 Fail	1.8 Fail
1.1 Fail	1.2 Fail	—	1.4 Fail	1.5 Fail
1.4 Fail	1.6 Fail	1.4 Fail	—	1.1 Fail
1.6 Fail	1.8 Fail	1.5 Fail	1.1 Fail	—

White BG

2.0Fail

2.3Fail

1.9Fail

1.4Fail

1.3Fail

Black BG

10.3AAA

9.0AAA

10.9AAA

14.8AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A6B2

A4A4A5

B7B7AA

D8D9B9

F2F1B7

Deuteranopia

A4A0B3

A3A1A6

B6B5AC

D8D7BC

F3F6BA

Tritanopia

95B5B6

9DA7A8

B1B0B1

D5C2C4

FDC1C4

Achromatopsia

B0B0B0

A7A7A7

B8B8B8

D5D5D5

E3E3E3

Shades & Tints Shades & Tints

#93BFAE

Dark

Light

#9CAEA2

Dark

Light

#B0C0A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #93bfae;
  --color-2: #9caea2;
  --color-3: #b0c0a3;
  --color-4: #d5ddae;
  --color-5: #ffe0aa;
}

SCSS

$color-1: #93bfae;
$color-2: #9caea2;
$color-3: #b0c0a3;
$color-4: #d5ddae;
$color-5: #ffe0aa;

TAILWIND

colors: {
  'brand-1': '#93bfae',
  'brand-2': '#9caea2',
  'brand-3': '#b0c0a3',
  'brand-4': '#d5ddae',
  'brand-5': '#ffe0aa',
}

RGB Array

[147, 191, 174], [156, 174, 162], [176, 192, 163], [213, 221, 174], [255, 224, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #93BFAE, #9CAEA2, #B0C0A3, #D5DDAE, #FFE0AA 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: #93bfae; --color-2: #9caea2; --color-3: #b0c0a3; --color-4: #d5ddae; --color-5: #ffe0aa. 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