← Back to Editor

#BCC589 · #FBB7AB · #D4BAB6 · #7A9F9A · #202533

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

#BCC589

Fresh Green · Tan · Sunflower

HEX
#BCC589
RGB
rgb(188, 197, 137)
HSL
hsl(69, 34%, 65%)
HSB
hsb(69, 30%, 77%)
CMYK
cmyk(5%, 0%, 30%, 23%)
Oklch
oklch(80.2% 0.080 115.2)

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

#FBB7AB

Peach Pink · LightPink · Cherry Blossom

HEX
#FBB7AB
RGB
rgb(251, 183, 171)
HSL
hsl(9, 91%, 83%)
HSB
hsb(9, 32%, 98%)
CMYK
cmyk(0%, 27%, 32%, 2%)
Oklch
oklch(83.9% 0.081 30.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D4BAB6

Peach Pink · Silver · Coral Red

HEX
#D4BAB6
RGB
rgb(212, 186, 182)
HSL
hsl(8, 26%, 77%)
HSB
hsb(8, 14%, 83%)
CMYK
cmyk(0%, 12%, 14%, 17%)
Oklch
oklch(81.0% 0.030 28.2)

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

#7A9F9A

Mineral Blue · LightSlateGray · Lake Green

HEX
#7A9F9A
RGB
rgb(122, 159, 154)
HSL
hsl(172, 16%, 55%)
HSB
hsb(172, 23%, 62%)
CMYK
cmyk(23%, 0%, 3%, 38%)
Oklch
oklch(67.4% 0.041 186.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#202533

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#202533
RGB
rgb(32, 37, 51)
HSL
hsl(224, 23%, 16%)
HSB
hsb(224, 37%, 20%)
CMYK
cmyk(37%, 27%, 0%, 80%)
Oklch
oklch(26.6% 0.027 269.3)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCC589
9187C4

Analogous

C4AF87
BCC589
9DC487

Triadic

BCC589
87BBC4
C487BB

Split-Comp.

BCC589
879DC4
AF87C4

Tetradic

BCC589
87C4AF
9187C4
C4879D

Contrast Matrix WCAG 2.1 Contrast

BCC589
FBB7AB
D4BAB6
7A9F9A
202533
—
1.1
Fail
1.0
Fail
1.6
Fail
8.4
AAA
1.1
Fail
—
1.1
Fail
1.7
Fail
9.1
AAA
1.0
Fail
1.1
Fail
—
1.6
Fail
8.4
AAA
1.6
Fail
1.7
Fail
1.6
Fail
—
5.3
AA
8.4
AAA
9.1
AAA
8.4
AAA
5.3
AA
—
White BG
1.8Fail
1.7Fail
1.8Fail
2.9Fail
15.3AAA
Black BG
11.5AAA
12.5AAA
11.5AAA
7.3AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C098
DEDDAE
C9C9B7
8A8A9B
222230

Deuteranopia

BFBF9B
E2E7AF
CACCB7
88859C
22222F

Tritanopia

BCA3A6
F8B0B1
D3B8B8
7C9C9C
202D2C

Achromatopsia

BBBBBB
CACACA
C1C1C1
939393
252525

Shades & Tints Shades & Tints

#BCC589

Dark
Light

#FBB7AB

Dark
Light

#D4BAB6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcc589;
  --color-2: #fbb7ab;
  --color-3: #d4bab6;
  --color-4: #7a9f9a;
  --color-5: #202533;
}

SCSS

$color-1: #bcc589;
$color-2: #fbb7ab;
$color-3: #d4bab6;
$color-4: #7a9f9a;
$color-5: #202533;

TAILWIND

colors: {
  'brand-1': '#bcc589',
  'brand-2': '#fbb7ab',
  'brand-3': '#d4bab6',
  'brand-4': '#7a9f9a',
  'brand-5': '#202533',
}

RGB Array

[188, 197, 137], [251, 183, 171], [212, 186, 182], [122, 159, 154], [32, 37, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCC589, #FBB7AB, #D4BAB6, #7A9F9A, #202533 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: #bcc589; --color-2: #fbb7ab; --color-3: #d4bab6; --color-4: #7a9f9a; --color-5: #202533. 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