← Back to Editor

#FFBE9B · #D1AA9E · #A397A1 · #7483A4 · #466FA7

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

#FFBE9B

Apricot · LightPink · Peach Orange

HEX
#FFBE9B
RGB
rgb(255, 190, 155)
HSL
hsl(21, 100%, 80%)
HSB
hsb(21, 39%, 100%)
CMYK
cmyk(0%, 25%, 39%, 0%)
Oklch
oklch(85.3% 0.089 49.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D1AA9E

Peach Pink · Tan · Coral Red

HEX
#D1AA9E
RGB
rgb(209, 170, 158)
HSL
hsl(14, 36%, 72%)
HSB
hsb(14, 24%, 82%)
CMYK
cmyk(0%, 19%, 24%, 18%)
Oklch
oklch(77.0% 0.049 37.8)

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

#A397A1

Ash · DarkGray · Silver Sand

HEX
#A397A1
RGB
rgb(163, 151, 161)
HSL
hsl(310, 6%, 62%)
HSB
hsb(310, 7%, 64%)
CMYK
cmyk(0%, 7%, 1%, 36%)
Oklch
oklch(69.0% 0.020 331.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#7483A4

Azure · LightSlateGray · Navy Blue

HEX
#7483A4
RGB
rgb(116, 131, 164)
HSL
hsl(221, 21%, 55%)
HSB
hsb(221, 29%, 64%)
CMYK
cmyk(29%, 20%, 0%, 36%)
Oklch
oklch(61.0% 0.053 265.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#466FA7

Indigo · SteelBlue · Navy Blue

HEX
#466FA7
RGB
rgb(70, 111, 167)
HSL
hsl(215, 41%, 46%)
HSB
hsb(215, 58%, 65%)
CMYK
cmyk(58%, 34%, 0%, 35%)
Oklch
oklch(53.7% 0.100 256.5)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBE9B
99DBFF

Analogous

FF99A8
FFBE9B
FFF099

Triadic

FFBE9B
99FFBD
BD99FF

Split-Comp.

FFBE9B
99FFF0
99A8FF

Tetradic

FFBE9B
A8FF99
99DBFF
F099FF

Contrast Matrix WCAG 2.1 Contrast

FFBE9B
D1AA9E
A397A1
7483A4
466FA7
—
1.3
Fail
1.7
Fail
2.4
Fail
3.2
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
3.2
AA Large
2.4
Fail
1.8
Fail
1.4
Fail
—
White BG
1.6Fail
2.1Fail
2.8Fail
3.8AA Large
5.1AA
Black BG
13.1AAA
10.0AAA
7.5AAA
5.5AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E2A3
C0C0A1
9E9E9F
7A7B9C
585899

Deuteranopia

E7ECA6
C2C5A2
9F9F9E
7A789A
555296

Tritanopia

FCAAAC
CFA3A4
A29D9C
759694
488F8C

Achromatopsia

CDCDCD
B4B4B4
9C9C9C
828282
696969

Shades & Tints Shades & Tints

#FFBE9B

Dark
Light

#D1AA9E

Dark
Light

#A397A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbe9b;
  --color-2: #d1aa9e;
  --color-3: #a397a1;
  --color-4: #7483a4;
  --color-5: #466fa7;
}

SCSS

$color-1: #ffbe9b;
$color-2: #d1aa9e;
$color-3: #a397a1;
$color-4: #7483a4;
$color-5: #466fa7;

TAILWIND

colors: {
  'brand-1': '#ffbe9b',
  'brand-2': '#d1aa9e',
  'brand-3': '#a397a1',
  'brand-4': '#7483a4',
  'brand-5': '#466fa7',
}

RGB Array

[255, 190, 155], [209, 170, 158], [163, 151, 161], [116, 131, 164], [70, 111, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBE9B, #D1AA9E, #A397A1, #7483A4, #466FA7 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: #ffbe9b; --color-2: #d1aa9e; --color-3: #a397a1; --color-4: #7483a4; --color-5: #466fa7. 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