#2E648C + #1192F5 + #2E7B8C + #748C7F + #C4B786 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E648C

Lake Blue · DarkSlateBlue · Prussian Blue

HEX

#2E648C

RGB

rgb(46, 100, 140)

HSL

hsl(206, 51%, 36%)

HSB

hsb(206, 67%, 55%)

CMYK

cmyk(67%, 29%, 0%, 45%)

Oklch

oklch(48.5% 0.086 243.4)

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

#1192F5

Lake Blue · DodgerBlue · Navy Blue

HEX

#1192F5

RGB

rgb(17, 146, 245)

HSL

hsl(206, 92%, 51%)

HSB

hsb(206, 93%, 96%)

CMYK

cmyk(93%, 40%, 0%, 4%)

Oklch

oklch(64.8% 0.178 249.7)

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

#2E7B8C

Lake Blue · SteelBlue · Mint Ice

HEX

#2E7B8C

RGB

rgb(46, 123, 140)

HSL

hsl(191, 51%, 36%)

HSB

hsb(191, 67%, 55%)

CMYK

cmyk(67%, 12%, 0%, 45%)

Oklch

oklch(54.3% 0.078 215.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#748C7F

Celadon · Gray · Warm Gray

HEX

#748C7F

RGB

rgb(116, 140, 127)

HSL

hsl(147, 9%, 50%)

HSB

hsb(147, 17%, 55%)

CMYK

cmyk(17%, 0%, 9%, 45%)

Oklch

oklch(61.7% 0.034 161.6)

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

#C4B786

Ginger · Tan · Sunflower

HEX

#C4B786

RGB

rgb(196, 183, 134)

HSL

hsl(47, 34%, 65%)

HSB

hsb(47, 32%, 77%)

CMYK

cmyk(0%, 7%, 32%, 23%)

Oklch

oklch(77.8% 0.067 95.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E648C

8B562D

Analogous

2D8B84

2E648C

2D338B

Triadic

2E648C

8B2D62

628B2D

Split-Comp.

2E648C

8B2D33

8B842D

Tetradic

2E648C

842D8B

8B562D

338B2D

Contrast Matrix WCAG 2.1 Contrast

2E648C	1192F5	2E7B8C	748C7F	C4B786
—	1.9 Fail	1.3 Fail	1.7 Fail	3.2 AA Large
1.9 Fail	—	1.5 Fail	1.1 Fail	1.6 Fail
1.3 Fail	1.5 Fail	—	1.3 Fail	2.4 Fail
1.7 Fail	1.1 Fail	1.3 Fail	—	1.8 Fail
3.2 AA Large	1.6 Fail	2.4 Fail	1.8 Fail	—

White BG

6.3AA

3.3AA Large

4.9AA

3.6AA Large

2.0Fail

Black BG

3.3AA Large

6.5AA

4.3AA Large

5.8AA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454682

494ADD

4F5088

7E7F82

BEBE92

Deuteranopia

423E80

4138D7

4B4587

7D7B83

BFC095

Tritanopia

317B79

17CAC6

328584

758585

C39B9D

Achromatopsia

585858

777777

666666

838383

B5B5B5

Shades & Tints Shades & Tints

#2E648C

Dark

Light

#1192F5

Dark

Light

#2E7B8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e648c;
  --color-2: #1192f5;
  --color-3: #2e7b8c;
  --color-4: #748c7f;
  --color-5: #c4b786;
}

SCSS

$color-1: #2e648c;
$color-2: #1192f5;
$color-3: #2e7b8c;
$color-4: #748c7f;
$color-5: #c4b786;

TAILWIND

colors: {
  'brand-1': '#2e648c',
  'brand-2': '#1192f5',
  'brand-3': '#2e7b8c',
  'brand-4': '#748c7f',
  'brand-5': '#c4b786',
}

RGB Array

[46, 100, 140], [17, 146, 245], [46, 123, 140], [116, 140, 127], [196, 183, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #2E648C, #1192F5, #2E7B8C, #748C7F, #C4B786 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: #2e648c; --color-2: #1192f5; --color-3: #2e7b8c; --color-4: #748c7f; --color-5: #c4b786. 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 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