#3B3D51 + #265C6C + #247D76 + #489B6E + #89B45C · 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

#3B3D51

Indigo · DarkSlateGray · Prussian Blue

HEX

#3B3D51

RGB

rgb(59, 61, 81)

HSL

hsl(235, 16%, 27%)

HSB

hsb(235, 27%, 32%)

CMYK

cmyk(27%, 25%, 0%, 68%)

Oklch

oklch(36.7% 0.034 280.1)

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

#265C6C

Slate Blue · DarkSlateGray · Mint Ice

HEX

#265C6C

RGB

rgb(38, 92, 108)

HSL

hsl(194, 48%, 29%)

HSB

hsb(194, 65%, 42%)

CMYK

cmyk(65%, 15%, 0%, 58%)

Oklch

oklch(44.6% 0.062 220.3)

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

#247D76

Mineral Blue · SeaGreen · Mint Ice

HEX

#247D76

RGB

rgb(36, 125, 118)

HSL

hsl(175, 55%, 32%)

HSB

hsb(175, 71%, 49%)

CMYK

cmyk(71%, 0%, 6%, 51%)

Oklch

oklch(53.7% 0.082 187.4)

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

#489B6E

Celadon · MediumSeaGreen · Olive Green

HEX

#489B6E

RGB

rgb(72, 155, 110)

HSL

hsl(147, 37%, 45%)

HSB

hsb(147, 54%, 61%)

CMYK

cmyk(54%, 0%, 29%, 39%)

Oklch

oklch(62.5% 0.107 157.5)

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

#89B45C

Grass Green · DarkSeaGreen · Olive Green

HEX

#89B45C

RGB

rgb(137, 180, 92)

HSL

hsl(89, 37%, 53%)

HSB

hsb(89, 49%, 71%)

CMYK

cmyk(24%, 0%, 49%, 29%)

Oklch

oklch(71.9% 0.126 130.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B3D51

504E3A

Analogous

3A4750

3B3D51

433A50

Triadic

3B3D51

503A3C

3C503A

Split-Comp.

3B3D51

50433A

47503A

Tetradic

3B3D51

503A47

504E3A

3A5043

Contrast Matrix WCAG 2.1 Contrast

3B3D51	265C6C	247D76	489B6E	89B45C
—	1.4 Fail	2.2 Fail	3.1 AA Large	4.4 AA Large
1.4 Fail	—	1.5 Fail	2.2 Fail	3.1 AA Large
2.2 Fail	1.5 Fail	—	1.4 Fail	2.0 Fail
3.1 AA Large	2.2 Fail	1.4 Fail	—	1.4 Fail
4.4 AA Large	3.1 AA Large	2.0 Fail	1.4 Fail	—

White BG

10.6AAA

7.4AAA

4.9AA

3.4AA Large

2.4Fail

Black BG

2.0Fail

2.8Fail

4.3AA Large

6.2AA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C4C

3D3E68

4B4B78

6C6D79

9C9C71

Deuteranopia

3C3C4B

3A3667

453F78

67617C

999676

Tritanopia

3B4848

296564

287979

4C8183

8B8286

Achromatopsia

3F3F3F

4E4E4E

626262

7D7D7D

9D9D9D

Shades & Tints Shades & Tints

#3B3D51

Dark

Light

#265C6C

Dark

Light

#247D76

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b3d51;
  --color-2: #265c6c;
  --color-3: #247d76;
  --color-4: #489b6e;
  --color-5: #89b45c;
}

SCSS

$color-1: #3b3d51;
$color-2: #265c6c;
$color-3: #247d76;
$color-4: #489b6e;
$color-5: #89b45c;

TAILWIND

colors: {
  'brand-1': '#3b3d51',
  'brand-2': '#265c6c',
  'brand-3': '#247d76',
  'brand-4': '#489b6e',
  'brand-5': '#89b45c',
}

RGB Array

[59, 61, 81], [38, 92, 108], [36, 125, 118], [72, 155, 110], [137, 180, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #3B3D51, #265C6C, #247D76, #489B6E, #89B45C is ideal for: tech websites, dark mode UIs, game UIs. 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: #3b3d51; --color-2: #265c6c; --color-3: #247d76; --color-4: #489b6e; --color-5: #89b45c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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