← Back to Editor

#B4A87E · #BB7A40 · #B94F37 · #9B8881 · #9ABD95

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4A87E

Ginger · Tan · Sunflower

HEX
#B4A87E
RGB
rgb(180, 168, 126)
HSL
hsl(47, 26%, 60%)
HSB
hsb(47, 30%, 71%)
CMYK
cmyk(0%, 7%, 30%, 29%)
Oklch
oklch(73.1% 0.059 94.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BB7A40

Tangerine · Chocolate · Amber Brown

HEX
#BB7A40
RGB
rgb(187, 122, 64)
HSL
hsl(28, 49%, 49%)
HSB
hsb(28, 66%, 73%)
CMYK
cmyk(0%, 35%, 66%, 27%)
Oklch
oklch(63.6% 0.110 60.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B94F37

Crimson · Sienna · Passion Red

HEX
#B94F37
RGB
rgb(185, 79, 55)
HSL
hsl(11, 54%, 47%)
HSB
hsb(11, 70%, 73%)
CMYK
cmyk(0%, 57%, 70%, 27%)
Oklch
oklch(56.1% 0.143 34.2)

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

#9B8881

Tangerine · Gray · Warm Sun

HEX
#9B8881
RGB
rgb(155, 136, 129)
HSL
hsl(16, 12%, 56%)
HSB
hsb(16, 17%, 61%)
CMYK
cmyk(0%, 12%, 17%, 39%)
Oklch
oklch(64.2% 0.025 41.3)

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

#9ABD95

Celadon · DarkSeaGreen · Apple Green

HEX
#9ABD95
RGB
rgb(154, 189, 149)
HSL
hsl(113, 23%, 66%)
HSB
hsb(113, 21%, 74%)
CMYK
cmyk(19%, 0%, 21%, 26%)
Oklch
oklch(76.2% 0.068 141.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4A87E
7E8AB4

Analogous

B48E7E
B4A87E
A4B47E

Triadic

B4A87E
7EB4A8
A87EB4

Split-Comp.

B4A87E
7EA4B4
8E7EB4

Tetradic

B4A87E
7EB48E
7E8AB4
B47EA4

Contrast Matrix WCAG 2.1 Contrast

B4A87E
BB7A40
B94F37
9B8881
9ABD95
—
1.5
Fail
2.1
Fail
1.4
Fail
1.1
Fail
1.5
Fail
—
1.4
Fail
1.0
Fail
1.7
Fail
2.1
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
1.4
Fail
1.0
Fail
1.5
Fail
—
1.6
Fail
1.1
Fail
1.7
Fail
2.4
Fail
1.6
Fail
—
White BG
2.4Fail
3.5AA Large
5.0AA
3.4AA Large
2.1Fail
Black BG
8.8AAA
6.0AA
4.2AA Large
6.2AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF88
9F9E4E
8B8A3D
939383
A9A99F

Deuteranopia

B0B08B
A3A851
91993E
949583
A7A5A1

Tritanopia

B39092
B8595C
B44142
9A8484
9CA6A8

Achromatopsia

A7A7A7
878787
6C6C6C
8D8D8D
AEAEAE

Shades & Tints Shades & Tints

#B4A87E

Dark
Light

#BB7A40

Dark
Light

#B94F37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4a87e;
  --color-2: #bb7a40;
  --color-3: #b94f37;
  --color-4: #9b8881;
  --color-5: #9abd95;
}

SCSS

$color-1: #b4a87e;
$color-2: #bb7a40;
$color-3: #b94f37;
$color-4: #9b8881;
$color-5: #9abd95;

TAILWIND

colors: {
  'brand-1': '#b4a87e',
  'brand-2': '#bb7a40',
  'brand-3': '#b94f37',
  'brand-4': '#9b8881',
  'brand-5': '#9abd95',
}

RGB Array

[180, 168, 126], [187, 122, 64], [185, 79, 55], [155, 136, 129], [154, 189, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B4A87E, #BB7A40, #B94F37, #9B8881, #9ABD95 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: #b4a87e; --color-2: #bb7a40; --color-3: #b94f37; --color-4: #9b8881; --color-5: #9abd95. 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