#B1E0CC + #97CFC9 + #9E7F56 + #F8BE7F + #FDD784 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1E0CC

Jade · LightBlue · Apple Green

HEX

#B1E0CC

RGB

rgb(177, 224, 204)

HSL

hsl(154, 43%, 79%)

HSB

hsb(154, 21%, 88%)

CMYK

cmyk(21%, 0%, 9%, 12%)

Oklch

oklch(86.8% 0.056 167.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#97CFC9

Jade · LightSteelBlue · Lake Green

HEX

#97CFC9

RGB

rgb(151, 207, 201)

HSL

hsl(174, 37%, 70%)

HSB

hsb(174, 27%, 81%)

CMYK

cmyk(27%, 0%, 3%, 19%)

Oklch

oklch(81.4% 0.058 187.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#9E7F56

Ochre · Gray · Amber Brown

HEX

#9E7F56

RGB

rgb(158, 127, 86)

HSL

hsl(34, 30%, 48%)

HSB

hsb(34, 46%, 62%)

CMYK

cmyk(0%, 20%, 46%, 38%)

Oklch

oklch(61.6% 0.068 73.8)

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

#F8BE7F

Goose Yellow · BurlyWood · Warm Sun

HEX

#F8BE7F

RGB

rgb(248, 190, 127)

HSL

hsl(31, 90%, 74%)

HSB

hsb(31, 49%, 97%)

CMYK

cmyk(0%, 23%, 49%, 3%)

Oklch

oklch(84.0% 0.104 67.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FDD784

Goose Yellow · Khaki · Sunflower

HEX

#FDD784

RGB

rgb(253, 215, 132)

HSL

hsl(41, 97%, 75%)

HSB

hsb(41, 48%, 99%)

CMYK

cmyk(0%, 15%, 48%, 1%)

Oklch

oklch(89.4% 0.110 85.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1E0CC

E0B2C6

Analogous

B2E0B5

B1E0CC

B2DDE0

Triadic

B1E0CC

CDB2E0

E0CDB2

Split-Comp.

B1E0CC

E0B2DD

E0B5B2

Tetradic

B1E0CC

B5B2E0

E0B2C6

DDE0B2

Contrast Matrix WCAG 2.1 Contrast

B1E0CC	97CFC9	9E7F56	F8BE7F	FDD784
—	1.2 Fail	2.6 Fail	1.1 Fail	1.1 Fail
1.2 Fail	—	2.1 Fail	1.0 Fail	1.3 Fail
2.6 Fail	2.1 Fail	—	2.3 Fail	2.7 Fail
1.1 Fail	1.0 Fail	2.3 Fail	—	1.2 Fail
1.1 Fail	1.3 Fail	2.7 Fail	1.2 Fail	—

White BG

1.5Fail

1.7Fail

3.7AA Large

1.7Fail

1.4Fail

Black BG

14.4AAA

12.1AAA

5.6AA

12.7AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6D1

AFB0CA

919060

DFDE8E

EDEC98

Deuteranopia

C3BFD2

ACA8CB

929562

E2E792

EFF29D

Tritanopia

B3D5D6

9ACCCC

9C6869

F59A9D

FBA8AB

Achromatopsia

D0D0D0

BEBEBE

848484

C8C8C8

D9D9D9

Shades & Tints Shades & Tints

#B1E0CC

Dark

Light

#97CFC9

Dark

Light

#9E7F56

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1e0cc;
  --color-2: #97cfc9;
  --color-3: #9e7f56;
  --color-4: #f8be7f;
  --color-5: #fdd784;
}

SCSS

$color-1: #b1e0cc;
$color-2: #97cfc9;
$color-3: #9e7f56;
$color-4: #f8be7f;
$color-5: #fdd784;

TAILWIND

colors: {
  'brand-1': '#b1e0cc',
  'brand-2': '#97cfc9',
  'brand-3': '#9e7f56',
  'brand-4': '#f8be7f',
  'brand-5': '#fdd784',
}

RGB Array

[177, 224, 204], [151, 207, 201], [158, 127, 86], [248, 190, 127], [253, 215, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B1E0CC, #97CFC9, #9E7F56, #F8BE7F, #FDD784 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: #b1e0cc; --color-2: #97cfc9; --color-3: #9e7f56; --color-4: #f8be7f; --color-5: #fdd784. 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