#F7C2AB + #F7F4AD + #96D6CE + #8A8DDB + #A06FBF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7C2AB

Apricot · LightPink · Peach Orange

HEX

#F7C2AB

RGB

rgb(247, 194, 171)

HSL

hsl(18, 83%, 82%)

HSB

hsb(18, 31%, 97%)

CMYK

cmyk(0%, 21%, 31%, 3%)

Oklch

oklch(85.5% 0.069 44.6)

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

#F7F4AD

Fresh Green · Wheat · Lemon Cream

HEX

#F7F4AD

RGB

rgb(247, 244, 173)

HSL

hsl(58, 82%, 82%)

HSB

hsb(58, 30%, 97%)

CMYK

cmyk(0%, 1%, 30%, 3%)

Oklch

oklch(95.3% 0.090 105.9)

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

#96D6CE

Jade · LightBlue · Lake Green

HEX

#96D6CE

RGB

rgb(150, 214, 206)

HSL

hsl(173, 44%, 71%)

HSB

hsb(173, 30%, 84%)

CMYK

cmyk(30%, 0%, 4%, 16%)

Oklch

oklch(83.1% 0.066 186.3)

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

#8A8DDB

Azure · CornflowerBlue · Cobalt Blue

HEX

#8A8DDB

RGB

rgb(138, 141, 219)

HSL

hsl(238, 53%, 70%)

HSB

hsb(238, 37%, 86%)

CMYK

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

Oklch

oklch(67.3% 0.115 281.2)

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

#A06FBF

Dark Plum · MediumOrchid · Violet

HEX

#A06FBF

RGB

rgb(160, 111, 191)

HSL

hsl(277, 38%, 59%)

HSB

hsb(277, 42%, 75%)

CMYK

cmyk(16%, 42%, 0%, 25%)

Oklch

oklch(62.3% 0.128 311.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7C2AB

ABE0F7

Analogous

F7ABBA

F7C2AB

F7E8AB

Triadic

F7C2AB

ABF7C2

C2ABF7

Split-Comp.

F7C2AB

ABF7E8

ABBAF7

Tetradic

F7C2AB

BAF7AB

ABE0F7

E8ABF7

Contrast Matrix WCAG 2.1 Contrast

F7C2AB	F7F4AD	96D6CE	8A8DDB	A06FBF
—	1.4 Fail	1.0 Fail	1.9 Fail	2.4 Fail
1.4 Fail	—	1.4 Fail	2.7 Fail	3.4 AA Large
1.0 Fail	1.4 Fail	—	1.9 Fail	2.3 Fail
1.9 Fail	2.7 Fail	1.9 Fail	—	1.3 Fail
2.4 Fail	3.4 AA Large	2.3 Fail	1.3 Fail	—

White BG

1.6Fail

1.1Fail

1.6Fail

3.0AA Large

3.8AA Large

Black BG

13.3AAA

18.5AAA

12.8AAA

6.9AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0B1

F6F6BE

B2B2D0

8B8BC8

8B8AAC

Deuteranopia

E3E7B2

F6F6C2

AEA9D0

8B8BC4

8E91A7

Tritanopia

F4B5B6

F7CCCF

99D1D2

8AB9B6

9E9C99

Achromatopsia

CFCFCF

EDEDED

C2C2C2

959595

878787

Shades & Tints Shades & Tints

#F7C2AB

Dark

Light

#F7F4AD

Dark

Light

#96D6CE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7c2ab;
  --color-2: #f7f4ad;
  --color-3: #96d6ce;
  --color-4: #8a8ddb;
  --color-5: #a06fbf;
}

SCSS

$color-1: #f7c2ab;
$color-2: #f7f4ad;
$color-3: #96d6ce;
$color-4: #8a8ddb;
$color-5: #a06fbf;

TAILWIND

colors: {
  'brand-1': '#f7c2ab',
  'brand-2': '#f7f4ad',
  'brand-3': '#96d6ce',
  'brand-4': '#8a8ddb',
  'brand-5': '#a06fbf',
}

RGB Array

[247, 194, 171], [247, 244, 173], [150, 214, 206], [138, 141, 219], [160, 111, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7C2AB, #F7F4AD, #96D6CE, #8A8DDB, #A06FBF 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: #f7c2ab; --color-2: #f7f4ad; --color-3: #96d6ce; --color-4: #8a8ddb; --color-5: #a06fbf. 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