#998B80 + #B8AB9A + #E4D1B1 + #788492 + #F4E3C9 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#998B80

Tangerine · Gray · Warm Sun

HEX

#998B80

RGB

rgb(153, 139, 128)

HSL

hsl(26, 11%, 55%)

HSB

hsb(26, 16%, 60%)

CMYK

cmyk(0%, 9%, 16%, 40%)

Oklch

oklch(64.6% 0.023 60.6)

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

#B8AB9A

Ginger · DarkGray · Warm Sun

HEX

#B8AB9A

RGB

rgb(184, 171, 154)

HSL

hsl(34, 17%, 66%)

HSB

hsb(34, 16%, 72%)

CMYK

cmyk(0%, 7%, 16%, 28%)

Oklch

oklch(74.8% 0.028 74.7)

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

#E4D1B1

Goose Yellow · Wheat · Peach Orange

HEX

#E4D1B1

RGB

rgb(228, 209, 177)

HSL

hsl(38, 49%, 79%)

HSB

hsb(38, 22%, 89%)

CMYK

cmyk(0%, 8%, 22%, 11%)

Oklch

oklch(86.8% 0.048 80.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#788492

Azure · LightSlateGray · Navy Blue

HEX

#788492

RGB

rgb(120, 132, 146)

HSL

hsl(212, 11%, 52%)

HSB

hsb(212, 18%, 57%)

CMYK

cmyk(18%, 10%, 0%, 43%)

Oklch

oklch(60.8% 0.026 252.3)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#F4E3C9

Goose Yellow · Bisque · Peach Orange

HEX

#F4E3C9

RGB

rgb(244, 227, 201)

HSL

hsl(36, 66%, 87%)

HSB

hsb(36, 18%, 96%)

CMYK

cmyk(0%, 7%, 18%, 4%)

Oklch

oklch(92.3% 0.039 78.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

998B80

808E99

Analogous

998081

998B80

999780

Triadic

998B80

80998B

8B8099

Split-Comp.

998B80

809997

808199

Tetradic

998B80

819980

808E99

978099

Contrast Matrix WCAG 2.1 Contrast

998B80	B8AB9A	E4D1B1	788492	F4E3C9
—	1.5 Fail	2.2 Fail	1.2 Fail	2.6 Fail
1.5 Fail	—	1.5 Fail	1.7 Fail	1.8 Fail
2.2 Fail	1.5 Fail	—	2.5 Fail	1.2 Fail
1.2 Fail	1.7 Fail	2.5 Fail	—	3.0 AA Large
2.6 Fail	1.8 Fail	1.2 Fail	3.0 AA Large	—

White BG

3.3AA Large

2.3Fail

1.5Fail

3.8AA Large

1.3Fail

Black BG

6.4AA

9.3AAA

14.1AAA

5.5AA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939383

B2B29E

DCDCB9

7D7D8F

EDECCF

Deuteranopia

949583

B3B49F

DDDEBB

7D7C8E

EEEFD1

Tritanopia

988585

B7A1A2

E3BFC0

798C8B

F3D4D5

Achromatopsia

8E8E8E

ADADAD

D3D3D3

828282

E5E5E5

Shades & Tints Shades & Tints

#998B80

Dark

Light

#B8AB9A

Dark

Light

#E4D1B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #998b80;
  --color-2: #b8ab9a;
  --color-3: #e4d1b1;
  --color-4: #788492;
  --color-5: #f4e3c9;
}

SCSS

$color-1: #998b80;
$color-2: #b8ab9a;
$color-3: #e4d1b1;
$color-4: #788492;
$color-5: #f4e3c9;

TAILWIND

colors: {
  'brand-1': '#998b80',
  'brand-2': '#b8ab9a',
  'brand-3': '#e4d1b1',
  'brand-4': '#788492',
  'brand-5': '#f4e3c9',
}

RGB Array

[153, 139, 128], [184, 171, 154], [228, 209, 177], [120, 132, 146], [244, 227, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #998B80, #B8AB9A, #E4D1B1, #788492, #F4E3C9 is ideal for: health products, baby brands, fresh-style blogs. 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: #998b80; --color-2: #b8ab9a; --color-3: #e4d1b1; --color-4: #788492; --color-5: #f4e3c9. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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