← Back to Editor

#F7D8BB · #AC9C82 · #7D7560 · #363024 · #2B241C

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

#F7D8BB

Apricot · Wheat · Peach Orange

HEX
#F7D8BB
RGB
rgb(247, 216, 187)
HSL
hsl(29, 79%, 85%)
HSB
hsb(29, 24%, 97%)
CMYK
cmyk(0%, 13%, 24%, 3%)
Oklch
oklch(90.1% 0.052 65.2)

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

#AC9C82

Ginger · DarkGray · Warm Sun

HEX
#AC9C82
RGB
rgb(172, 156, 130)
HSL
hsl(37, 20%, 59%)
HSB
hsb(37, 24%, 67%)
CMYK
cmyk(0%, 9%, 24%, 33%)
Oklch
oklch(70.0% 0.041 79.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#7D7560

Ochre · DimGray · Honey Gold

HEX
#7D7560
RGB
rgb(125, 117, 96)
HSL
hsl(43, 13%, 43%)
HSB
hsb(43, 23%, 49%)
CMYK
cmyk(0%, 6%, 23%, 51%)
Oklch
oklch(56.4% 0.033 89.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#363024

Ochre · DarkSlateGray · Amber Gold

HEX
#363024
RGB
rgb(54, 48, 36)
HSL
hsl(40, 20%, 18%)
HSB
hsb(40, 33%, 21%)
CMYK
cmyk(0%, 11%, 33%, 79%)
Oklch
oklch(31.2% 0.022 84.5)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#2B241C

Ochre · Black · Cinnamon

HEX
#2B241C
RGB
rgb(43, 36, 28)
HSL
hsl(32, 21%, 14%)
HSB
hsb(32, 35%, 17%)
CMYK
cmyk(0%, 16%, 35%, 83%)
Oklch
oklch(26.6% 0.018 70.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D8BB
BBDAF7

Analogous

F7BBBC
F7D8BB
F7F6BB

Triadic

F7D8BB
BBF7D8
D8BBF7

Split-Comp.

F7D8BB
BBF7F6
BBBCF7

Tetradic

F7D8BB
BCF7BB
BBDAF7
F6BBF7

Contrast Matrix WCAG 2.1 Contrast

F7D8BB
AC9C82
7D7560
363024
2B241C
—
2.0
Fail
3.4
AA Large
9.7
AAA
11.3
AAA
2.0
Fail
—
1.7
Fail
4.9
AA
5.7
AA
3.4
AA Large
1.7
Fail
—
2.9
Fail
3.3
AA Large
9.7
AAA
4.9
AA
2.9
Fail
—
1.2
Fail
11.3
AAA
5.7
AA
3.3
AA Large
1.2
Fail
—
White BG
1.4Fail
2.7Fail
4.6AA
13.1AAA
15.3AAA
Black BG
15.5AAA
7.8AAA
4.6AA
1.6Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAE9C2
A5A588
7A7965
333327
28281E

Deuteranopia

EBEEC4
A6A78A
7A7B66
343428
28291E

Tritanopia

F5C8C9
AB8D8E
7D696A
36292A
2B1F20

Achromatopsia

DEDEDE
9E9E9E
757575
303030
252525

Shades & Tints Shades & Tints

#F7D8BB

Dark
Light

#AC9C82

Dark
Light

#7D7560

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d8bb;
  --color-2: #ac9c82;
  --color-3: #7d7560;
  --color-4: #363024;
  --color-5: #2b241c;
}

SCSS

$color-1: #f7d8bb;
$color-2: #ac9c82;
$color-3: #7d7560;
$color-4: #363024;
$color-5: #2b241c;

TAILWIND

colors: {
  'brand-1': '#f7d8bb',
  'brand-2': '#ac9c82',
  'brand-3': '#7d7560',
  'brand-4': '#363024',
  'brand-5': '#2b241c',
}

RGB Array

[247, 216, 187], [172, 156, 130], [125, 117, 96], [54, 48, 36], [43, 36, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7D8BB, #AC9C82, #7D7560, #363024, #2B241C 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: #f7d8bb; --color-2: #ac9c82; --color-3: #7d7560; --color-4: #363024; --color-5: #2b241c. 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