← Back to Editor

#7D7875 · #B30662 · #F7148A · #B2A3A8 · #D7CCD0

bright

A 5-color bright 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

#7D7875

Ink Gray · Gray · Warm Gray

HEX
#7D7875
RGB
rgb(125, 120, 117)
HSL
hsl(23, 3%, 47%)
HSB
hsb(23, 6%, 49%)
CMYK
cmyk(0%, 4%, 6%, 51%)
Oklch
oklch(57.6% 0.008 53.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#B30662

Rose Purple · MediumVioletRed · Camellia

HEX
#B30662
RGB
rgb(179, 6, 98)
HSL
hsl(328, 94%, 36%)
HSB
hsb(328, 97%, 70%)
CMYK
cmyk(0%, 97%, 45%, 30%)
Oklch
oklch(50.0% 0.201 358.3)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#F7148A

Rose Purple · DeepPink · Rose Pink

HEX
#F7148A
RGB
rgb(247, 20, 138)
HSL
hsl(329, 93%, 52%)
HSB
hsb(329, 92%, 97%)
CMYK
cmyk(0%, 92%, 44%, 3%)
Oklch
oklch(63.8% 0.253 358.3)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#B2A3A8

Rouge · DarkGray · Silver Sand

HEX
#B2A3A8
RGB
rgb(178, 163, 168)
HSL
hsl(340, 9%, 67%)
HSB
hsb(340, 8%, 70%)
CMYK
cmyk(0%, 8%, 6%, 30%)
Oklch
oklch(73.0% 0.019 355.3)

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

#D7CCD0

Rouge · LightGray · Cherry Blossom

HEX
#D7CCD0
RGB
rgb(215, 204, 208)
HSL
hsl(338, 12%, 82%)
HSB
hsb(338, 5%, 84%)
CMYK
cmyk(0%, 5%, 3%, 16%)
Oklch
oklch(85.5% 0.013 353.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7875
74797B

Analogous

7B7475
7D7875
7B7B74

Triadic

7D7875
747B77
77747B

Split-Comp.

7D7875
747B7B
74757B

Tetradic

7D7875
757B74
74797B
7B747B

Contrast Matrix WCAG 2.1 Contrast

7D7875
B30662
F7148A
B2A3A8
D7CCD0
—
1.5
Fail
1.1
Fail
1.8
Fail
2.8
Fail
1.5
Fail
—
1.7
Fail
2.8
Fail
4.3
AA Large
1.1
Fail
1.7
Fail
—
1.6
Fail
2.5
Fail
1.8
Fail
2.8
Fail
1.6
Fail
—
1.5
Fail
2.8
Fail
4.3
AA Large
2.5
Fail
1.5
Fail
—
White BG
4.4AA Large
6.7AA
3.9AA Large
2.4Fail
1.6Fail
Black BG
4.8AA
3.1AA Large
5.4AA
8.7AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B76
68674C
95936D
ACABA7
D2D2CF

Deuteranopia

7B7C76
727F46
A2B367
ACAEA7
D3D4CF

Tritanopia

7D7676
AA3A36
EC5752
B1A6A6
D6CECE

Achromatopsia

797979
444444
656565
A8A8A8
D0D0D0

Shades & Tints Shades & Tints

#7D7875

Dark
Light

#B30662

Dark
Light

#F7148A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7875;
  --color-2: #b30662;
  --color-3: #f7148a;
  --color-4: #b2a3a8;
  --color-5: #d7ccd0;
}

SCSS

$color-1: #7d7875;
$color-2: #b30662;
$color-3: #f7148a;
$color-4: #b2a3a8;
$color-5: #d7ccd0;

TAILWIND

colors: {
  'brand-1': '#7d7875',
  'brand-2': '#b30662',
  'brand-3': '#f7148a',
  'brand-4': '#b2a3a8',
  'brand-5': '#d7ccd0',
}

RGB Array

[125, 120, 117], [179, 6, 98], [247, 20, 138], [178, 163, 168], [215, 204, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #7D7875, #B30662, #F7148A, #B2A3A8, #D7CCD0 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: #7d7875; --color-2: #b30662; --color-3: #f7148a; --color-4: #b2a3a8; --color-5: #d7ccd0. 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 bright-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