← Back to Editor

#F7BBEC · #CDC67D · #E3A146 · #B1961F · #89758A

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

Color Details Color Details

#F7BBEC

Mauve · Pink · Lavender

HEX
#F7BBEC
RGB
rgb(247, 187, 236)
HSL
hsl(311, 79%, 85%)
HSB
hsb(311, 24%, 97%)
CMYK
cmyk(0%, 24%, 4%, 3%)
Oklch
oklch(86.1% 0.093 332.9)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#CDC67D

Fresh Green · Tan · Sunflower

HEX
#CDC67D
RGB
rgb(205, 198, 125)
HSL
hsl(55, 44%, 65%)
HSB
hsb(55, 39%, 80%)
CMYK
cmyk(0%, 3%, 39%, 20%)
Oklch
oklch(81.6% 0.094 103.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E3A146

Ginger · SandyBrown · Warm Sun

HEX
#E3A146
RGB
rgb(227, 161, 70)
HSL
hsl(35, 74%, 58%)
HSB
hsb(35, 69%, 89%)
CMYK
cmyk(0%, 29%, 69%, 11%)
Oklch
oklch(75.6% 0.131 71.9)

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

#B1961F

Ochre · DarkGoldenRod · Honey Gold

HEX
#B1961F
RGB
rgb(177, 150, 31)
HSL
hsl(49, 70%, 41%)
HSB
hsb(49, 82%, 69%)
CMYK
cmyk(0%, 15%, 82%, 31%)
Oklch
oklch(67.8% 0.131 95.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#89758A

Dark Plum · Gray · Warm Gray

HEX
#89758A
RGB
rgb(137, 117, 138)
HSL
hsl(297, 8%, 50%)
HSB
hsb(297, 15%, 54%)
CMYK
cmyk(1%, 15%, 0%, 46%)
Oklch
oklch(58.8% 0.039 324.6)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7BBEC
BBF7C6

Analogous

E4BBF7
F7BBEC
F7BBCE

Triadic

F7BBEC
ECF7BB
BBECF7

Split-Comp.

F7BBEC
CEF7BB
BBF7E4

Tetradic

F7BBEC
F7E4BB
BBF7C6
BBCEF7

Contrast Matrix WCAG 2.1 Contrast

F7BBEC
CDC67D
E3A146
B1961F
89758A
—
1.1
Fail
1.4
Fail
1.8
Fail
2.7
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
2.4
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
1.8
Fail
1.7
Fail
1.3
Fail
—
1.5
Fail
2.7
Fail
2.4
Fail
1.9
Fail
1.5
Fail
—
White BG
1.6Fail
1.8Fail
2.2Fail
2.9Fail
4.2AA Large
Black BG
13.3AAA
12.0AAA
9.5AAA
7.3AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDCE0
CACA8F
C6C65C
A5A53C
808085

Deuteranopia

E1E5DD
CACB93
CACF61
A7A943
828384

Tritanopia

F4D7D5
CD9DA0
E06D71
B05358
888180

Achromatopsia

D3D3D3
C0C0C0
AAAAAA
919191
7D7D7D

Shades & Tints Shades & Tints

#F7BBEC

Dark
Light

#CDC67D

Dark
Light

#E3A146

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7bbec;
  --color-2: #cdc67d;
  --color-3: #e3a146;
  --color-4: #b1961f;
  --color-5: #89758a;
}

SCSS

$color-1: #f7bbec;
$color-2: #cdc67d;
$color-3: #e3a146;
$color-4: #b1961f;
$color-5: #89758a;

TAILWIND

colors: {
  'brand-1': '#f7bbec',
  'brand-2': '#cdc67d',
  'brand-3': '#e3a146',
  'brand-4': '#b1961f',
  'brand-5': '#89758a',
}

RGB Array

[247, 187, 236], [205, 198, 125], [227, 161, 70], [177, 150, 31], [137, 117, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7BBEC, #CDC67D, #E3A146, #B1961F, #89758A 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: #f7bbec; --color-2: #cdc67d; --color-3: #e3a146; --color-4: #b1961f; --color-5: #89758a. 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