← Back to Editor

#7BB8C7 · #9C97BD · #C07D8F · #D7826D · #FB583E

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 Library

Color Details Color Details

#7BB8C7

Sky Blue · MediumAquaMarine · Lake Green

HEX
#7BB8C7
RGB
rgb(123, 184, 199)
HSL
hsl(192, 40%, 63%)
HSB
hsb(192, 38%, 78%)
CMYK
cmyk(38%, 8%, 0%, 22%)
Oklch
oklch(74.6% 0.066 214.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9C97BD

Wisteria · DarkGray · Cobalt Blue

HEX
#9C97BD
RGB
rgb(156, 151, 189)
HSL
hsl(248, 22%, 67%)
HSB
hsb(248, 20%, 74%)
CMYK
cmyk(17%, 20%, 0%, 26%)
Oklch
oklch(69.4% 0.055 290.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#C07D8F

Rouge · LightCoral · Rose Pink

HEX
#C07D8F
RGB
rgb(192, 125, 143)
HSL
hsl(344, 35%, 62%)
HSB
hsb(344, 35%, 75%)
CMYK
cmyk(0%, 35%, 26%, 25%)
Oklch
oklch(66.4% 0.086 2.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D7826D

Peach Pink · DarkSalmon · Coral Red

HEX
#D7826D
RGB
rgb(215, 130, 109)
HSL
hsl(12, 57%, 64%)
HSB
hsb(12, 49%, 84%)
CMYK
cmyk(0%, 40%, 49%, 16%)
Oklch
oklch(69.2% 0.110 34.7)

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

#FB583E

Peach Pink · Tomato · Coral Red

HEX
#FB583E
RGB
rgb(251, 88, 62)
HSL
hsl(8, 96%, 61%)
HSB
hsb(8, 75%, 98%)
CMYK
cmyk(0%, 65%, 75%, 2%)
Oklch
oklch(67.6% 0.203 31.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7BB8C7
C68A7B

Analogous

7BC6B0
7BB8C7
7B92C6

Triadic

7BB8C7
C67BB7
B7C67B

Split-Comp.

7BB8C7
C67B92
C6B07B

Tetradic

7BB8C7
B07BC6
C68A7B
92C67B

Contrast Matrix WCAG 2.1 Contrast

7BB8C7
9C97BD
C07D8F
D7826D
FB583E
—
1.3
Fail
1.4
Fail
1.3
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.0
Fail
1.3
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
White BG
2.2Fail
2.8Fail
3.2AA Large
2.9Fail
3.2AA Large
Black BG
9.5AAA
7.6AAA
6.6AA
7.3AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9596C3
9A9AB4
A3A28B
B2B172
B4B344

Deuteranopia

928DC2
9A9BB2
A7AC8A
B7BE73
BECA46

Tritanopia

7EC1C0
9CADAB
BD8786
D37677
F3494A

Achromatopsia

A7A7A7
9D9D9D
939393
999999
868686

Shades & Tints Shades & Tints

#7BB8C7

Dark
Light

#9C97BD

Dark
Light

#C07D8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7bb8c7;
  --color-2: #9c97bd;
  --color-3: #c07d8f;
  --color-4: #d7826d;
  --color-5: #fb583e;
}

SCSS

$color-1: #7bb8c7;
$color-2: #9c97bd;
$color-3: #c07d8f;
$color-4: #d7826d;
$color-5: #fb583e;

TAILWIND

colors: {
  'brand-1': '#7bb8c7',
  'brand-2': '#9c97bd',
  'brand-3': '#c07d8f',
  'brand-4': '#d7826d',
  'brand-5': '#fb583e',
}

RGB Array

[123, 184, 199], [156, 151, 189], [192, 125, 143], [215, 130, 109], [251, 88, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7BB8C7, #9C97BD, #C07D8F, #D7826D, #FB583E is ideal for: corporate websites, product showcases, portfolios. 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: #7bb8c7; --color-2: #9c97bd; --color-3: #c07d8f; --color-4: #d7826d; --color-5: #fb583e. 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. 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