← Back to Editor

#FFFBF5 · #AF8092 · #7F5D6B · #4E3A43 · #B1C4E0

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

#FFFBF5

Goose Yellow · Snow · Peach Orange

HEX
#FFFBF5
RGB
rgb(255, 251, 245)
HSL
hsl(36, 100%, 98%)
HSB
hsb(36, 4%, 100%)
CMYK
cmyk(0%, 2%, 4%, 0%)
Oklch
oklch(99.0% 0.009 78.3)

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

#AF8092

Dark Violet · DarkGray · Rose Pink

HEX
#AF8092
RGB
rgb(175, 128, 146)
HSL
hsl(337, 23%, 59%)
HSB
hsb(337, 27%, 69%)
CMYK
cmyk(0%, 27%, 17%, 31%)
Oklch
oklch(65.1% 0.063 354.2)

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

#7F5D6B

Dark Violet · DimGray · Camellia

HEX
#7F5D6B
RGB
rgb(127, 93, 107)
HSL
hsl(335, 15%, 43%)
HSB
hsb(335, 27%, 50%)
CMYK
cmyk(0%, 27%, 16%, 50%)
Oklch
oklch(51.8% 0.049 352.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#4E3A43

Dark Violet · DarkSlateGray · Camellia

HEX
#4E3A43
RGB
rgb(78, 58, 67)
HSL
hsl(333, 15%, 27%)
HSB
hsb(333, 26%, 31%)
CMYK
cmyk(0%, 26%, 14%, 69%)
Oklch
oklch(37.4% 0.032 350.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#B1C4E0

Azure · LightSteelBlue · Cobalt Blue

HEX
#B1C4E0
RGB
rgb(177, 196, 224)
HSL
hsl(216, 43%, 79%)
HSB
hsb(216, 21%, 88%)
CMYK
cmyk(21%, 12%, 0%, 12%)
Oklch
oklch(81.5% 0.045 258.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFBF5
F5F9FF

Analogous

FFF6F5
FFFBF5
FEFFF5

Triadic

FFFBF5
F5FFFB
FBF5FF

Split-Comp.

FFFBF5
F5FEFF
F6F5FF

Tetradic

FFFBF5
F5FFF6
F5F9FF
FFF5FE

Contrast Matrix WCAG 2.1 Contrast

FFFBF5
AF8092
7F5D6B
4E3A43
B1C4E0
—
3.2
AA Large
5.5
AA
10.1
AAA
1.7
Fail
3.2
AA Large
—
1.7
Fail
3.1
AA Large
1.9
Fail
5.5
AA
1.7
Fail
—
1.8
Fail
3.2
AA Large
10.1
AAA
3.1
AA Large
1.8
Fail
—
5.9
AA
1.7
Fail
1.9
Fail
3.2
AA Large
5.9
AA
—
White BG
1.0Fail
3.3AA Large
5.7AA
10.4AAA
1.8Fail
Black BG
20.4AAA
6.3AA
3.7AA Large
2.0Fail
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDF6
9B9A8E
707068
454541
B9B9D9

Deuteranopia

FEFEF7
9DA18D
727567
474840
B8B7D8

Tritanopia

FFF8F8
AD8A89
7D6564
4D3F3F
B2D4D3

Achromatopsia

FCFCFC
909090
696969
414141
C2C2C2

Shades & Tints Shades & Tints

#FFFBF5

Dark
Light

#AF8092

Dark
Light

#7F5D6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffbf5;
  --color-2: #af8092;
  --color-3: #7f5d6b;
  --color-4: #4e3a43;
  --color-5: #b1c4e0;
}

SCSS

$color-1: #fffbf5;
$color-2: #af8092;
$color-3: #7f5d6b;
$color-4: #4e3a43;
$color-5: #b1c4e0;

TAILWIND

colors: {
  'brand-1': '#fffbf5',
  'brand-2': '#af8092',
  'brand-3': '#7f5d6b',
  'brand-4': '#4e3a43',
  'brand-5': '#b1c4e0',
}

RGB Array

[255, 251, 245], [175, 128, 146], [127, 93, 107], [78, 58, 67], [177, 196, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFBF5, #AF8092, #7F5D6B, #4E3A43, #B1C4E0 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: #fffbf5; --color-2: #af8092; --color-3: #7f5d6b; --color-4: #4e3a43; --color-5: #b1c4e0. 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