#649C94 + #96B886 + #D9DB8A + #FCE4BD + #FFB196 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#649C94

Mineral Blue · CadetBlue · Mint Ice

HEX

#649C94

RGB

rgb(100, 156, 148)

HSL

hsl(171, 22%, 50%)

HSB

hsb(171, 36%, 61%)

CMYK

cmyk(36%, 0%, 5%, 39%)

Oklch

oklch(65.2% 0.060 184.5)

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

#96B886

Celadon · DarkSeaGreen · Apple Green

HEX

#96B886

RGB

rgb(150, 184, 134)

HSL

hsl(101, 26%, 62%)

HSB

hsb(101, 27%, 72%)

CMYK

cmyk(18%, 0%, 27%, 28%)

Oklch

oklch(74.4% 0.079 135.8)

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

#D9DB8A

Fresh Green · Khaki · Sunflower

HEX

#D9DB8A

RGB

rgb(217, 219, 138)

HSL

hsl(61, 53%, 70%)

HSB

hsb(61, 37%, 86%)

CMYK

cmyk(1%, 0%, 37%, 14%)

Oklch

oklch(87.2% 0.103 109.6)

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

#FCE4BD

Goose Yellow · Bisque · Peach Orange

HEX

#FCE4BD

RGB

rgb(252, 228, 189)

HSL

hsl(37, 91%, 86%)

HSB

hsb(37, 25%, 99%)

CMYK

cmyk(0%, 10%, 25%, 1%)

Oklch

oklch(92.9% 0.057 79.9)

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

#FFB196

Apricot · LightSalmon · Peach Orange

HEX

#FFB196

RGB

rgb(255, 177, 150)

HSL

hsl(15, 100%, 79%)

HSB

hsb(15, 41%, 100%)

CMYK

cmyk(0%, 31%, 41%, 0%)

Oklch

oklch(82.8% 0.099 39.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

649C94

9C636C

Analogous

639C77

649C94

63889C

Triadic

649C94

93639C

9C9363

Split-Comp.

649C94

9C6388

9C7763

Tetradic

649C94

77639C

9C636C

889C63

Contrast Matrix WCAG 2.1 Contrast

649C94	96B886	D9DB8A	FCE4BD	FFB196
—	1.4 Fail	2.1 Fail	2.5 Fail	1.8 Fail
1.4 Fail	—	1.5 Fail	1.8 Fail	1.3 Fail
2.1 Fail	1.5 Fail	—	1.2 Fail	1.2 Fail
2.5 Fail	1.8 Fail	1.2 Fail	—	1.4 Fail
1.8 Fail	1.3 Fail	1.2 Fail	1.4 Fail	—

White BG

3.1AA Large

2.2Fail

1.5Fail

1.2Fail

1.8Fail

Black BG

6.7AA

9.5AAA

14.4AAA

17.0AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7D96

A5A592

DADA9E

F2F1C6

DDDD9D

Deuteranopia

797596

A3A095

DADAA2

F3F5C9

E2E89E

Tritanopia

679798

989C9E

D9ADB0

FBCED0

FBA2A3

Achromatopsia

8A8A8A

A8A8A8

D1D1D1

E7E7E7

C5C5C5

Shades & Tints Shades & Tints

#649C94

Dark

Light

#96B886

Dark

Light

#D9DB8A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #649c94;
  --color-2: #96b886;
  --color-3: #d9db8a;
  --color-4: #fce4bd;
  --color-5: #ffb196;
}

SCSS

$color-1: #649c94;
$color-2: #96b886;
$color-3: #d9db8a;
$color-4: #fce4bd;
$color-5: #ffb196;

TAILWIND

colors: {
  'brand-1': '#649c94',
  'brand-2': '#96b886',
  'brand-3': '#d9db8a',
  'brand-4': '#fce4bd',
  'brand-5': '#ffb196',
}

RGB Array

[100, 156, 148], [150, 184, 134], [217, 219, 138], [252, 228, 189], [255, 177, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #649C94, #96B886, #D9DB8A, #FCE4BD, #FFB196 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: #649c94; --color-2: #96b886; --color-3: #d9db8a; --color-4: #fce4bd; --color-5: #ffb196. 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