← Back to Editor

#357B9D · #54AEA2 · #B9D299 · #DBDEB1 · #EFE7C0

sea

A 5-color sea 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

#357B9D

Slate Blue · SteelBlue · Navy Blue

HEX
#357B9D
RGB
rgb(53, 123, 157)
HSL
hsl(200, 50%, 41%)
HSB
hsb(200, 66%, 62%)
CMYK
cmyk(66%, 22%, 0%, 38%)
Oklch
oklch(55.3% 0.087 232.5)

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

#54AEA2

Mineral Blue · CadetBlue · Lake Green

HEX
#54AEA2
RGB
rgb(84, 174, 162)
HSL
hsl(172, 36%, 51%)
HSB
hsb(172, 52%, 68%)
CMYK
cmyk(52%, 0%, 7%, 32%)
Oklch
oklch(69.2% 0.088 183.9)

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

#B9D299

Willow Green · Tan · Apple Green

HEX
#B9D299
RGB
rgb(185, 210, 153)
HSL
hsl(86, 39%, 71%)
HSB
hsb(86, 27%, 82%)
CMYK
cmyk(12%, 0%, 27%, 18%)
Oklch
oklch(83.1% 0.081 127.3)

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

#DBDEB1

Fresh Green · Wheat · Lemon Cream

HEX
#DBDEB1
RGB
rgb(219, 222, 177)
HSL
hsl(64, 41%, 78%)
HSB
hsb(64, 20%, 87%)
CMYK
cmyk(1%, 0%, 20%, 13%)
Oklch
oklch(88.7% 0.059 110.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#EFE7C0

Fresh Green · Bisque · Lemon Cream

HEX
#EFE7C0
RGB
rgb(239, 231, 192)
HSL
hsl(50, 59%, 85%)
HSB
hsb(50, 20%, 94%)
CMYK
cmyk(0%, 3%, 20%, 6%)
Oklch
oklch(92.4% 0.052 97.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

357B9D
9D5734

Analogous

349D8B
357B9D
34469D

Triadic

357B9D
9D347A
7A9D34

Split-Comp.

357B9D
9D3446
9D8B34

Tetradic

357B9D
8B349D
9D5734
469D34

Contrast Matrix WCAG 2.1 Contrast

357B9D
54AEA2
B9D299
DBDEB1
EFE7C0
—
1.8
Fail
2.8
Fail
3.4
AA Large
3.8
AA Large
1.8
Fail
—
1.6
Fail
1.9
Fail
2.1
Fail
2.8
Fail
1.6
Fail
—
1.2
Fail
1.3
Fail
3.4
AA Large
1.9
Fail
1.2
Fail
—
1.1
Fail
3.8
AA Large
2.1
Fail
1.3
Fail
1.1
Fail
—
White BG
4.7AA
2.6Fail
1.6Fail
1.4Fail
1.2Fail
Black BG
4.5AA Large
8.0AAA
12.7AAA
15.1AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535495
7B7CA5
C4C4A7
DCDCBC
ECEBC9

Deuteranopia

4F4A93
766FA6
C2C1AA
DCDCBF
ECEDCC

Tritanopia

388E8D
59A7A8
BAB2B4
DBC4C6
EFD1D3

Achromatopsia

6A6A6A
929292
C4C4C4
D8D8D8
E5E5E5

Shades & Tints Shades & Tints

#357B9D

Dark
Light

#54AEA2

Dark
Light

#B9D299

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #357b9d;
  --color-2: #54aea2;
  --color-3: #b9d299;
  --color-4: #dbdeb1;
  --color-5: #efe7c0;
}

SCSS

$color-1: #357b9d;
$color-2: #54aea2;
$color-3: #b9d299;
$color-4: #dbdeb1;
$color-5: #efe7c0;

TAILWIND

colors: {
  'brand-1': '#357b9d',
  'brand-2': '#54aea2',
  'brand-3': '#b9d299',
  'brand-4': '#dbdeb1',
  'brand-5': '#efe7c0',
}

RGB Array

[53, 123, 157], [84, 174, 162], [185, 210, 153], [219, 222, 177], [239, 231, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #357B9D, #54AEA2, #B9D299, #DBDEB1, #EFE7C0 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: #357b9d; --color-2: #54aea2; --color-3: #b9d299; --color-4: #dbdeb1; --color-5: #efe7c0. 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 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