← Back to Editor

#06857A · #03A573 · #79A782 · #AEAA77 · #D0B87D

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#06857A

Mineral Blue · Teal · Mint Ice

HEX
#06857A
RGB
rgb(6, 133, 122)
HSL
hsl(175, 91%, 27%)
HSB
hsb(175, 95%, 52%)
CMYK
cmyk(95%, 0%, 8%, 48%)
Oklch
oklch(55.5% 0.097 184.7)

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

#03A573

Mineral Blue · Teal · Mint Ice

HEX
#03A573
RGB
rgb(3, 165, 115)
HSL
hsl(161, 96%, 33%)
HSB
hsb(161, 98%, 65%)
CMYK
cmyk(98%, 0%, 30%, 35%)
Oklch
oklch(63.9% 0.138 162.9)

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

#79A782

Celadon · DarkSeaGreen · Olive Green

HEX
#79A782
RGB
rgb(121, 167, 130)
HSL
hsl(132, 21%, 56%)
HSB
hsb(132, 28%, 65%)
CMYK
cmyk(28%, 0%, 22%, 35%)
Oklch
oklch(68.5% 0.073 150.1)

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

#AEAA77

Autumn Sage · Tan · Sunflower

HEX
#AEAA77
RGB
rgb(174, 170, 119)
HSL
hsl(56, 25%, 57%)
HSB
hsb(56, 32%, 68%)
CMYK
cmyk(0%, 2%, 32%, 32%)
Oklch
oklch(72.9% 0.069 104.2)

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

#D0B87D

Ginger · Tan · Sunflower

HEX
#D0B87D
RGB
rgb(208, 184, 125)
HSL
hsl(43, 47%, 65%)
HSB
hsb(43, 40%, 82%)
CMYK
cmyk(0%, 12%, 40%, 18%)
Oklch
oklch(79.0% 0.082 88.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

06857A
840611

Analogous

06843A
06857A
064F84

Triadic

06857A
790684
847906

Split-Comp.

06857A
84064F
843A06

Tetradic

06857A
3A0684
840611
4F8406

Contrast Matrix WCAG 2.1 Contrast

06857A
03A573
79A782
AEAA77
D0B87D
—
1.4
Fail
1.7
Fail
1.9
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
4.5AA
3.2AA Large
2.7Fail
2.4Fail
1.9Fail
Black BG
4.6AA
6.6AA
7.7AAA
8.8AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3E7D
494B7F
8D8D8B
ACAC83
C6C58B

Deuteranopia

362C7D
403482
8A878D
ADAD86
C7C98F

Tritanopia

0C7F7F
0B898B
7B9294
AE8D8F
CF9799

Achromatopsia

5E5E5E
6F6F6F
959595
A5A5A5
B8B8B8

Shades & Tints Shades & Tints

#06857A

Dark
Light

#03A573

Dark
Light

#79A782

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #06857a;
  --color-2: #03a573;
  --color-3: #79a782;
  --color-4: #aeaa77;
  --color-5: #d0b87d;
}

SCSS

$color-1: #06857a;
$color-2: #03a573;
$color-3: #79a782;
$color-4: #aeaa77;
$color-5: #d0b87d;

TAILWIND

colors: {
  'brand-1': '#06857a',
  'brand-2': '#03a573',
  'brand-3': '#79a782',
  'brand-4': '#aeaa77',
  'brand-5': '#d0b87d',
}

RGB Array

[6, 133, 122], [3, 165, 115], [121, 167, 130], [174, 170, 119], [208, 184, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #06857A, #03A573, #79A782, #AEAA77, #D0B87D 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: #06857a; --color-2: #03a573; --color-3: #79a782; --color-4: #aeaa77; --color-5: #d0b87d. 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