← Back to Editor

#F77777 · #4D3C38 · #F2C213 · #F7F1DA · #B8DBC7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F77777

Peach Pink · Salmon · Coral Red

HEX
#F77777
RGB
rgb(247, 119, 119)
HSL
hsl(0, 89%, 72%)
HSB
hsb(0, 52%, 97%)
CMYK
cmyk(0%, 52%, 52%, 3%)
Oklch
oklch(71.9% 0.157 21.8)

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

#4D3C38

Crimson · DarkSlateGray · Wine Red

HEX
#4D3C38
RGB
rgb(77, 60, 56)
HSL
hsl(11, 16%, 26%)
HSB
hsb(11, 27%, 30%)
CMYK
cmyk(0%, 22%, 27%, 70%)
Oklch
oklch(37.3% 0.025 33.5)

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

#F2C213

Ginger · Gold · Sunflower

HEX
#F2C213
RGB
rgb(242, 194, 19)
HSL
hsl(47, 90%, 51%)
HSB
hsb(47, 92%, 95%)
CMYK
cmyk(0%, 20%, 92%, 5%)
Oklch
oklch(83.3% 0.168 90.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F7F1DA

Goose Yellow · Beige · Lemon Cream

HEX
#F7F1DA
RGB
rgb(247, 241, 218)
HSL
hsl(48, 64%, 91%)
HSB
hsb(48, 12%, 97%)
CMYK
cmyk(0%, 2%, 12%, 3%)
Oklch
oklch(95.7% 0.031 94.9)

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

#B8DBC7

Celadon · Silver · Apple Green

HEX
#B8DBC7
RGB
rgb(184, 219, 199)
HSL
hsl(146, 33%, 79%)
HSB
hsb(146, 16%, 86%)
CMYK
cmyk(16%, 0%, 9%, 14%)
Oklch
oklch(86.0% 0.046 160.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F77777
78F7F7

Analogous

F778B8
F77777
F7B878

Triadic

F77777
78F778
7878F7

Split-Comp.

F77777
78F7B8
78B8F7

Tetradic

F77777
B8F778
78F7F7
B878F7

Contrast Matrix WCAG 2.1 Contrast

F77777
4D3C38
F2C213
F7F1DA
B8DBC7
—
3.9
AA Large
1.6
Fail
2.4
Fail
1.8
Fail
3.9
AA Large
—
6.2
AA
9.2
AAA
6.9
AA
1.6
Fail
6.2
AA
—
1.5
Fail
1.1
Fail
2.4
Fail
9.2
AAA
1.5
Fail
—
1.3
Fail
1.8
Fail
6.9
AA
1.1
Fail
1.3
Fail
—
White BG
2.7Fail
10.4AAA
1.7Fail
1.1Fail
1.5Fail
Black BG
7.9AAA
2.0Fail
12.5AAA
18.5AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BE77
464539
DDDD3D
F4F4E0
C7C7CC

Deuteranopia

C7D177
474839
E0E448
F5F5E1
C5C3CD

Tritanopia

F17777
4C3A3A
F05F66
F7E4E5
BAD0D1

Achromatopsia

9D9D9D
414141
BCBCBC
F0F0F0
CECECE

Shades & Tints Shades & Tints

#F77777

Dark
Light

#4D3C38

Dark
Light

#F2C213

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f77777;
  --color-2: #4d3c38;
  --color-3: #f2c213;
  --color-4: #f7f1da;
  --color-5: #b8dbc7;
}

SCSS

$color-1: #f77777;
$color-2: #4d3c38;
$color-3: #f2c213;
$color-4: #f7f1da;
$color-5: #b8dbc7;

TAILWIND

colors: {
  'brand-1': '#f77777',
  'brand-2': '#4d3c38',
  'brand-3': '#f2c213',
  'brand-4': '#f7f1da',
  'brand-5': '#b8dbc7',
}

RGB Array

[247, 119, 119], [77, 60, 56], [242, 194, 19], [247, 241, 218], [184, 219, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F77777, #4D3C38, #F2C213, #F7F1DA, #B8DBC7 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f77777; --color-2: #4d3c38; --color-3: #f2c213; --color-4: #f7f1da; --color-5: #b8dbc7. 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 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