← Back to Editor

#97BFB7 · #FCE7B8 · #F6C082 · #F89B62 · #FF785B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#97BFB7

Jade · DarkGray · Lake Green

HEX
#97BFB7
RGB
rgb(151, 191, 183)
HSL
hsl(168, 24%, 67%)
HSB
hsb(168, 21%, 75%)
CMYK
cmyk(21%, 0%, 4%, 25%)
Oklch
oklch(77.3% 0.044 181.5)

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

#FCE7B8

Goose Yellow · Wheat · Lemon Cream

HEX
#FCE7B8
RGB
rgb(252, 231, 184)
HSL
hsl(41, 92%, 85%)
HSB
hsb(41, 27%, 99%)
CMYK
cmyk(0%, 8%, 27%, 1%)
Oklch
oklch(93.4% 0.065 86.7)

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

#F6C082

Goose Yellow · BurlyWood · Warm Sun

HEX
#F6C082
RGB
rgb(246, 192, 130)
HSL
hsl(32, 87%, 74%)
HSB
hsb(32, 47%, 96%)
CMYK
cmyk(0%, 22%, 47%, 4%)
Oklch
oklch(84.3% 0.100 69.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F89B62

Apricot · SandyBrown · Warm Sun

HEX
#F89B62
RGB
rgb(248, 155, 98)
HSL
hsl(23, 91%, 68%)
HSB
hsb(23, 60%, 97%)
CMYK
cmyk(0%, 38%, 60%, 3%)
Oklch
oklch(77.3% 0.133 51.2)

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

#FF785B

Peach Pink · Coral · Coral Red

HEX
#FF785B
RGB
rgb(255, 120, 91)
HSL
hsl(11, 100%, 68%)
HSB
hsb(11, 64%, 100%)
CMYK
cmyk(0%, 53%, 64%, 0%)
Oklch
oklch(72.6% 0.171 33.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97BFB7
BF979F

Analogous

97BFA3
97BFB7
97B3BF

Triadic

97BFB7
B797BF
BFB797

Split-Comp.

97BFB7
BF97B3
BFA397

Tetradic

97BFB7
A397BF
BF979F
B3BF97

Contrast Matrix WCAG 2.1 Contrast

97BFB7
FCE7B8
F6C082
F89B62
FF785B
—
1.7
Fail
1.2
Fail
1.1
Fail
1.3
Fail
1.7
Fail
—
1.4
Fail
1.8
Fail
2.1
Fail
1.2
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
1.1
Fail
1.8
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
2.1
Fail
1.6
Fail
1.2
Fail
—
White BG
2.0Fail
1.2Fail
1.6Fail
2.1Fail
2.6Fail
Black BG
10.5AAA
17.3AAA
12.8AAA
9.9AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A9B9
F3F3C3
DFDE91
D0CF70
C5C362

Deuteranopia

A6A3B9
F4F6C6
E2E695
D5DC73
CCD764

Tritanopia

99BABB
FBCCCE
F39D9F
F37B7D
F86869

Achromatopsia

B2B2B2
E8E8E8
C9C9C9
B0B0B0
9D9D9D

Shades & Tints Shades & Tints

#97BFB7

Dark
Light

#FCE7B8

Dark
Light

#F6C082

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97bfb7;
  --color-2: #fce7b8;
  --color-3: #f6c082;
  --color-4: #f89b62;
  --color-5: #ff785b;
}

SCSS

$color-1: #97bfb7;
$color-2: #fce7b8;
$color-3: #f6c082;
$color-4: #f89b62;
$color-5: #ff785b;

TAILWIND

colors: {
  'brand-1': '#97bfb7',
  'brand-2': '#fce7b8',
  'brand-3': '#f6c082',
  'brand-4': '#f89b62',
  'brand-5': '#ff785b',
}

RGB Array

[151, 191, 183], [252, 231, 184], [246, 192, 130], [248, 155, 98], [255, 120, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97BFB7, #FCE7B8, #F6C082, #F89B62, #FF785B is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #97bfb7; --color-2: #fce7b8; --color-3: #f6c082; --color-4: #f89b62; --color-5: #ff785b. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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