#F3DAC4 + #BCCCA8 + #90C3B2 + #91AFAD + #7D8298 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F3DAC4

Apricot · Bisque · Peach Orange

HEX

#F3DAC4

RGB

rgb(243, 218, 196)

HSL

hsl(28, 66%, 86%)

HSB

hsb(28, 19%, 95%)

CMYK

cmyk(0%, 10%, 19%, 5%)

Oklch

oklch(90.3% 0.040 63.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#BCCCA8

Willow Green · Silver · Apple Green

HEX

#BCCCA8

RGB

rgb(188, 204, 168)

HSL

hsl(87, 26%, 73%)

HSB

hsb(87, 18%, 80%)

CMYK

cmyk(8%, 0%, 18%, 20%)

Oklch

oklch(82.3% 0.052 127.0)

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

#90C3B2

Jade · DarkSeaGreen · Lake Green

HEX

#90C3B2

RGB

rgb(144, 195, 178)

HSL

hsl(160, 30%, 66%)

HSB

hsb(160, 26%, 76%)

CMYK

cmyk(26%, 0%, 9%, 24%)

Oklch

oklch(77.6% 0.059 172.1)

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

#91AFAD

Jade · DarkGray · Lake Green

HEX

#91AFAD

RGB

rgb(145, 175, 173)

HSL

hsl(176, 16%, 63%)

HSB

hsb(176, 17%, 69%)

CMYK

cmyk(17%, 0%, 1%, 31%)

Oklch

oklch(73.1% 0.033 191.5)

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

#7D8298

Azure · LightSlateGray · Navy Blue

HEX

#7D8298

RGB

rgb(125, 130, 152)

HSL

hsl(229, 12%, 54%)

HSB

hsb(229, 18%, 60%)

CMYK

cmyk(18%, 14%, 0%, 40%)

Oklch

oklch(61.0% 0.034 275.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3DAC4

C4DDF3

Analogous

F3C4C5

F3DAC4

F3F1C4

Triadic

F3DAC4

C4F3DA

DAC4F3

Split-Comp.

F3DAC4

C4F3F1

C4C5F3

Tetradic

F3DAC4

C5F3C4

C4DDF3

F1C4F3

Contrast Matrix WCAG 2.1 Contrast

F3DAC4	BCCCA8	90C3B2	91AFAD	7D8298
—	1.3 Fail	1.5 Fail	1.7 Fail	2.8 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	2.2 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.9 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.6 Fail
2.8 Fail	2.2 Fail	1.9 Fail	1.6 Fail	—

White BG

1.3Fail

1.7Fail

2.0Fail

2.3Fail

3.8AA Large

Black BG

15.6AAA

12.3AAA

10.6AAA

8.9AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8C9

C3C3B1

A6A7B6

9E9EAD

7F7F93

Deuteranopia

EAECCB

C2C1B3

A39FB7

9C9AAE

7F7F91

Tritanopia

F2CECE

BDB8B9

93B9BA

93AEAE

7D8E8E

Achromatopsia

DFDFDF

C3C3C3

B2B2B2

A6A6A6

838383

Shades & Tints Shades & Tints

#F3DAC4

Dark

Light

#BCCCA8

Dark

Light

#90C3B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3dac4;
  --color-2: #bccca8;
  --color-3: #90c3b2;
  --color-4: #91afad;
  --color-5: #7d8298;
}

SCSS

$color-1: #f3dac4;
$color-2: #bccca8;
$color-3: #90c3b2;
$color-4: #91afad;
$color-5: #7d8298;

TAILWIND

colors: {
  'brand-1': '#f3dac4',
  'brand-2': '#bccca8',
  'brand-3': '#90c3b2',
  'brand-4': '#91afad',
  'brand-5': '#7d8298',
}

RGB Array

[243, 218, 196], [188, 204, 168], [144, 195, 178], [145, 175, 173], [125, 130, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F3DAC4, #BCCCA8, #90C3B2, #91AFAD, #7D8298 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: #f3dac4; --color-2: #bccca8; --color-3: #90c3b2; --color-4: #91afad; --color-5: #7d8298. 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