#63A7A8 + #B9D3D4 + #DECEB4 + #F4CAA2 + #EAB193 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#63A7A8

Slate Blue · CadetBlue · Lake Green

HEX

#63A7A8

RGB

rgb(99, 167, 168)

HSL

hsl(181, 28%, 52%)

HSB

hsb(181, 41%, 66%)

CMYK

cmyk(41%, 1%, 0%, 34%)

Oklch

oklch(68.4% 0.069 196.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#B9D3D4

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B9D3D4

RGB

rgb(185, 211, 212)

HSL

hsl(182, 24%, 78%)

HSB

hsb(182, 13%, 83%)

CMYK

cmyk(13%, 0%, 0%, 17%)

Oklch

oklch(84.8% 0.028 199.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#DECEB4

Goose Yellow · Wheat · Peach Orange

HEX

#DECEB4

RGB

rgb(222, 206, 180)

HSL

hsl(37, 39%, 79%)

HSB

hsb(37, 19%, 87%)

CMYK

cmyk(0%, 7%, 19%, 13%)

Oklch

oklch(85.8% 0.039 80.0)

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

#F4CAA2

Apricot · Wheat · Peach Orange

HEX

#F4CAA2

RGB

rgb(244, 202, 162)

HSL

hsl(29, 79%, 80%)

HSB

hsb(29, 34%, 96%)

CMYK

cmyk(0%, 17%, 34%, 4%)

Oklch

oklch(86.6% 0.071 65.3)

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

#EAB193

Apricot · BurlyWood · Warm Sun

HEX

#EAB193

RGB

rgb(234, 177, 147)

HSL

hsl(21, 67%, 75%)

HSB

hsb(21, 37%, 92%)

CMYK

cmyk(0%, 24%, 37%, 8%)

Oklch

oklch(80.6% 0.078 49.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63A7A8

A76362

Analogous

62A786

63A7A8

6283A7

Triadic

63A7A8

A762A6

A6A762

Split-Comp.

63A7A8

A76283

A78662

Tetradic

63A7A8

8662A7

A76362

83A762

Contrast Matrix WCAG 2.1 Contrast

63A7A8	B9D3D4	DECEB4	F4CAA2	EAB193
—	1.7 Fail	1.8 Fail	1.8 Fail	1.5 Fail
1.7 Fail	—	1.0 Fail	1.0 Fail	1.2 Fail
1.8 Fail	1.0 Fail	—	1.0 Fail	1.2 Fail
1.8 Fail	1.0 Fail	1.0 Fail	—	1.2 Fail
1.5 Fail	1.2 Fail	1.2 Fail	1.2 Fail	—

White BG

2.8Fail

1.6Fail

1.5Fail

1.9Fail

Black BG

7.6AAA

13.3AAA

13.6AAA

13.8AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8081A8

C4C4D4

D7D7BA

E2E1AC

D1D19A

Deuteranopia

7D77A8

C3C1D4

D8D9BC

E4E7AE

D5D99C

Tritanopia

66A8A8

BAD4D4

DDBFC0

F2B3B5

E7A0A1

Achromatopsia

939393

CBCBCB

D0D0D0

D2D2D2

BFBFBF

Shades & Tints Shades & Tints

#63A7A8

Dark

Light

#B9D3D4

Dark

Light

#DECEB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63a7a8;
  --color-2: #b9d3d4;
  --color-3: #deceb4;
  --color-4: #f4caa2;
  --color-5: #eab193;
}

SCSS

$color-1: #63a7a8;
$color-2: #b9d3d4;
$color-3: #deceb4;
$color-4: #f4caa2;
$color-5: #eab193;

TAILWIND

colors: {
  'brand-1': '#63a7a8',
  'brand-2': '#b9d3d4',
  'brand-3': '#deceb4',
  'brand-4': '#f4caa2',
  'brand-5': '#eab193',
}

RGB Array

[99, 167, 168], [185, 211, 212], [222, 206, 180], [244, 202, 162], [234, 177, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63A7A8, #B9D3D4, #DECEB4, #F4CAA2, #EAB193 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: #63a7a8; --color-2: #b9d3d4; --color-3: #deceb4; --color-4: #f4caa2; --color-5: #eab193. 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