← Back to Editor

#23877A · #D4BA8E · #FF8A8A · #96A84D · #D18B60

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

#23877A

Mineral Blue · Teal · Mint Ice

HEX
#23877A
RGB
rgb(35, 135, 122)
HSL
hsl(172, 59%, 33%)
HSB
hsb(172, 74%, 53%)
CMYK
cmyk(74%, 0%, 10%, 47%)
Oklch
oklch(56.4% 0.091 182.3)

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

#D4BA8E

Ginger · Tan · Warm Sun

HEX
#D4BA8E
RGB
rgb(212, 186, 142)
HSL
hsl(38, 45%, 69%)
HSB
hsb(38, 33%, 83%)
CMYK
cmyk(0%, 12%, 33%, 17%)
Oklch
oklch(80.0% 0.066 80.6)

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

#FF8A8A

Peach Pink · LightCoral · Coral Red

HEX
#FF8A8A
RGB
rgb(255, 138, 138)
HSL
hsl(0, 100%, 77%)
HSB
hsb(0, 46%, 100%)
CMYK
cmyk(0%, 46%, 46%, 0%)
Oklch
oklch(76.1% 0.142 20.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#96A84D

Grass Green · Gray · Olive Green

HEX
#96A84D
RGB
rgb(150, 168, 77)
HSL
hsl(72, 37%, 48%)
HSB
hsb(72, 54%, 66%)
CMYK
cmyk(11%, 0%, 54%, 34%)
Oklch
oklch(69.8% 0.119 118.9)

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

#D18B60

Tangerine · DarkSalmon · Warm Sun

HEX
#D18B60
RGB
rgb(209, 139, 96)
HSL
hsl(23, 55%, 60%)
HSB
hsb(23, 54%, 82%)
CMYK
cmyk(0%, 33%, 54%, 18%)
Oklch
oklch(69.8% 0.104 51.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

23877A
862330

Analogous

238647
23877A
236186

Triadic

23877A
792386
867923

Split-Comp.

23877A
862361
864723

Tetradic

23877A
472386
862330
618623

Contrast Matrix WCAG 2.1 Contrast

23877A
D4BA8E
FF8A8A
96A84D
D18B60
—
2.3
Fail
1.9
Fail
1.7
Fail
1.6
Fail
2.3
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
4.4AA Large
1.9Fail
2.3Fail
2.6Fail
2.8Fail
Black BG
4.8AA
11.2AAA
9.3AAA
8.0AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4F7D
C9C999
CCCB8A
9E9E63
B3B26A

Deuteranopia

49417E
CACC9B
D3DC8A
9D9B68
B7BC6D

Tritanopia

288080
D3A1A3
F98A8A
977478
CD7374

Achromatopsia

686868
BDBDBD
ADADAD
989898
9B9B9B

Shades & Tints Shades & Tints

#23877A

Dark
Light

#D4BA8E

Dark
Light

#FF8A8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #23877a;
  --color-2: #d4ba8e;
  --color-3: #ff8a8a;
  --color-4: #96a84d;
  --color-5: #d18b60;
}

SCSS

$color-1: #23877a;
$color-2: #d4ba8e;
$color-3: #ff8a8a;
$color-4: #96a84d;
$color-5: #d18b60;

TAILWIND

colors: {
  'brand-1': '#23877a',
  'brand-2': '#d4ba8e',
  'brand-3': '#ff8a8a',
  'brand-4': '#96a84d',
  'brand-5': '#d18b60',
}

RGB Array

[35, 135, 122], [212, 186, 142], [255, 138, 138], [150, 168, 77], [209, 139, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #23877A, #D4BA8E, #FF8A8A, #96A84D, #D18B60 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: #23877a; --color-2: #d4ba8e; --color-3: #ff8a8a; --color-4: #96a84d; --color-5: #d18b60. 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