#798F5A + #548F68 + #31877D + #247785 + #2A394A · 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

#798F5A

Grass Green · Gray · Olive Green

HEX

#798F5A

RGB

rgb(121, 143, 90)

HSL

hsl(85, 23%, 46%)

HSB

hsb(85, 37%, 56%)

CMYK

cmyk(15%, 0%, 37%, 44%)

Oklch

oklch(61.9% 0.079 126.9)

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

#548F68

Celadon · SeaGreen · Olive Green

HEX

#548F68

RGB

rgb(84, 143, 104)

HSL

hsl(140, 26%, 45%)

HSB

hsb(140, 41%, 56%)

CMYK

cmyk(41%, 0%, 27%, 44%)

Oklch

oklch(59.8% 0.086 154.0)

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

#31877D

Mineral Blue · SeaGreen · Mint Ice

HEX

#31877D

RGB

rgb(49, 135, 125)

HSL

hsl(173, 47%, 36%)

HSB

hsb(173, 64%, 53%)

CMYK

cmyk(64%, 0%, 7%, 47%)

Oklch

oklch(56.9% 0.083 184.5)

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

#247785

Lake Blue · Teal · Mint Ice

HEX

#247785

RGB

rgb(36, 119, 133)

HSL

hsl(189, 57%, 33%)

HSB

hsb(189, 73%, 52%)

CMYK

cmyk(73%, 11%, 0%, 48%)

Oklch

oklch(52.7% 0.080 211.2)

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

#2A394A

Indigo · DarkSlateGray · Prussian Blue

HEX

#2A394A

RGB

rgb(42, 57, 74)

HSL

hsl(212, 28%, 23%)

HSB

hsb(212, 43%, 29%)

CMYK

cmyk(43%, 23%, 0%, 71%)

Oklch

oklch(33.9% 0.036 252.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

798F5A

715A90

Analogous

908C5A

798F5A

5F905A

Triadic

798F5A

5A7A90

905A7A

Split-Comp.

798F5A

5A5F90

8C5A90

Tetradic

798F5A

5A908C

715A90

905A5F

Contrast Matrix WCAG 2.1 Contrast

798F5A	548F68	31877D	247785	2A394A
—	1.1 Fail	1.2 Fail	1.5 Fail	3.3 AA Large
1.1 Fail	—	1.1 Fail	1.4 Fail	3.1 AA Large
1.2 Fail	1.1 Fail	—	1.2 Fail	2.7 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	2.3 Fail
3.3 AA Large	3.1 AA Large	2.7 Fail	2.3 Fail	—

White BG

3.6AA Large

3.8AA Large

4.3AA Large

5.2AA

11.8AAA

Black BG

5.9AA

5.5AA

4.9AA

4.1AA Large

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

838367

6E6E71

56577F

484982

303146

Deuteranopia

81806A

6A6674

514B80

433D81

302F45

Tritanopia

7A7173

57797B

358182

287F7E

2B4342

Achromatopsia

828282

797979

6C6C6C

606060

363636

Shades & Tints Shades & Tints

#798F5A

Dark

Light

#548F68

Dark

Light

#31877D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #798f5a;
  --color-2: #548f68;
  --color-3: #31877d;
  --color-4: #247785;
  --color-5: #2a394a;
}

SCSS

$color-1: #798f5a;
$color-2: #548f68;
$color-3: #31877d;
$color-4: #247785;
$color-5: #2a394a;

TAILWIND

colors: {
  'brand-1': '#798f5a',
  'brand-2': '#548f68',
  'brand-3': '#31877d',
  'brand-4': '#247785',
  'brand-5': '#2a394a',
}

RGB Array

[121, 143, 90], [84, 143, 104], [49, 135, 125], [36, 119, 133], [42, 57, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #798F5A, #548F68, #31877D, #247785, #2A394A 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: #798f5a; --color-2: #548f68; --color-3: #31877d; --color-4: #247785; --color-5: #2a394a. 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