← Back to Editor

#FB8D83 · #33291F · #6F6F1F · #83A183 · #DDE7B5

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

#FB8D83

Peach Pink · LightCoral · Coral Red

HEX
#FB8D83
RGB
rgb(251, 141, 131)
HSL
hsl(5, 94%, 75%)
HSB
hsb(5, 48%, 98%)
CMYK
cmyk(0%, 44%, 48%, 2%)
Oklch
oklch(76.0% 0.135 26.2)

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

#33291F

Ochre · DarkSlateGray · Cinnamon

HEX
#33291F
RGB
rgb(51, 41, 31)
HSL
hsl(30, 24%, 16%)
HSB
hsb(30, 39%, 20%)
CMYK
cmyk(0%, 20%, 39%, 80%)
Oklch
oklch(28.9% 0.023 66.7)

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

#6F6F1F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#6F6F1F
RGB
rgb(111, 111, 31)
HSL
hsl(60, 56%, 28%)
HSB
hsb(60, 72%, 44%)
CMYK
cmyk(0%, 0%, 72%, 56%)
Oklch
oklch(52.6% 0.100 109.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#83A183

Celadon · DarkSeaGreen · Olive Green

HEX
#83A183
RGB
rgb(131, 161, 131)
HSL
hsl(120, 14%, 57%)
HSB
hsb(120, 19%, 63%)
CMYK
cmyk(19%, 0%, 19%, 37%)
Oklch
oklch(67.8% 0.055 144.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#DDE7B5

Willow Green · Wheat · Mint Green

HEX
#DDE7B5
RGB
rgb(221, 231, 181)
HSL
hsl(72, 51%, 81%)
HSB
hsb(72, 22%, 91%)
CMYK
cmyk(4%, 0%, 22%, 9%)
Oklch
oklch(90.8% 0.067 116.9)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB8D83
83F1FB

Analogous

FB83B5
FB8D83
FBC983

Triadic

FB8D83
83FB8D
8D83FB

Split-Comp.

FB8D83
83FBC9
83B5FB

Tetradic

FB8D83
B5FB83
83F1FB
C983FB

Contrast Matrix WCAG 2.1 Contrast

FB8D83
33291F
6F6F1F
83A183
DDE7B5
—
6.3
AA
2.3
Fail
1.3
Fail
1.8
Fail
6.3
AA
—
2.7
Fail
5.0
AA
10.9
AAA
2.3
Fail
2.7
Fail
—
1.9
Fail
4.1
AA Large
1.3
Fail
5.0
AA
1.9
Fail
—
2.2
Fail
1.8
Fail
10.9
AAA
4.1
AA Large
2.2
Fail
—
White BG
2.3Fail
14.2AAA
5.3AA
2.8Fail
1.3Fail
Black BG
9.2AAA
1.5Fail
4.0AA Large
7.4AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA85
2F2F21
6F6F32
90908A
E1E1C1

Deuteranopia

D2DA86
2F3022
6F6F37
8E8C8C
E1E0C4

Tritanopia

F68788
322324
6F4245
859091
DECBCD

Achromatopsia

ADADAD
2B2B2B
666666
959595
DEDEDE

Shades & Tints Shades & Tints

#FB8D83

Dark
Light

#33291F

Dark
Light

#6F6F1F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb8d83;
  --color-2: #33291f;
  --color-3: #6f6f1f;
  --color-4: #83a183;
  --color-5: #dde7b5;
}

SCSS

$color-1: #fb8d83;
$color-2: #33291f;
$color-3: #6f6f1f;
$color-4: #83a183;
$color-5: #dde7b5;

TAILWIND

colors: {
  'brand-1': '#fb8d83',
  'brand-2': '#33291f',
  'brand-3': '#6f6f1f',
  'brand-4': '#83a183',
  'brand-5': '#dde7b5',
}

RGB Array

[251, 141, 131], [51, 41, 31], [111, 111, 31], [131, 161, 131], [221, 231, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FB8D83, #33291F, #6F6F1F, #83A183, #DDE7B5 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: #fb8d83; --color-2: #33291f; --color-3: #6f6f1f; --color-4: #83a183; --color-5: #dde7b5. 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