← Back to Editor

#6F638A · #6E7E91 · #729E89 · #B8A263 · #FA8D3E

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

#6F638A

Deep Indigo · SlateGray · Navy Blue

HEX
#6F638A
RGB
rgb(111, 99, 138)
HSL
hsl(258, 16%, 46%)
HSB
hsb(258, 28%, 54%)
CMYK
cmyk(20%, 28%, 0%, 46%)
Oklch
oklch(52.6% 0.062 298.4)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

#6E7E91

Indigo · SlateGray · Navy Blue

HEX
#6E7E91
RGB
rgb(110, 126, 145)
HSL
hsl(213, 14%, 50%)
HSB
hsb(213, 24%, 57%)
CMYK
cmyk(24%, 13%, 0%, 43%)
Oklch
oklch(58.7% 0.035 252.8)

TraditionalIndigo」· PaintNavy Blue」· Creative Blush Sunrise

#729E89

Mineral Blue · LightSlateGray · Olive Green

HEX
#729E89
RGB
rgb(114, 158, 137)
HSL
hsl(151, 18%, 53%)
HSB
hsb(151, 28%, 62%)
CMYK
cmyk(28%, 0%, 13%, 38%)
Oklch
oklch(66.1% 0.057 163.7)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#B8A263

Ginger · Tan · Sunflower

HEX
#B8A263
RGB
rgb(184, 162, 99)
HSL
hsl(44, 37%, 55%)
HSB
hsb(44, 46%, 72%)
CMYK
cmyk(0%, 12%, 46%, 28%)
Oklch
oklch(71.7% 0.086 90.8)

TraditionalGinger」· PaintSunflower」· Creative Blush Sunrise

#FA8D3E

Apricot · Coral · Warm Sun

HEX
#FA8D3E
RGB
rgb(250, 141, 62)
HSL
hsl(25, 95%, 61%)
HSB
hsb(25, 75%, 98%)
CMYK
cmyk(0%, 44%, 75%, 2%)
Oklch
oklch(74.8% 0.160 53.0)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F638A
7D8863

Analogous

636A88
6F638A
816388

Triadic

6F638A
886E63
63886E

Split-Comp.

6F638A
888163
6A8863

Tetradic

6F638A
88636A
7D8863
638881

Contrast Matrix WCAG 2.1 Contrast

6F638A
6E7E91
729E89
B8A263
FA8D3E
1.3
Fail
1.8
Fail
2.2
Fail
2.3
Fail
1.3
Fail
1.4
Fail
1.7
Fail
1.8
Fail
1.8
Fail
1.4
Fail
1.2
Fail
1.3
Fail
2.2
Fail
1.7
Fail
1.2
Fail
1.1
Fail
2.3
Fail
1.8
Fail
1.3
Fail
1.1
Fail
White BG
5.5AA
4.2AA Large
3.0AA Large
2.5Fail
2.3Fail
Black BG
3.8AA Large
5.1AA
7.0AA
8.4AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A81
75758C
85858E
AEAE72
CBCA51

Deuteranopia

6B6B7E
74738B
837F8F
B0B176
D1D956

Tritanopia

6E7977
6F8988
749293
B77E81
F56064

Achromatopsia

6B6B6B
7B7B7B
8E8E8E
A1A1A1
A5A5A5

Shades & Tints Shades & Tints

#6F638A

Dark
Light

#6E7E91

Dark
Light

#729E89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f638a;
  --color-2: #6e7e91;
  --color-3: #729e89;
  --color-4: #b8a263;
  --color-5: #fa8d3e;
}

SCSS

$color-1: #6f638a;
$color-2: #6e7e91;
$color-3: #729e89;
$color-4: #b8a263;
$color-5: #fa8d3e;

TAILWIND

colors: {
  'brand-1': '#6f638a',
  'brand-2': '#6e7e91',
  'brand-3': '#729e89',
  'brand-4': '#b8a263',
  'brand-5': '#fa8d3e',
}

RGB Array

[111, 99, 138], [110, 126, 145], [114, 158, 137], [184, 162, 99], [250, 141, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #6F638A, #6E7E91, #729E89, #B8A263, #FA8D3E 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: #6f638a; --color-2: #6e7e91; --color-3: #729e89; --color-4: #b8a263; --color-5: #fa8d3e. 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