← Back to Editor

#1B8F7C · #4ABF8B · #474328 · #201B17 · #3E1F2F

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

#1B8F7C

Mineral Blue · Teal · Mint Ice

HEX
#1B8F7C
RGB
rgb(27, 143, 124)
HSL
hsl(170, 68%, 33%)
HSB
hsb(170, 81%, 56%)
CMYK
cmyk(81%, 0%, 13%, 44%)
Oklch
oklch(58.5% 0.101 178.3)

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

#4ABF8B

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#4ABF8B
RGB
rgb(74, 191, 139)
HSL
hsl(153, 48%, 52%)
HSB
hsb(153, 61%, 75%)
CMYK
cmyk(61%, 0%, 27%, 25%)
Oklch
oklch(72.5% 0.131 161.1)

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

#474328

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#474328
RGB
rgb(71, 67, 40)
HSL
hsl(52, 28%, 22%)
HSB
hsb(52, 44%, 28%)
CMYK
cmyk(0%, 6%, 44%, 72%)
Oklch
oklch(37.9% 0.042 100.9)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#201B17

Tangerine · Black · Cinnamon

HEX
#201B17
RGB
rgb(32, 27, 23)
HSL
hsl(27, 16%, 11%)
HSB
hsb(27, 28%, 13%)
CMYK
cmyk(0%, 16%, 28%, 87%)
Oklch
oklch(22.7% 0.011 60.9)

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

#3E1F2F

Rose Purple · DarkSlateGray · Raspberry

HEX
#3E1F2F
RGB
rgb(62, 31, 47)
HSL
hsl(329, 33%, 18%)
HSB
hsb(329, 50%, 24%)
CMYK
cmyk(0%, 50%, 24%, 76%)
Oklch
oklch(28.8% 0.053 348.7)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B8F7C
8D1B2E

Analogous

1B8D41
1B8F7C
1B678D

Triadic

1B8F7C
7A1B8D
8D7A1B

Split-Comp.

1B8F7C
8D1B67
8D411B

Tetradic

1B8F7C
411B8D
8D1B2E
678D1B

Contrast Matrix WCAG 2.1 Contrast

1B8F7C
4ABF8B
474328
201B17
3E1F2F
—
1.7
Fail
2.5
Fail
4.3
AA Large
3.7
AA Large
1.7
Fail
—
4.3
AA Large
7.4
AAA
6.3
AA
2.5
Fail
4.3
AA Large
—
1.7
Fail
1.5
Fail
4.3
AA Large
7.4
AAA
1.7
Fail
—
1.2
Fail
3.7
AA Large
6.3
AA
1.5
Fail
1.2
Fail
—
White BG
4.0AA Large
2.3Fail
10.0AAA
17.1AAA
14.6AAA
Black BG
5.3AA
9.1AAA
2.1Fail
1.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4E81
7D7E98
45452F
1E1E18
31302B

Deuteranopia

473E82
766D9B
464630
1E1F18
32352A

Tritanopia

218485
50A2A4
473435
201919
3C2827

Achromatopsia

6A6A6A
969696
414141
1C1C1C
2A2A2A

Shades & Tints Shades & Tints

#1B8F7C

Dark
Light

#4ABF8B

Dark
Light

#474328

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b8f7c;
  --color-2: #4abf8b;
  --color-3: #474328;
  --color-4: #201b17;
  --color-5: #3e1f2f;
}

SCSS

$color-1: #1b8f7c;
$color-2: #4abf8b;
$color-3: #474328;
$color-4: #201b17;
$color-5: #3e1f2f;

TAILWIND

colors: {
  'brand-1': '#1b8f7c',
  'brand-2': '#4abf8b',
  'brand-3': '#474328',
  'brand-4': '#201b17',
  'brand-5': '#3e1f2f',
}

RGB Array

[27, 143, 124], [74, 191, 139], [71, 67, 40], [32, 27, 23], [62, 31, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #1B8F7C, #4ABF8B, #474328, #201B17, #3E1F2F is ideal for: tech websites, dark mode UIs, game UIs, 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: #1b8f7c; --color-2: #4abf8b; --color-3: #474328; --color-4: #201b17; --color-5: #3e1f2f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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