#3A4D4B + #1B665E + #79946A + #A6A56E + #CCA672 · 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

#3A4D4B

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#3A4D4B

RGB

rgb(58, 77, 75)

HSL

hsl(174, 14%, 26%)

HSB

hsb(174, 25%, 30%)

CMYK

cmyk(25%, 0%, 3%, 70%)

Oklch

oklch(40.4% 0.024 188.3)

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

#1B665E

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#1B665E

RGB

rgb(27, 102, 94)

HSL

hsl(174, 58%, 25%)

HSB

hsb(174, 74%, 40%)

CMYK

cmyk(74%, 0%, 8%, 60%)

Oklch

oklch(46.3% 0.072 184.7)

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

#79946A

Celadon · Gray · Olive Green

HEX

#79946A

RGB

rgb(121, 148, 106)

HSL

hsl(99, 17%, 50%)

HSB

hsb(99, 28%, 58%)

CMYK

cmyk(18%, 0%, 28%, 42%)

Oklch

oklch(63.4% 0.068 134.7)

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

#A6A56E

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A6A56E

RGB

rgb(166, 165, 110)

HSL

hsl(59, 24%, 54%)

HSB

hsb(59, 34%, 65%)

CMYK

cmyk(0%, 1%, 34%, 35%)

Oklch

oklch(70.9% 0.074 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CCA672

Ginger · Tan · Warm Sun

HEX

#CCA672

RGB

rgb(204, 166, 114)

HSL

hsl(35, 47%, 62%)

HSB

hsb(35, 44%, 80%)

CMYK

cmyk(0%, 19%, 44%, 20%)

Oklch

oklch(74.8% 0.082 74.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A4D4B

4C393B

Analogous

394C40

3A4D4B

39444C

Triadic

3A4D4B

4A394C

4C4A39

Split-Comp.

3A4D4B

4C3944

4C4039

Tetradic

3A4D4B

40394C

4C393B

444C39

Contrast Matrix WCAG 2.1 Contrast

3A4D4B	1B665E	79946A	A6A56E	CCA672
—	1.3 Fail	2.7 Fail	3.5 AA Large	4.0 AA Large
1.3 Fail	—	2.0 Fail	2.6 Fail	3.0 Fail
2.7 Fail	2.0 Fail	—	1.3 Fail	1.5 Fail
3.5 AA Large	2.6 Fail	1.3 Fail	—	1.1 Fail
4.0 AA Large	3.0 Fail	1.5 Fail	1.1 Fail	—

White BG

9.0AAA

6.8AA

3.4AA Large

2.6Fail

2.3Fail

Black BG

2.3Fail

3.1AA Large

6.3AA

8.2AAA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42424B

3B3C60

858574

A6A67B

BCBB7F

Deuteranopia

41404C

373260

838177

A6A67F

BEC182

Tritanopia

3B4C4C

1F6162

7A7C7E

A68688

CA898B

Achromatopsia

474747

4F4F4F

878787

9F9F9F

ABABAB

Shades & Tints Shades & Tints

#3A4D4B

Dark

Light

#1B665E

Dark

Light

#79946A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a4d4b;
  --color-2: #1b665e;
  --color-3: #79946a;
  --color-4: #a6a56e;
  --color-5: #cca672;
}

SCSS

$color-1: #3a4d4b;
$color-2: #1b665e;
$color-3: #79946a;
$color-4: #a6a56e;
$color-5: #cca672;

TAILWIND

colors: {
  'brand-1': '#3a4d4b',
  'brand-2': '#1b665e',
  'brand-3': '#79946a',
  'brand-4': '#a6a56e',
  'brand-5': '#cca672',
}

RGB Array

[58, 77, 75], [27, 102, 94], [121, 148, 106], [166, 165, 110], [204, 166, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #3A4D4B, #1B665E, #79946A, #A6A56E, #CCA672 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: #3a4d4b; --color-2: #1b665e; --color-3: #79946a; --color-4: #a6a56e; --color-5: #cca672. 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