#AFC2CC + #EBE1CA + #FCBB86 + #FC8686 + #A67E82 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFC2CC

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#AFC2CC

RGB

rgb(175, 194, 204)

HSL

hsl(201, 22%, 74%)

HSB

hsb(201, 14%, 80%)

CMYK

cmyk(14%, 5%, 0%, 20%)

Oklch

oklch(80.3% 0.025 230.5)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#EBE1CA

Goose Yellow · Bisque · Lemon Cream

HEX

#EBE1CA

RGB

rgb(235, 225, 202)

HSL

hsl(42, 45%, 86%)

HSB

hsb(42, 14%, 92%)

CMYK

cmyk(0%, 4%, 14%, 8%)

Oklch

oklch(91.2% 0.032 87.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FCBB86

Apricot · LightSalmon · Peach Orange

HEX

#FCBB86

RGB

rgb(252, 187, 134)

HSL

hsl(27, 95%, 76%)

HSB

hsb(27, 47%, 99%)

CMYK

cmyk(0%, 26%, 47%, 1%)

Oklch

oklch(84.0% 0.102 60.0)

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

#FC8686

Peach Pink · LightCoral · Coral Red

HEX

#FC8686

RGB

rgb(252, 134, 134)

HSL

hsl(0, 95%, 76%)

HSB

hsb(0, 47%, 99%)

CMYK

cmyk(0%, 47%, 47%, 1%)

Oklch

oklch(75.1% 0.144 21.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A67E82

Crimson · Gray · Passion Red

HEX

#A67E82

RGB

rgb(166, 126, 130)

HSL

hsl(354, 18%, 57%)

HSB

hsb(354, 24%, 65%)

CMYK

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

Oklch

oklch(63.3% 0.050 11.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFC2CC

CBB8AE

Analogous

AECBC7

AFC2CC

AEB2CB

Triadic

AFC2CC

CBAEC1

C1CBAE

Split-Comp.

AFC2CC

CBAEB2

CBC7AE

Tetradic

AFC2CC

C7AECB

CBB8AE

B2CBAE

Contrast Matrix WCAG 2.1 Contrast

AFC2CC	EBE1CA	FCBB86	FC8686	A67E82
—	1.4 Fail	1.1 Fail	1.3 Fail	1.9 Fail
1.4 Fail	—	1.3 Fail	1.8 Fail	2.7 Fail
1.1 Fail	1.3 Fail	—	1.4 Fail	2.1 Fail
1.3 Fail	1.8 Fail	1.4 Fail	—	1.5 Fail
1.9 Fail	2.7 Fail	2.1 Fail	1.5 Fail	—

White BG

1.8Fail

1.3Fail

1.7Fail

2.4Fail

3.5AA Large

Black BG

11.4AAA

16.2AAA

12.6AAA

8.9AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7CA

E7E7D0

E0DF93

C9C886

959481

Deuteranopia

B6B5C9

E7E8D1

E4E896

D0D986

979A81

Tritanopia

B0C8C7

EBD4D5

F99D9F

F68686

A48080

Achromatopsia

BDBDBD

E1E1E1

C8C8C8

A9A9A9

8A8A8A

Shades & Tints Shades & Tints

#AFC2CC

Dark

Light

#EBE1CA

Dark

Light

#FCBB86

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afc2cc;
  --color-2: #ebe1ca;
  --color-3: #fcbb86;
  --color-4: #fc8686;
  --color-5: #a67e82;
}

SCSS

$color-1: #afc2cc;
$color-2: #ebe1ca;
$color-3: #fcbb86;
$color-4: #fc8686;
$color-5: #a67e82;

TAILWIND

colors: {
  'brand-1': '#afc2cc',
  'brand-2': '#ebe1ca',
  'brand-3': '#fcbb86',
  'brand-4': '#fc8686',
  'brand-5': '#a67e82',
}

RGB Array

[175, 194, 204], [235, 225, 202], [252, 187, 134], [252, 134, 134], [166, 126, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFC2CC, #EBE1CA, #FCBB86, #FC8686, #A67E82 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: #afc2cc; --color-2: #ebe1ca; --color-3: #fcbb86; --color-4: #fc8686; --color-5: #a67e82. 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