← Back to Editor

#B9AF5A · #CD8A6D · #DD696C · #F94222 · #884E77

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

#B9AF5A

Autumn Sage · Tan · Sunflower

HEX
#B9AF5A
RGB
rgb(185, 175, 90)
HSL
hsl(54, 40%, 54%)
HSB
hsb(54, 51%, 73%)
CMYK
cmyk(0%, 5%, 51%, 27%)
Oklch
oklch(74.4% 0.108 102.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CD8A6D

Apricot · DarkSalmon · Warm Sun

HEX
#CD8A6D
RGB
rgb(205, 138, 109)
HSL
hsl(18, 49%, 62%)
HSB
hsb(18, 47%, 80%)
CMYK
cmyk(0%, 33%, 47%, 20%)
Oklch
oklch(69.4% 0.092 44.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DD696C

Peach Pink · LightCoral · Coral Red

HEX
#DD696C
RGB
rgb(221, 105, 108)
HSL
hsl(358, 63%, 64%)
HSB
hsb(358, 52%, 87%)
CMYK
cmyk(0%, 52%, 51%, 13%)
Oklch
oklch(66.0% 0.145 20.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F94222

Vermilion · OrangeRed · Passion Red

HEX
#F94222
RGB
rgb(249, 66, 34)
HSL
hsl(9, 95%, 55%)
HSB
hsb(9, 86%, 98%)
CMYK
cmyk(0%, 73%, 86%, 2%)
Oklch
oklch(64.9% 0.223 32.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#884E77

Rose Purple · DimGray · Violet

HEX
#884E77
RGB
rgb(136, 78, 119)
HSL
hsl(318, 27%, 42%)
HSB
hsb(318, 43%, 53%)
CMYK
cmyk(0%, 43%, 12%, 47%)
Oklch
oklch(50.6% 0.095 338.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9AF5A
5B64B9

Analogous

B9805B
B9AF5A
93B95B

Triadic

B9AF5A
5BB9AF
AF5BB9

Split-Comp.

B9AF5A
5B93B9
805BB9

Tetradic

B9AF5A
5BB980
5B64B9
B95B93

Contrast Matrix WCAG 2.1 Contrast

B9AF5A
CD8A6D
DD696C
F94222
884E77
—
1.3
Fail
1.5
Fail
1.6
Fail
2.7
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
2.2
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.9
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
1.7
Fail
2.7
Fail
2.2
Fail
1.9
Fail
1.7
Fail
—
White BG
2.2Fail
2.8Fail
3.3AA Large
3.6AA Large
6.2AA
Black BG
9.3AAA
7.5AAA
6.3AA
5.8AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B56F
B0AF74
ABAA6B
AAA82A
6F6E6D

Deuteranopia

B5B674
B4B976
B2BA6B
B4C22C
72776B

Tritanopia

B97F82
CA7A7B
D76B6B
F03031
856564

Achromatopsia

A8A8A8
9B9B9B
8C8C8C
757575
646464

Shades & Tints Shades & Tints

#B9AF5A

Dark
Light

#CD8A6D

Dark
Light

#DD696C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9af5a;
  --color-2: #cd8a6d;
  --color-3: #dd696c;
  --color-4: #f94222;
  --color-5: #884e77;
}

SCSS

$color-1: #b9af5a;
$color-2: #cd8a6d;
$color-3: #dd696c;
$color-4: #f94222;
$color-5: #884e77;

TAILWIND

colors: {
  'brand-1': '#b9af5a',
  'brand-2': '#cd8a6d',
  'brand-3': '#dd696c',
  'brand-4': '#f94222',
  'brand-5': '#884e77',
}

RGB Array

[185, 175, 90], [205, 138, 109], [221, 105, 108], [249, 66, 34], [136, 78, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9AF5A, #CD8A6D, #DD696C, #F94222, #884E77 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: #b9af5a; --color-2: #cd8a6d; --color-3: #dd696c; --color-4: #f94222; --color-5: #884e77. 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