← Back to Editor

#FFE0B5 · #DEA678 · #CC7A87 · #B3628A · #3F6670

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 LibraryData Visualization

Color Details Color Details

#FFE0B5

Goose Yellow · Wheat · Peach Orange

HEX
#FFE0B5
RGB
rgb(255, 224, 181)
HSL
hsl(35, 100%, 85%)
HSB
hsb(35, 29%, 100%)
CMYK
cmyk(0%, 12%, 29%, 0%)
Oklch
oklch(92.2% 0.066 75.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DEA678

Apricot · DarkSalmon · Warm Sun

HEX
#DEA678
RGB
rgb(222, 166, 120)
HSL
hsl(27, 61%, 67%)
HSB
hsb(27, 46%, 87%)
CMYK
cmyk(0%, 25%, 46%, 13%)
Oklch
oklch(76.7% 0.090 60.3)

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

#CC7A87

Peach Pink · LightCoral · Coral Red

HEX
#CC7A87
RGB
rgb(204, 122, 135)
HSL
hsl(350, 45%, 64%)
HSB
hsb(350, 40%, 80%)
CMYK
cmyk(0%, 40%, 34%, 20%)
Oklch
oklch(67.1% 0.103 10.0)

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

#B3628A

Dark Violet · Gray · Rose Pink

HEX
#B3628A
RGB
rgb(179, 98, 138)
HSL
hsl(330, 35%, 54%)
HSB
hsb(330, 45%, 70%)
CMYK
cmyk(0%, 45%, 23%, 30%)
Oklch
oklch(60.1% 0.115 350.1)

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

#3F6670

Slate Blue · DimGray · Mint Ice

HEX
#3F6670
RGB
rgb(63, 102, 112)
HSL
hsl(192, 28%, 34%)
HSB
hsb(192, 44%, 44%)
CMYK
cmyk(44%, 9%, 0%, 56%)
Oklch
oklch(48.5% 0.047 215.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE0B5
B3D2FF

Analogous

FFB9B3
FFE0B5
F9FFB3

Triadic

FFE0B5
B3FFDF
DFB3FF

Split-Comp.

FFE0B5
B3F9FF
B9B3FF

Tetradic

FFE0B5
B3FFB9
B3D2FF
FFB3F9

Contrast Matrix WCAG 2.1 Contrast

FFE0B5
DEA678
CC7A87
B3628A
3F6670
—
1.7
Fail
2.5
Fail
3.3
AA Large
5.0
AA
1.7
Fail
—
1.5
Fail
2.0
Fail
2.9
Fail
2.5
Fail
1.5
Fail
—
1.3
Fail
2.0
Fail
3.3
AA Large
2.0
Fail
1.3
Fail
—
1.5
Fail
5.0
AA
2.9
Fail
2.0
Fail
1.5
Fail
—
White BG
1.3Fail
2.1Fail
3.1AA Large
4.2AA Large
6.3AA
Black BG
16.6AAA
9.8AAA
6.7AA
5.0AA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F1BF
C6C583
A8A884
908F80
50506E

Deuteranopia

F3F6C2
C9CD86
ADB383
959B7E
4E4B6D

Tritanopia

FDC8C9
DB8C8E
C88181
AF7977
416C6B

Achromatopsia

E4E4E4
B2B2B2
949494
7F7F7F
5B5B5B

Shades & Tints Shades & Tints

#FFE0B5

Dark
Light

#DEA678

Dark
Light

#CC7A87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe0b5;
  --color-2: #dea678;
  --color-3: #cc7a87;
  --color-4: #b3628a;
  --color-5: #3f6670;
}

SCSS

$color-1: #ffe0b5;
$color-2: #dea678;
$color-3: #cc7a87;
$color-4: #b3628a;
$color-5: #3f6670;

TAILWIND

colors: {
  'brand-1': '#ffe0b5',
  'brand-2': '#dea678',
  'brand-3': '#cc7a87',
  'brand-4': '#b3628a',
  'brand-5': '#3f6670',
}

RGB Array

[255, 224, 181], [222, 166, 120], [204, 122, 135], [179, 98, 138], [63, 102, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE0B5, #DEA678, #CC7A87, #B3628A, #3F6670 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: #ffe0b5; --color-2: #dea678; --color-3: #cc7a87; --color-4: #b3628a; --color-5: #3f6670. 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