← Back to Editor

#DEB4A2 · #FB9E33 · #F06277 · #C7698C · #836E9C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DEB4A2

Apricot · Tan · Warm Sun

HEX
#DEB4A2
RGB
rgb(222, 180, 162)
HSL
hsl(18, 48%, 75%)
HSB
hsb(18, 27%, 87%)
CMYK
cmyk(0%, 19%, 27%, 13%)
Oklch
oklch(80.3% 0.055 44.4)

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

#FB9E33

Ginger · GoldenRod · Warm Sun

HEX
#FB9E33
RGB
rgb(251, 158, 51)
HSL
hsl(32, 96%, 59%)
HSB
hsb(32, 80%, 98%)
CMYK
cmyk(0%, 37%, 80%, 2%)
Oklch
oklch(77.7% 0.158 64.3)

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

#F06277

Peach Pink · LightCoral · Coral Red

HEX
#F06277
RGB
rgb(240, 98, 119)
HSL
hsl(351, 83%, 66%)
HSB
hsb(351, 59%, 94%)
CMYK
cmyk(0%, 59%, 50%, 6%)
Oklch
oklch(68.1% 0.175 14.1)

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

#C7698C

Dark Violet · LightCoral · Rose Pink

HEX
#C7698C
RGB
rgb(199, 105, 140)
HSL
hsl(338, 46%, 60%)
HSB
hsb(338, 47%, 78%)
CMYK
cmyk(0%, 47%, 30%, 22%)
Oklch
oklch(63.9% 0.125 357.6)

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

#836E9C

Deep Indigo · LightSlateGray · Violet

HEX
#836E9C
RGB
rgb(131, 110, 156)
HSL
hsl(267, 19%, 52%)
HSB
hsb(267, 29%, 61%)
CMYK
cmyk(16%, 29%, 0%, 39%)
Oklch
oklch(57.5% 0.073 305.1)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEB4A2
A1CBDE

Analogous

DEA1AD
DEB4A2
DED2A1

Triadic

DEB4A2
A1DEB3
B3A1DE

Split-Comp.

DEB4A2
A1DED2
A1ADDE

Tetradic

DEB4A2
ADDEA1
A1CBDE
D2A1DE

Contrast Matrix WCAG 2.1 Contrast

DEB4A2
FB9E33
F06277
C7698C
836E9C
—
1.1
Fail
1.7
Fail
1.9
Fail
2.4
Fail
1.1
Fail
—
1.5
Fail
1.7
Fail
2.1
Fail
1.7
Fail
1.5
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
2.1
Fail
1.4
Fail
1.2
Fail
—
White BG
1.9Fail
2.1Fail
3.1AA Large
3.6AA Large
4.5AA Large
Black BG
11.2AAA
10.0AAA
6.7AA
5.8AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCBA6
D3D24D
B3B172
9E9D84
7A7A91

Deuteranopia

CED1A7
D8DF53
BBC571
A4AB82
7B7D8E

Tritanopia

DCAAAB
F66166
E96E6D
C27D7B
828886

Achromatopsia

BFBFBF
AEAEAE
8F8F8F
898989
7A7A7A

Shades & Tints Shades & Tints

#DEB4A2

Dark
Light

#FB9E33

Dark
Light

#F06277

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #deb4a2;
  --color-2: #fb9e33;
  --color-3: #f06277;
  --color-4: #c7698c;
  --color-5: #836e9c;
}

SCSS

$color-1: #deb4a2;
$color-2: #fb9e33;
$color-3: #f06277;
$color-4: #c7698c;
$color-5: #836e9c;

TAILWIND

colors: {
  'brand-1': '#deb4a2',
  'brand-2': '#fb9e33',
  'brand-3': '#f06277',
  'brand-4': '#c7698c',
  'brand-5': '#836e9c',
}

RGB Array

[222, 180, 162], [251, 158, 51], [240, 98, 119], [199, 105, 140], [131, 110, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEB4A2, #FB9E33, #F06277, #C7698C, #836E9C 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: #deb4a2; --color-2: #fb9e33; --color-3: #f06277; --color-4: #c7698c; --color-5: #836e9c. 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