← Back to Editor

#7C687E · #B22488 · #DC158F · #55F8F4 · #B7FCEA

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#7C687E

Dark Plum · Gray · Violet

HEX
#7C687E
RGB
rgb(124, 104, 126)
HSL
hsl(295, 10%, 45%)
HSB
hsb(295, 17%, 49%)
CMYK
cmyk(2%, 17%, 0%, 51%)
Oklch
oklch(54.4% 0.041 323.2)

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

#B22488

Rose Purple · MediumVioletRed · Violet

HEX
#B22488
RGB
rgb(178, 36, 136)
HSL
hsl(318, 66%, 42%)
HSB
hsb(318, 80%, 70%)
CMYK
cmyk(0%, 80%, 24%, 30%)
Oklch
oklch(52.7% 0.200 343.2)

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

#DC158F

Rose Purple · MediumVioletRed · Camellia

HEX
#DC158F
RGB
rgb(220, 21, 143)
HSL
hsl(323, 83%, 47%)
HSB
hsb(323, 90%, 86%)
CMYK
cmyk(0%, 90%, 35%, 14%)
Oklch
oklch(59.4% 0.239 351.1)

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

#55F8F4

Jade · Turquoise · Lake Green

HEX
#55F8F4
RGB
rgb(85, 248, 244)
HSL
hsl(179, 92%, 65%)
HSB
hsb(179, 66%, 97%)
CMYK
cmyk(66%, 0%, 2%, 3%)
Oklch
oklch(89.5% 0.133 192.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B7FCEA

Jade · LightBlue · Glacier Blue

HEX
#B7FCEA
RGB
rgb(183, 252, 234)
HSL
hsl(164, 92%, 85%)
HSB
hsb(164, 27%, 99%)
CMYK
cmyk(27%, 0%, 7%, 1%)
Oklch
oklch(94.0% 0.073 176.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C687E
697E67

Analogous

71677E
7C687E
7E6775

Triadic

7C687E
7E7C67
677E7C

Split-Comp.

7C687E
757E67
677E71

Tetradic

7C687E
7E7167
697E67
67757E

Contrast Matrix WCAG 2.1 Contrast

7C687E
B22488
DC158F
55F8F4
B7FCEA
—
1.2
Fail
1.1
Fail
3.9
AA Large
4.4
AA Large
1.2
Fail
—
1.3
Fail
4.6
AA
5.2
AA
1.1
Fail
1.3
Fail
—
3.5
AA Large
4.0
AA Large
3.9
AA Large
4.6
AA
3.5
AA Large
—
1.1
Fail
4.4
AA Large
5.2
AA
4.0
AA Large
1.1
Fail
—
White BG
5.1AA
6.0AA
4.6AA
1.3Fail
1.2Fail
Black BG
4.1AA Large
3.5AA Large
4.5AA
16.1AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737379
757370
868471
9C9DF5
D5D5EE

Deuteranopia

757677
7D876A
91A06A
9286F5
D1CCEF

Tritanopia

7B7474
AB5D59
D25A55
5DF6F6
BAF2F3

Achromatopsia

707070
5A5A5A
5E5E5E
C7C7C7
E5E5E5

Shades & Tints Shades & Tints

#7C687E

Dark
Light

#B22488

Dark
Light

#DC158F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c687e;
  --color-2: #b22488;
  --color-3: #dc158f;
  --color-4: #55f8f4;
  --color-5: #b7fcea;
}

SCSS

$color-1: #7c687e;
$color-2: #b22488;
$color-3: #dc158f;
$color-4: #55f8f4;
$color-5: #b7fcea;

TAILWIND

colors: {
  'brand-1': '#7c687e',
  'brand-2': '#b22488',
  'brand-3': '#dc158f',
  'brand-4': '#55f8f4',
  'brand-5': '#b7fcea',
}

RGB Array

[124, 104, 126], [178, 36, 136], [220, 21, 143], [85, 248, 244], [183, 252, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7C687E, #B22488, #DC158F, #55F8F4, #B7FCEA is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7c687e; --color-2: #b22488; --color-3: #dc158f; --color-4: #55f8f4; --color-5: #b7fcea. 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 nature-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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