← Back to Editor

#7D68E3 · #37A4CC · #7EBFB1 · #C1CFBA · #FFD9D9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#7D68E3

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#7D68E3
RGB
rgb(125, 104, 227)
HSL
hsl(250, 69%, 65%)
HSB
hsb(250, 54%, 89%)
CMYK
cmyk(45%, 54%, 0%, 11%)
Oklch
oklch(59.9% 0.180 287.5)

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

#37A4CC

Lake Blue · LightSeaGreen · Lake Green

HEX
#37A4CC
RGB
rgb(55, 164, 204)
HSL
hsl(196, 59%, 51%)
HSB
hsb(196, 73%, 80%)
CMYK
cmyk(73%, 20%, 0%, 20%)
Oklch
oklch(67.5% 0.112 226.9)

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

#7EBFB1

Jade · MediumAquaMarine · Lake Green

HEX
#7EBFB1
RGB
rgb(126, 191, 177)
HSL
hsl(167, 34%, 62%)
HSB
hsb(167, 34%, 75%)
CMYK
cmyk(34%, 0%, 7%, 25%)
Oklch
oklch(75.7% 0.070 179.3)

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

#C1CFBA

Celadon · Silver · Apple Green

HEX
#C1CFBA
RGB
rgb(193, 207, 186)
HSL
hsl(100, 18%, 77%)
HSB
hsb(100, 10%, 81%)
CMYK
cmyk(7%, 0%, 10%, 19%)
Oklch
oklch(83.8% 0.032 135.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#FFD9D9

Peach Pink · Bisque · Cherry Blossom

HEX
#FFD9D9
RGB
rgb(255, 217, 217)
HSL
hsl(0, 100%, 93%)
HSB
hsb(0, 15%, 100%)
CMYK
cmyk(0%, 15%, 15%, 0%)
Oklch
oklch(91.7% 0.042 18.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D68E3
CFE368

Analogous

6891E3
7D68E3
BA68E3

Triadic

7D68E3
E37D68
68E37D

Split-Comp.

7D68E3
E3BA68
91E368

Tetradic

7D68E3
E36891
CFE368
68E3BA

Contrast Matrix WCAG 2.1 Contrast

7D68E3
37A4CC
7EBFB1
C1CFBA
FFD9D9
—
1.5
Fail
2.0
Fail
2.6
Fail
3.3
AA Large
1.5
Fail
—
1.4
Fail
1.8
Fail
2.2
Fail
2.0
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
2.6
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
3.3
AA Large
2.2
Fail
1.6
Fail
1.3
Fail
—
White BG
4.2AA Large
2.9Fail
2.1Fail
1.6Fail
1.3Fail
Black BG
5.0AA
7.3AAA
10.0AAA
12.9AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7474C5
6667C2
9A9BB4
C7C7BF
EFEED9

Deuteranopia

7577BE
6058C0
9692B5
C6C5C0
F1F4D9

Tritanopia

7CAEA9
3CBBB9
81B7B8
C2C3C4
FDD9D9

Achromatopsia

7C7C7C
888888
AAAAAA
C8C8C8
E4E4E4

Shades & Tints Shades & Tints

#7D68E3

Dark
Light

#37A4CC

Dark
Light

#7EBFB1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d68e3;
  --color-2: #37a4cc;
  --color-3: #7ebfb1;
  --color-4: #c1cfba;
  --color-5: #ffd9d9;
}

SCSS

$color-1: #7d68e3;
$color-2: #37a4cc;
$color-3: #7ebfb1;
$color-4: #c1cfba;
$color-5: #ffd9d9;

TAILWIND

colors: {
  'brand-1': '#7d68e3',
  'brand-2': '#37a4cc',
  'brand-3': '#7ebfb1',
  'brand-4': '#c1cfba',
  'brand-5': '#ffd9d9',
}

RGB Array

[125, 104, 227], [55, 164, 204], [126, 191, 177], [193, 207, 186], [255, 217, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D68E3, #37A4CC, #7EBFB1, #C1CFBA, #FFD9D9 is ideal for: health products, baby brands, fresh-style blogs, 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: #7d68e3; --color-2: #37a4cc; --color-3: #7ebfb1; --color-4: #c1cfba; --color-5: #ffd9d9. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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