← Back to Editor

#F4E4CB · #C5A98D · #998675 · #7F534D · #5F4935

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

#F4E4CB

Goose Yellow · Bisque · Peach Orange

HEX
#F4E4CB
RGB
rgb(244, 228, 203)
HSL
hsl(37, 65%, 88%)
HSB
hsb(37, 17%, 96%)
CMYK
cmyk(0%, 7%, 17%, 4%)
Oklch
oklch(92.5% 0.037 79.1)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

#C5A98D

Ginger · Tan · Warm Sun

HEX
#C5A98D
RGB
rgb(197, 169, 141)
HSL
hsl(30, 33%, 66%)
HSB
hsb(30, 28%, 77%)
CMYK
cmyk(0%, 14%, 28%, 23%)
Oklch
oklch(75.2% 0.051 66.9)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#998675

Tangerine · Gray · Warm Sun

HEX
#998675
RGB
rgb(153, 134, 117)
HSL
hsl(28, 15%, 53%)
HSB
hsb(28, 24%, 60%)
CMYK
cmyk(0%, 12%, 24%, 40%)
Oklch
oklch(63.3% 0.034 64.0)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#7F534D

Crimson · DimGray · Wine Red

HEX
#7F534D
RGB
rgb(127, 83, 77)
HSL
hsl(7, 25%, 40%)
HSB
hsb(7, 39%, 50%)
CMYK
cmyk(0%, 35%, 39%, 50%)
Oklch
oklch(48.9% 0.060 28.0)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

#5F4935

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5F4935
RGB
rgb(95, 73, 53)
HSL
hsl(29, 28%, 29%)
HSB
hsb(29, 44%, 37%)
CMYK
cmyk(0%, 23%, 44%, 63%)
Oklch
oklch(42.3% 0.043 63.5)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E4CB
CDDCF4

Analogous

F4D1CD
F4E4CB
F0F4CD

Triadic

F4E4CB
CDF4E5
E5CDF4

Split-Comp.

F4E4CB
CDF0F4
D1CDF4

Tetradic

F4E4CB
CDF4D1
CDDCF4
F4CDF0

Contrast Matrix WCAG 2.1 Contrast

F4E4CB
C5A98D
998675
7F534D
5F4935
1.8
Fail
2.8
Fail
5.2
AA
6.7
AA
1.8
Fail
1.6
Fail
2.9
Fail
3.8
AA Large
2.8
Fail
1.6
Fail
1.9
Fail
2.4
Fail
5.2
AA
2.9
Fail
1.9
Fail
1.3
Fail
6.7
AA
3.8
AA Large
2.4
Fail
1.3
Fail
White BG
1.2Fail
2.2Fail
3.5AA Large
6.5AA
8.4AAA
Black BG
16.8AAA
9.4AAA
6.0AA
3.2AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDD1
B9B994
919179
6C6C4E
55553A

Deuteranopia

EEEFD3
BBBD95
92937A
6F724F
57583B

Tritanopia

F3D6D7
C4999A
987C7D
7D5050
5E3E3F

Achromatopsia

E6E6E6
AEAEAE
8A8A8A
5F5F5F
4D4D4D

Shades & Tints Shades & Tints

#F4E4CB

Dark
Light

#C5A98D

Dark
Light

#998675

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e4cb;
  --color-2: #c5a98d;
  --color-3: #998675;
  --color-4: #7f534d;
  --color-5: #5f4935;
}

SCSS

$color-1: #f4e4cb;
$color-2: #c5a98d;
$color-3: #998675;
$color-4: #7f534d;
$color-5: #5f4935;

TAILWIND

colors: {
  'brand-1': '#f4e4cb',
  'brand-2': '#c5a98d',
  'brand-3': '#998675',
  'brand-4': '#7f534d',
  'brand-5': '#5f4935',
}

RGB Array

[244, 228, 203], [197, 169, 141], [153, 134, 117], [127, 83, 77], [95, 73, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E4CB, #C5A98D, #998675, #7F534D, #5F4935 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: #f4e4cb; --color-2: #c5a98d; --color-3: #998675; --color-4: #7f534d; --color-5: #5f4935. 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