#FFEED4 + #B4B5A7 + #A5C7B4 + #97D9C0 + #88EBCD · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFEED4

Goose Yellow · Beige · Peach Orange

HEX

#FFEED4

RGB

rgb(255, 238, 212)

HSL

hsl(36, 100%, 92%)

HSB

hsb(36, 17%, 100%)

CMYK

cmyk(0%, 7%, 17%, 0%)

Oklch

oklch(95.6% 0.039 78.6)

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

#B4B5A7

Fresh Green · DarkGray · Silver Sand

HEX

#B4B5A7

RGB

rgb(180, 181, 167)

HSL

hsl(64, 9%, 68%)

HSB

hsb(64, 8%, 71%)

CMYK

cmyk(1%, 0%, 8%, 29%)

Oklch

oklch(76.8% 0.020 110.2)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#A5C7B4

Celadon · Silver · Apple Green

HEX

#A5C7B4

RGB

rgb(165, 199, 180)

HSL

hsl(146, 23%, 71%)

HSB

hsb(146, 17%, 78%)

CMYK

cmyk(17%, 0%, 10%, 22%)

Oklch

oklch(79.9% 0.045 160.7)

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

#97D9C0

Jade · LightBlue · Apple Green

HEX

#97D9C0

RGB

rgb(151, 217, 192)

HSL

hsl(157, 46%, 72%)

HSB

hsb(157, 30%, 85%)

CMYK

cmyk(30%, 0%, 12%, 15%)

Oklch

oklch(83.4% 0.076 168.9)

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

#88EBCD

Jade · SkyBlue · Lake Green

HEX

#88EBCD

RGB

rgb(136, 235, 205)

HSL

hsl(162, 71%, 73%)

HSB

hsb(162, 42%, 92%)

CMYK

cmyk(42%, 0%, 13%, 8%)

Oklch

oklch(87.1% 0.103 172.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEED4

D6E7FF

Analogous

FFDAD6

FFEED4

FBFFD6

Triadic

FFEED4

D6FFEF

EFD6FF

Split-Comp.

FFEED4

D6FBFF

DAD6FF

Tetradic

FFEED4

D6FFDA

D6E7FF

FFD6FB

Contrast Matrix WCAG 2.1 Contrast

FFEED4	B4B5A7	A5C7B4	97D9C0	88EBCD
—	1.8 Fail	1.6 Fail	1.4 Fail	1.2 Fail
1.8 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.6 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.1Fail

2.1Fail

1.8Fail

1.6Fail

1.4Fail

Black BG

18.4AAA

10.1AAA

11.4AAA

13.0AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F7DA

B4B4AA

B4B4B9

B4B4C6

B3B4D4

Deuteranopia

F9FADC

B4B4AB

B2AFBA

B0ABC7

ADA6D6

Tritanopia

FEDFE0

B4ADAE

A7BCBD

9ACBCC

8DDADB

Achromatopsia

F0F0F0

B3B3B3

BBBBBB

C2C2C2

CACACA

Shades & Tints Shades & Tints

#FFEED4

Dark

Light

#B4B5A7

Dark

Light

#A5C7B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffeed4;
  --color-2: #b4b5a7;
  --color-3: #a5c7b4;
  --color-4: #97d9c0;
  --color-5: #88ebcd;
}

SCSS

$color-1: #ffeed4;
$color-2: #b4b5a7;
$color-3: #a5c7b4;
$color-4: #97d9c0;
$color-5: #88ebcd;

TAILWIND

colors: {
  'brand-1': '#ffeed4',
  'brand-2': '#b4b5a7',
  'brand-3': '#a5c7b4',
  'brand-4': '#97d9c0',
  'brand-5': '#88ebcd',
}

RGB Array

[255, 238, 212], [180, 181, 167], [165, 199, 180], [151, 217, 192], [136, 235, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FFEED4, #B4B5A7, #A5C7B4, #97D9C0, #88EBCD 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: #ffeed4; --color-2: #b4b5a7; --color-3: #a5c7b4; --color-4: #97d9c0; --color-5: #88ebcd. 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