#8DAA4E + #3F88AE + #96AE5D + #42697B + #253F50 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8DAA4E

Grass Green · Gray · Olive Green

HEX

#8DAA4E

RGB

rgb(141, 170, 78)

HSL

hsl(79, 37%, 49%)

HSB

hsb(79, 54%, 67%)

CMYK

cmyk(17%, 0%, 54%, 33%)

Oklch

oklch(69.6% 0.124 124.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#3F88AE

Slate Blue · SteelBlue · Navy Blue

HEX

#3F88AE

RGB

rgb(63, 136, 174)

HSL

hsl(201, 47%, 46%)

HSB

hsb(201, 64%, 68%)

CMYK

cmyk(64%, 22%, 0%, 32%)

Oklch

oklch(59.6% 0.093 234.0)

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

#96AE5D

Grass Green · DarkSeaGreen · Olive Green

HEX

#96AE5D

RGB

rgb(150, 174, 93)

HSL

hsl(78, 33%, 52%)

HSB

hsb(78, 47%, 68%)

CMYK

cmyk(14%, 0%, 47%, 32%)

Oklch

oklch(71.4% 0.111 122.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#42697B

Slate Blue · DimGray · Mint Ice

HEX

#42697B

RGB

rgb(66, 105, 123)

HSL

hsl(199, 30%, 37%)

HSB

hsb(199, 46%, 48%)

CMYK

cmyk(46%, 15%, 0%, 52%)

Oklch

oklch(49.9% 0.053 228.9)

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

#253F50

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#253F50

RGB

rgb(37, 63, 80)

HSL

hsl(204, 37%, 23%)

HSB

hsb(204, 54%, 31%)

CMYK

cmyk(54%, 21%, 0%, 69%)

Oklch

oklch(35.4% 0.044 238.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DAA4E

6C4FAB

Analogous

AB9A4F

8DAA4E

60AB4F

Triadic

8DAA4E

4F8EAB

AB4F8E

Split-Comp.

8DAA4E

4F60AB

9A4FAB

Tetradic

8DAA4E

4FAB9A

6C4FAB

AB4F60

Contrast Matrix WCAG 2.1 Contrast

8DAA4E	3F88AE	96AE5D	42697B	253F50
—	1.5 Fail	1.1 Fail	2.3 Fail	4.2 AA Large
1.5 Fail	—	1.6 Fail	1.5 Fail	2.8 Fail
1.1 Fail	1.6 Fail	—	2.4 Fail	4.5 AA Large
2.3 Fail	1.5 Fail	2.4 Fail	—	1.9 Fail
4.2 AA Large	2.8 Fail	4.5 AA Large	1.9 Fail	—

White BG

2.6Fail

3.9AA Large

2.5Fail

5.9AA

11.0AAA

Black BG

8.0AAA

5.3AA

8.5AAA

3.5AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A64

5F5FA5

A0A171

535377

30304C

Deuteranopia

98966A

5A55A3

9F9D75

514E76

2F2D4B

Tritanopia

8E767A

439E9C

978083

447372

264948

Achromatopsia

979797

777777

9E9E9E

5F5F5F

393939

Shades & Tints Shades & Tints

#8DAA4E

Dark

Light

#3F88AE

Dark

Light

#96AE5D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8daa4e;
  --color-2: #3f88ae;
  --color-3: #96ae5d;
  --color-4: #42697b;
  --color-5: #253f50;
}

SCSS

$color-1: #8daa4e;
$color-2: #3f88ae;
$color-3: #96ae5d;
$color-4: #42697b;
$color-5: #253f50;

TAILWIND

colors: {
  'brand-1': '#8daa4e',
  'brand-2': '#3f88ae',
  'brand-3': '#96ae5d',
  'brand-4': '#42697b',
  'brand-5': '#253f50',
}

RGB Array

[141, 170, 78], [63, 136, 174], [150, 174, 93], [66, 105, 123], [37, 63, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8DAA4E, #3F88AE, #96AE5D, #42697B, #253F50 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: #8daa4e; --color-2: #3f88ae; --color-3: #96ae5d; --color-4: #42697b; --color-5: #253f50. 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