#89ABA9 + #FF8D71 + #FA5B34 + #BD3A20 + #B5C4B4 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#89ABA9

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#89ABA9

RGB

rgb(137, 171, 169)

HSL

hsl(176, 17%, 60%)

HSB

hsb(176, 20%, 67%)

CMYK

cmyk(20%, 0%, 1%, 33%)

Oklch

oklch(71.5% 0.037 191.9)

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

#FF8D71

Peach Pink · Salmon · Coral Red

HEX

#FF8D71

RGB

rgb(255, 141, 113)

HSL

hsl(12, 100%, 72%)

HSB

hsb(12, 56%, 100%)

CMYK

cmyk(0%, 45%, 56%, 0%)

Oklch

oklch(76.1% 0.144 34.8)

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

#FA5B34

Vermilion · Tomato · Passion Red

HEX

#FA5B34

RGB

rgb(250, 91, 52)

HSL

hsl(12, 95%, 59%)

HSB

hsb(12, 79%, 98%)

CMYK

cmyk(0%, 64%, 79%, 2%)

Oklch

oklch(67.7% 0.201 34.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#BD3A20

Vermilion · FireBrick · Passion Red

HEX

#BD3A20

RGB

rgb(189, 58, 32)

HSL

hsl(10, 71%, 43%)

HSB

hsb(10, 83%, 74%)

CMYK

cmyk(0%, 69%, 83%, 26%)

Oklch

oklch(53.8% 0.172 33.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B5C4B4

Celadon · Silver · Apple Green

HEX

#B5C4B4

RGB

rgb(181, 196, 180)

HSL

hsl(116, 12%, 74%)

HSB

hsb(116, 8%, 77%)

CMYK

cmyk(8%, 0%, 8%, 23%)

Oklch

oklch(80.4% 0.028 143.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89ABA9

AA888A

Analogous

88AA97

89ABA9

889BAA

Triadic

89ABA9

A888AA

AAA888

Split-Comp.

89ABA9

AA889B

AA9788

Tetradic

89ABA9

9788AA

AA888A

9BAA88

Contrast Matrix WCAG 2.1 Contrast

89ABA9	FF8D71	FA5B34	BD3A20	B5C4B4
—	1.1 Fail	1.3 Fail	2.2 Fail	1.4 Fail
1.1 Fail	—	1.4 Fail	2.5 Fail	1.2 Fail
1.3 Fail	1.4 Fail	—	1.7 Fail	1.7 Fail
2.2 Fail	2.5 Fail	1.7 Fail	—	3.0 AA Large
1.4 Fail	1.2 Fail	1.7 Fail	3.0 AA Large	—

White BG

2.5Fail

2.3Fail

3.2AA Large

5.5AA

1.8Fail

Black BG

8.5AAA

9.3AAA

6.6AA

3.8AA Large

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898A9

CECD78

B5B43D

848326

BBBCB8

Deuteranopia

9693AA

D4DD79

BECA40

8C9628

BBBAB9

Tritanopia

8BAAAA

F97D7E

F24547

B62B2C

B6BBBC

Achromatopsia

A1A1A1

ACACAC

868686

5E5E5E

BEBEBE

Shades & Tints Shades & Tints

#89ABA9

Dark

Light

#FF8D71

Dark

Light

#FA5B34

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89aba9;
  --color-2: #ff8d71;
  --color-3: #fa5b34;
  --color-4: #bd3a20;
  --color-5: #b5c4b4;
}

SCSS

$color-1: #89aba9;
$color-2: #ff8d71;
$color-3: #fa5b34;
$color-4: #bd3a20;
$color-5: #b5c4b4;

TAILWIND

colors: {
  'brand-1': '#89aba9',
  'brand-2': '#ff8d71',
  'brand-3': '#fa5b34',
  'brand-4': '#bd3a20',
  'brand-5': '#b5c4b4',
}

RGB Array

[137, 171, 169], [255, 141, 113], [250, 91, 52], [189, 58, 32], [181, 196, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #89ABA9, #FF8D71, #FA5B34, #BD3A20, #B5C4B4 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: #89aba9; --color-2: #ff8d71; --color-3: #fa5b34; --color-4: #bd3a20; --color-5: #b5c4b4. 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