#F7D5B0 + #F7DFD5 + #A0DED3 + #83C9D3 + #9E7F7A · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7D5B0

Goose Yellow · Wheat · Peach Orange

HEX

#F7D5B0

RGB

rgb(247, 213, 176)

HSL

hsl(31, 82%, 83%)

HSB

hsb(31, 29%, 97%)

CMYK

cmyk(0%, 14%, 29%, 3%)

Oklch

oklch(89.2% 0.062 69.3)

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

#F7DFD5

Apricot · Bisque · Peach Orange

HEX

#F7DFD5

RGB

rgb(247, 223, 213)

HSL

hsl(18, 68%, 90%)

HSB

hsb(18, 14%, 97%)

CMYK

cmyk(0%, 10%, 14%, 3%)

Oklch

oklch(92.0% 0.030 44.0)

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

#A0DED3

Jade · LightBlue · Lake Green

HEX

#A0DED3

RGB

rgb(160, 222, 211)

HSL

hsl(169, 48%, 75%)

HSB

hsb(169, 28%, 87%)

CMYK

cmyk(28%, 0%, 5%, 13%)

Oklch

oklch(85.6% 0.065 182.5)

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

#83C9D3

Sky Blue · SkyBlue · Lake Green

HEX

#83C9D3

RGB

rgb(131, 201, 211)

HSL

hsl(188, 48%, 67%)

HSB

hsb(188, 38%, 83%)

CMYK

cmyk(38%, 5%, 0%, 17%)

Oklch

oklch(79.3% 0.072 207.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9E7F7A

Crimson · Gray · Passion Red

HEX

#9E7F7A

RGB

rgb(158, 127, 122)

HSL

hsl(8, 16%, 55%)

HSB

hsb(8, 23%, 62%)

CMYK

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

Oklch

oklch(62.4% 0.039 28.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D5B0

B0D2F7

Analogous

F7B1B0

F7D5B0

F6F7B0

Triadic

F7D5B0

B0F7D5

D5B0F7

Split-Comp.

F7D5B0

B0F6F7

B1B0F7

Tetradic

F7D5B0

B0F7B1

B0D2F7

F7B0F6

Contrast Matrix WCAG 2.1 Contrast

F7D5B0	F7DFD5	A0DED3	83C9D3	9E7F7A
—	1.1 Fail	1.1 Fail	1.3 Fail	2.6 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.9 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	2.4 Fail
1.3 Fail	1.5 Fail	1.2 Fail	—	2.0 Fail
2.6 Fail	2.9 Fail	2.4 Fail	2.0 Fail	—

White BG

1.4Fail

1.3Fail

1.5Fail

1.9Fail

3.6AA Large

Black BG

15.1AAA

16.5AAA

13.9AAA

11.3AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8B9

EDECD7

BBBBD6

A1A2D1

91907B

Deuteranopia

EAEDBB

EEF0D8

B7B3D6

9D98D0

92957C

Tritanopia

F5C0C2

F6D9DA

A3D8D8

87CFCE

9C7C7C

Achromatopsia

DBDBDB

E5E5E5

CACACA

B5B5B5

888888

Shades & Tints Shades & Tints

#F7D5B0

Dark

Light

#F7DFD5

Dark

Light

#A0DED3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d5b0;
  --color-2: #f7dfd5;
  --color-3: #a0ded3;
  --color-4: #83c9d3;
  --color-5: #9e7f7a;
}

SCSS

$color-1: #f7d5b0;
$color-2: #f7dfd5;
$color-3: #a0ded3;
$color-4: #83c9d3;
$color-5: #9e7f7a;

TAILWIND

colors: {
  'brand-1': '#f7d5b0',
  'brand-2': '#f7dfd5',
  'brand-3': '#a0ded3',
  'brand-4': '#83c9d3',
  'brand-5': '#9e7f7a',
}

RGB Array

[247, 213, 176], [247, 223, 213], [160, 222, 211], [131, 201, 211], [158, 127, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F7D5B0, #F7DFD5, #A0DED3, #83C9D3, #9E7F7A 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: #f7d5b0; --color-2: #f7dfd5; --color-3: #a0ded3; --color-4: #83c9d3; --color-5: #9e7f7a. 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