← Back to Editor

#BBAA9A · #849B95 · #90856F · #B6554C · #D83A31

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 Library

Color Details Color Details

#BBAA9A

Apricot · DarkGray · Warm Sun

HEX
#BBAA9A
RGB
rgb(187, 170, 154)
HSL
hsl(29, 20%, 67%)
HSB
hsb(29, 18%, 73%)
CMYK
cmyk(0%, 9%, 18%, 27%)
Oklch
oklch(74.8% 0.030 65.6)

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

#849B95

Mineral Blue · LightSlateGray · Lake Green

HEX
#849B95
RGB
rgb(132, 155, 149)
HSL
hsl(164, 10%, 56%)
HSB
hsb(164, 15%, 61%)
CMYK
cmyk(15%, 0%, 4%, 39%)
Oklch
oklch(67.0% 0.027 177.9)

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

#90856F

Ochre · Gray · Honey Gold

HEX
#90856F
RGB
rgb(144, 133, 111)
HSL
hsl(40, 13%, 50%)
HSB
hsb(40, 23%, 56%)
CMYK
cmyk(0%, 8%, 23%, 44%)
Oklch
oklch(62.0% 0.034 84.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#B6554C

Crimson · Sienna · Passion Red

HEX
#B6554C
RGB
rgb(182, 85, 76)
HSL
hsl(5, 42%, 51%)
HSB
hsb(5, 58%, 71%)
CMYK
cmyk(0%, 53%, 58%, 29%)
Oklch
oklch(56.8% 0.128 27.2)

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

#D83A31

Vermilion · Crimson · Passion Red

HEX
#D83A31
RGB
rgb(216, 58, 49)
HSL
hsl(3, 68%, 52%)
HSB
hsb(3, 77%, 85%)
CMYK
cmyk(0%, 73%, 77%, 15%)
Oklch
oklch(58.6% 0.196 28.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBAA9A
9AABBC

Analogous

BC9A9B
BBAA9A
BCBB9A

Triadic

BBAA9A
9ABCAA
AA9ABC

Split-Comp.

BBAA9A
9ABCBB
9A9BBC

Tetradic

BBAA9A
9BBC9A
9AABBC
BB9ABC

Contrast Matrix WCAG 2.1 Contrast

BBAA9A
849B95
90856F
B6554C
D83A31
—
1.3
Fail
1.6
Fail
2.1
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.6
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.3
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.0
Fail
2.0
Fail
1.6
Fail
1.3
Fail
1.0
Fail
—
White BG
2.3Fail
3.0Fail
3.6AA Large
4.8AA
4.6AA
Black BG
9.3AAA
7.1AAA
5.8AA
4.4AA Large
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B39E
8E8E96
8B8B74
8C8B4E
949233

Deuteranopia

B5B69F
8D8B97
8C8D76
92994F
9DA934

Tritanopia

BAA1A2
859898
8F7979
B15050
D03535

Achromatopsia

ADADAD
939393
868686
717171
686868

Shades & Tints Shades & Tints

#BBAA9A

Dark
Light

#849B95

Dark
Light

#90856F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbaa9a;
  --color-2: #849b95;
  --color-3: #90856f;
  --color-4: #b6554c;
  --color-5: #d83a31;
}

SCSS

$color-1: #bbaa9a;
$color-2: #849b95;
$color-3: #90856f;
$color-4: #b6554c;
$color-5: #d83a31;

TAILWIND

colors: {
  'brand-1': '#bbaa9a',
  'brand-2': '#849b95',
  'brand-3': '#90856f',
  'brand-4': '#b6554c',
  'brand-5': '#d83a31',
}

RGB Array

[187, 170, 154], [132, 155, 149], [144, 133, 111], [182, 85, 76], [216, 58, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #BBAA9A, #849B95, #90856F, #B6554C, #D83A31 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: #bbaa9a; --color-2: #849b95; --color-3: #90856f; --color-4: #b6554c; --color-5: #d83a31. 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