#716DFF + #4098E5 + #54BDC2 + #B3C4B8 + #CFBBB5 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#716DFF

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#716DFF

RGB

rgb(113, 109, 255)

HSL

hsl(242, 100%, 71%)

HSB

hsb(242, 57%, 100%)

CMYK

cmyk(56%, 57%, 0%, 0%)

Oklch

oklch(61.7% 0.211 279.5)

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

#4098E5

Lake Blue · CornflowerBlue · Navy Blue

HEX

#4098E5

RGB

rgb(64, 152, 229)

HSL

hsl(208, 76%, 57%)

HSB

hsb(208, 72%, 90%)

CMYK

cmyk(72%, 34%, 0%, 10%)

Oklch

oklch(66.2% 0.142 248.3)

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

#54BDC2

Slate Blue · MediumTurquoise · Lake Green

HEX

#54BDC2

RGB

rgb(84, 189, 194)

HSL

hsl(183, 47%, 55%)

HSB

hsb(183, 57%, 76%)

CMYK

cmyk(57%, 3%, 0%, 24%)

Oklch

oklch(73.9% 0.097 199.6)

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

#B3C4B8

Celadon · Silver · Apple Green

HEX

#B3C4B8

RGB

rgb(179, 196, 184)

HSL

hsl(138, 13%, 74%)

HSB

hsb(138, 9%, 77%)

CMYK

cmyk(9%, 0%, 6%, 23%)

Oklch

oklch(80.4% 0.025 155.0)

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

#CFBBB5

Peach Pink · Silver · Coral Red

HEX

#CFBBB5

RGB

rgb(207, 187, 181)

HSL

hsl(14, 21%, 76%)

HSB

hsb(14, 13%, 81%)

CMYK

cmyk(0%, 10%, 13%, 19%)

Oklch

oklch(80.7% 0.024 37.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

716DFF

FAFF6B

Analogous

6BB0FF

716DFF

BA6BFF

Triadic

716DFF

FF706B

6BFF70

Split-Comp.

716DFF

FFBA6B

B0FF6B

Tetradic

716DFF

FF6BB0

FAFF6B

6BFFBA

Contrast Matrix WCAG 2.1 Contrast

716DFF	4098E5	54BDC2	B3C4B8	CFBBB5
—	1.3 Fail	1.8 Fail	2.2 Fail	2.1 Fail
1.3 Fail	—	1.4 Fail	1.7 Fail	1.7 Fail
1.8 Fail	1.4 Fail	—	1.2 Fail	1.2 Fail
2.2 Fail	1.7 Fail	1.2 Fail	—	1.0 Fail
2.1 Fail	1.7 Fail	1.2 Fail	1.0 Fail	—

White BG

3.9AA Large

3.1AA Large

2.2Fail

1.8Fail

Black BG

5.3AA

6.8AA

9.4AAA

11.5AAA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6FDC

6667D2

8182C1

BABBBB

C6C6B6

Deuteranopia

7070D3

615ACE

7B74C0

B9B8BC

C8C9B7

Tritanopia

71C0BA

44C4C0

59C0C0

B4BDBE

CEB8B8

Achromatopsia

7F7F7F

868686

9E9E9E

BEBEBE

C0C0C0

Shades & Tints Shades & Tints

#716DFF

Dark

Light

#4098E5

Dark

Light

#54BDC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #716dff;
  --color-2: #4098e5;
  --color-3: #54bdc2;
  --color-4: #b3c4b8;
  --color-5: #cfbbb5;
}

SCSS

$color-1: #716dff;
$color-2: #4098e5;
$color-3: #54bdc2;
$color-4: #b3c4b8;
$color-5: #cfbbb5;

TAILWIND

colors: {
  'brand-1': '#716dff',
  'brand-2': '#4098e5',
  'brand-3': '#54bdc2',
  'brand-4': '#b3c4b8',
  'brand-5': '#cfbbb5',
}

RGB Array

[113, 109, 255], [64, 152, 229], [84, 189, 194], [179, 196, 184], [207, 187, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #716DFF, #4098E5, #54BDC2, #B3C4B8, #CFBBB5 is ideal for: health products, baby brands, fresh-style blogs. 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: #716dff; --color-2: #4098e5; --color-3: #54bdc2; --color-4: #b3c4b8; --color-5: #cfbbb5. 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. 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 sea-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