← Back to Editor

#826C5B · #8F4779 · #F22B81 · #FBA199 · #B1AC8C

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 Library

Color Details Color Details

#826C5B

Tangerine · DimGray · Amber Brown

HEX
#826C5B
RGB
rgb(130, 108, 91)
HSL
hsl(26, 18%, 43%)
HSB
hsb(26, 30%, 51%)
CMYK
cmyk(0%, 17%, 30%, 49%)
Oklch
oklch(54.8% 0.038 59.6)

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

#8F4779

Rose Purple · DimGray · Violet

HEX
#8F4779
RGB
rgb(143, 71, 121)
HSL
hsl(318, 34%, 42%)
HSB
hsb(318, 50%, 56%)
CMYK
cmyk(0%, 50%, 15%, 44%)
Oklch
oklch(50.4% 0.116 340.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#F22B81

Dark Violet · DeepPink · Rose Pink

HEX
#F22B81
RGB
rgb(242, 43, 129)
HSL
hsl(334, 88%, 56%)
HSB
hsb(334, 82%, 95%)
CMYK
cmyk(0%, 82%, 47%, 5%)
Oklch
oklch(63.6% 0.235 1.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FBA199

Peach Pink · LightSalmon · Coral Red

HEX
#FBA199
RGB
rgb(251, 161, 153)
HSL
hsl(5, 92%, 79%)
HSB
hsb(5, 39%, 98%)
CMYK
cmyk(0%, 36%, 39%, 2%)
Oklch
oklch(79.7% 0.109 25.3)

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

#B1AC8C

Fresh Green · DarkGray · Sunflower

HEX
#B1AC8C
RGB
rgb(177, 172, 140)
HSL
hsl(52, 19%, 62%)
HSB
hsb(52, 21%, 69%)
CMYK
cmyk(0%, 3%, 21%, 31%)
Oklch
oklch(74.0% 0.045 100.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

826C5B
5A7081

Analogous

815A5D
826C5B
817F5A

Triadic

826C5B
5A816B
6B5A81

Split-Comp.

826C5B
5A817F
5A5D81

Tetradic

826C5B
5D815A
5A7081
7F5A81

Contrast Matrix WCAG 2.1 Contrast

826C5B
8F4779
F22B81
FBA199
B1AC8C
—
1.3
Fail
1.3
Fail
2.5
Fail
2.2
Fail
1.3
Fail
—
1.6
Fail
3.2
AA Large
2.7
Fail
1.3
Fail
1.6
Fail
—
2.0
Fail
1.7
Fail
2.5
Fail
3.2
AA Large
2.0
Fail
—
1.2
Fail
2.2
Fail
2.7
Fail
1.7
Fail
1.2
Fail
—
White BG
4.9AA
6.3AA
3.9AA Large
2.0Fail
2.3Fail
Black BG
4.2AA Large
3.3AA Large
5.4AA
10.7AAA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

78785F
706F6D
9C9A6C
D4D39B
AFAF94

Deuteranopia

7A7B60
74796A
A7B667
D9E09B
AFB096

Tritanopia

816263
8B6361
E85C58
F79C9D
B19A9B

Achromatopsia

717171
626262
707070
BBBBBB
AAAAAA

Shades & Tints Shades & Tints

#826C5B

Dark
Light

#8F4779

Dark
Light

#F22B81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #826c5b;
  --color-2: #8f4779;
  --color-3: #f22b81;
  --color-4: #fba199;
  --color-5: #b1ac8c;
}

SCSS

$color-1: #826c5b;
$color-2: #8f4779;
$color-3: #f22b81;
$color-4: #fba199;
$color-5: #b1ac8c;

TAILWIND

colors: {
  'brand-1': '#826c5b',
  'brand-2': '#8f4779',
  'brand-3': '#f22b81',
  'brand-4': '#fba199',
  'brand-5': '#b1ac8c',
}

RGB Array

[130, 108, 91], [143, 71, 121], [242, 43, 129], [251, 161, 153], [177, 172, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #826C5B, #8F4779, #F22B81, #FBA199, #B1AC8C is ideal for: corporate websites, product showcases, portfolios. 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: #826c5b; --color-2: #8f4779; --color-3: #f22b81; --color-4: #fba199; --color-5: #b1ac8c. 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. 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