#AFD3C8 + #81A69B + #8292A4 + #FBE5C3 + #FBD7C3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFD3C8

Jade · LightSteelBlue · Glacier Blue

HEX

#AFD3C8

RGB

rgb(175, 211, 200)

HSL

hsl(162, 29%, 76%)

HSB

hsb(162, 17%, 83%)

CMYK

cmyk(17%, 0%, 5%, 17%)

Oklch

oklch(83.8% 0.041 174.8)

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

#81A69B

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#81A69B

RGB

rgb(129, 166, 155)

HSL

hsl(162, 17%, 58%)

HSB

hsb(162, 22%, 65%)

CMYK

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

Oklch

oklch(69.5% 0.044 174.9)

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

#8292A4

Azure · LightSlateGray · Navy Blue

HEX

#8292A4

RGB

rgb(130, 146, 164)

HSL

hsl(212, 16%, 58%)

HSB

hsb(212, 21%, 64%)

CMYK

cmyk(21%, 11%, 0%, 36%)

Oklch

oklch(65.3% 0.033 251.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#FBE5C3

Goose Yellow · Bisque · Peach Orange

HEX

#FBE5C3

RGB

rgb(251, 229, 195)

HSL

hsl(36, 88%, 87%)

HSB

hsb(36, 22%, 98%)

CMYK

cmyk(0%, 9%, 22%, 2%)

Oklch

oklch(93.1% 0.051 78.7)

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

#FBD7C3

Apricot · Bisque · Peach Orange

HEX

#FBD7C3

RGB

rgb(251, 215, 195)

HSL

hsl(21, 88%, 87%)

HSB

hsb(21, 22%, 98%)

CMYK

cmyk(0%, 14%, 22%, 2%)

Oklch

oklch(90.4% 0.049 50.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFD3C8

D4B0BB

Analogous

B0D4B7

AFD3C8

B0CCD4

Triadic

AFD3C8

C9B0D4

D4C9B0

Split-Comp.

AFD3C8

D4B0CC

D4B7B0

Tetradic

AFD3C8

B7B0D4

D4B0BB

CCD4B0

Contrast Matrix WCAG 2.1 Contrast

AFD3C8	81A69B	8292A4	FBE5C3	FBD7C3
—	1.7 Fail	2.0 Fail	1.3 Fail	1.2 Fail
1.7 Fail	—	1.2 Fail	2.2 Fail	2.0 Fail
2.0 Fail	1.2 Fail	—	2.6 Fail	2.4 Fail
1.3 Fail	2.2 Fail	2.6 Fail	—	1.1 Fail
1.2 Fail	2.0 Fail	2.4 Fail	1.1 Fail	—

White BG

1.6Fail

2.7Fail

3.2AA Large

1.2Fail

1.3Fail

Black BG

13.0AAA

7.9AAA

6.6AA

17.1AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFCB

91919E

8989A0

F1F1CB

EBEBC8

Deuteranopia

BDBACB

8F8C9E

88879F

F3F4CD

EEF0C9

Tritanopia

B1CDCD

83A0A0

839C9B

FAD2D3

F9CCCD

Achromatopsia

C7C7C7

9A9A9A

8F8F8F

E8E8E8

DFDFDF

Shades & Tints Shades & Tints

#AFD3C8

Dark

Light

#81A69B

Dark

Light

#8292A4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afd3c8;
  --color-2: #81a69b;
  --color-3: #8292a4;
  --color-4: #fbe5c3;
  --color-5: #fbd7c3;
}

SCSS

$color-1: #afd3c8;
$color-2: #81a69b;
$color-3: #8292a4;
$color-4: #fbe5c3;
$color-5: #fbd7c3;

TAILWIND

colors: {
  'brand-1': '#afd3c8',
  'brand-2': '#81a69b',
  'brand-3': '#8292a4',
  'brand-4': '#fbe5c3',
  'brand-5': '#fbd7c3',
}

RGB Array

[175, 211, 200], [129, 166, 155], [130, 146, 164], [251, 229, 195], [251, 215, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFD3C8, #81A69B, #8292A4, #FBE5C3, #FBD7C3 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: #afd3c8; --color-2: #81a69b; --color-3: #8292a4; --color-4: #fbe5c3; --color-5: #fbd7c3. 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