← Back to Editor

#506270 · #BAA27C · #2B201A · #FED97E · #E7B264

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 LibraryData Visualization

Color Details Color Details

#506270

Slate Blue · DimGray · Prussian Blue

HEX
#506270
RGB
rgb(80, 98, 112)
HSL
hsl(206, 17%, 38%)
HSB
hsb(206, 29%, 44%)
CMYK
cmyk(29%, 13%, 0%, 56%)
Oklch
oklch(48.7% 0.031 241.7)

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

#BAA27C

Ginger · Tan · Warm Sun

HEX
#BAA27C
RGB
rgb(186, 162, 124)
HSL
hsl(37, 31%, 61%)
HSB
hsb(37, 33%, 73%)
CMYK
cmyk(0%, 13%, 33%, 27%)
Oklch
oklch(72.4% 0.059 79.0)

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

#2B201A

Tangerine · Black · Cinnamon

HEX
#2B201A
RGB
rgb(43, 32, 26)
HSL
hsl(21, 25%, 14%)
HSB
hsb(21, 40%, 17%)
CMYK
cmyk(0%, 26%, 40%, 83%)
Oklch
oklch(25.5% 0.020 50.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#FED97E

Goose Yellow · Khaki · Sunflower

HEX
#FED97E
RGB
rgb(254, 217, 126)
HSL
hsl(43, 98%, 75%)
HSB
hsb(43, 50%, 100%)
CMYK
cmyk(0%, 15%, 50%, 0%)
Oklch
oklch(89.8% 0.118 87.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E7B264

Ginger · SandyBrown · Warm Sun

HEX
#E7B264
RGB
rgb(231, 178, 100)
HSL
hsl(36, 73%, 65%)
HSB
hsb(36, 57%, 91%)
CMYK
cmyk(0%, 23%, 57%, 9%)
Oklch
oklch(79.6% 0.114 75.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

506270
715F50

Analogous

50716F
506270
505371

Triadic

506270
715063
637150

Split-Comp.

506270
715053
716F50

Tetradic

506270
6F5071
715F50
537150

Contrast Matrix WCAG 2.1 Contrast

506270
BAA27C
2B201A
FED97E
E7B264
—
2.6
Fail
2.5
Fail
4.6
AA
3.3
AA Large
2.6
Fail
—
6.5
AA
1.8
Fail
1.3
Fail
2.5
Fail
6.5
AA
—
11.7
AAA
8.3
AAA
4.6
AA
1.8
Fail
11.7
AAA
—
1.4
Fail
3.3
AA Large
1.3
Fail
8.3
AAA
1.4
Fail
—
White BG
6.3AA
2.5Fail
15.9AAA
1.4Fail
1.9Fail
Black BG
3.3AA Large
8.5AAA
1.3Fail
15.4AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58586D
B0AF85
26261B
EEEE94
D0D077

Deuteranopia

57556C
B1B387
27281C
F0F399
D3D77B

Tritanopia

516A69
B98C8E
2A1D1D
FCA5A9
E48689

Achromatopsia

5E5E5E
A5A5A5
232323
DADADA
B9B9B9

Shades & Tints Shades & Tints

#506270

Dark
Light

#BAA27C

Dark
Light

#2B201A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #506270;
  --color-2: #baa27c;
  --color-3: #2b201a;
  --color-4: #fed97e;
  --color-5: #e7b264;
}

SCSS

$color-1: #506270;
$color-2: #baa27c;
$color-3: #2b201a;
$color-4: #fed97e;
$color-5: #e7b264;

TAILWIND

colors: {
  'brand-1': '#506270',
  'brand-2': '#baa27c',
  'brand-3': '#2b201a',
  'brand-4': '#fed97e',
  'brand-5': '#e7b264',
}

RGB Array

[80, 98, 112], [186, 162, 124], [43, 32, 26], [254, 217, 126], [231, 178, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #506270, #BAA27C, #2B201A, #FED97E, #E7B264 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #506270; --color-2: #baa27c; --color-3: #2b201a; --color-4: #fed97e; --color-5: #e7b264. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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