← Back to Editor

#F76754 · #F79554 · #FCCA75 · #55443D · #B2C9B3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F76754

Peach Pink · Tomato · Coral Red

HEX
#F76754
RGB
rgb(247, 103, 84)
HSL
hsl(7, 91%, 65%)
HSB
hsb(7, 66%, 97%)
CMYK
cmyk(0%, 58%, 66%, 3%)
Oklch
oklch(69.1% 0.181 29.9)

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

#F79554

Apricot · SandyBrown · Warm Sun

HEX
#F79554
RGB
rgb(247, 149, 84)
HSL
hsl(24, 91%, 65%)
HSB
hsb(24, 66%, 97%)
CMYK
cmyk(0%, 40%, 66%, 3%)
Oklch
oklch(76.0% 0.143 52.5)

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

#FCCA75

Goose Yellow · Khaki · Warm Sun

HEX
#FCCA75
RGB
rgb(252, 202, 117)
HSL
hsl(38, 96%, 72%)
HSB
hsb(38, 54%, 99%)
CMYK
cmyk(0%, 20%, 54%, 1%)
Oklch
oklch(86.6% 0.118 79.5)

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

#55443D

Tangerine · DarkOliveGreen · Amber Brown

HEX
#55443D
RGB
rgb(85, 68, 61)
HSL
hsl(17, 16%, 29%)
HSB
hsb(17, 28%, 33%)
CMYK
cmyk(0%, 20%, 28%, 67%)
Oklch
oklch(40.2% 0.026 43.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B2C9B3

Celadon · Silver · Apple Green

HEX
#B2C9B3
RGB
rgb(178, 201, 179)
HSL
hsl(123, 18%, 74%)
HSB
hsb(123, 11%, 79%)
CMYK
cmyk(11%, 0%, 11%, 21%)
Oklch
oklch(81.2% 0.039 146.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F76754
55E4F7

Analogous

F75593
F76754
F7B955

Triadic

F76754
55F767
6755F7

Split-Comp.

F76754
55F7B9
5593F7

Tetradic

F76754
93F755
55E4F7
B955F7

Contrast Matrix WCAG 2.1 Contrast

F76754
F79554
FCCA75
55443D
B2C9B3
—
1.3
Fail
2.0
Fail
3.1
AA Large
1.7
Fail
1.3
Fail
—
1.5
Fail
4.1
AA Large
1.3
Fail
2.0
Fail
1.5
Fail
—
6.1
AA
1.2
Fail
3.1
AA Large
4.1
AA Large
6.1
AA
—
5.2
AA
1.7
Fail
1.3
Fail
1.2
Fail
5.2
AA
—
White BG
3.0Fail
2.2Fail
1.5Fail
9.2AAA
1.8Fail
Black BG
7.0AAA
9.4AAA
13.8AAA
2.3Fail
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B759
CDCC64
E6E68A
4E4D3F
BCBCB8

Deuteranopia

C1CC5A
D2DA68
E9ED8F
4F503F
BBB9BA

Tritanopia

F05C5D
F27073
F99A9D
544040
B3BDBD

Achromatopsia

909090
ABABAB
CFCFCF
484848
C0C0C0

Shades & Tints Shades & Tints

#F76754

Dark
Light

#F79554

Dark
Light

#FCCA75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f76754;
  --color-2: #f79554;
  --color-3: #fcca75;
  --color-4: #55443d;
  --color-5: #b2c9b3;
}

SCSS

$color-1: #f76754;
$color-2: #f79554;
$color-3: #fcca75;
$color-4: #55443d;
$color-5: #b2c9b3;

TAILWIND

colors: {
  'brand-1': '#f76754',
  'brand-2': '#f79554',
  'brand-3': '#fcca75',
  'brand-4': '#55443d',
  'brand-5': '#b2c9b3',
}

RGB Array

[247, 103, 84], [247, 149, 84], [252, 202, 117], [85, 68, 61], [178, 201, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F76754, #F79554, #FCCA75, #55443D, #B2C9B3 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #f76754; --color-2: #f79554; --color-3: #fcca75; --color-4: #55443d; --color-5: #b2c9b3. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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