#F5D38E + #F8B398 + #D695A8 + #AA8BB8 + #5F8BB8 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5D38E

Goose Yellow · Khaki · Lemon Cream

HEX

#F5D38E

RGB

rgb(245, 211, 142)

HSL

hsl(40, 84%, 76%)

HSB

hsb(40, 42%, 96%)

CMYK

cmyk(0%, 14%, 42%, 4%)

Oklch

oklch(88.0% 0.095 84.4)

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

#F8B398

Apricot · BurlyWood · Peach Orange

HEX

#F8B398

RGB

rgb(248, 179, 152)

HSL

hsl(17, 87%, 78%)

HSB

hsb(17, 39%, 97%)

CMYK

cmyk(0%, 28%, 39%, 3%)

Oklch

oklch(82.5% 0.089 42.3)

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

#D695A8

Rouge · Tan · Rose Pink

HEX

#D695A8

RGB

rgb(214, 149, 168)

HSL

hsl(342, 44%, 71%)

HSB

hsb(342, 30%, 84%)

CMYK

cmyk(0%, 30%, 21%, 16%)

Oklch

oklch(73.9% 0.082 0.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#AA8BB8

Lilac · DarkGray · Lilac Purple

HEX

#AA8BB8

RGB

rgb(170, 139, 184)

HSL

hsl(281, 24%, 63%)

HSB

hsb(281, 24%, 72%)

CMYK

cmyk(8%, 24%, 0%, 28%)

Oklch

oklch(68.1% 0.074 315.2)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#5F8BB8

Azure · SteelBlue · Navy Blue

HEX

#5F8BB8

RGB

rgb(95, 139, 184)

HSL

hsl(210, 39%, 55%)

HSB

hsb(210, 48%, 72%)

CMYK

cmyk(48%, 24%, 0%, 28%)

Oklch

oklch(62.3% 0.084 249.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5D38E

8EB1F5

Analogous

F5A08E

F5D38E

E4F58E

Triadic

F5D38E

8EF5D3

D38EF5

Split-Comp.

F5D38E

8EE4F5

A08EF5

Tetradic

F5D38E

8EF5A0

8EB1F5

F58EE4

Contrast Matrix WCAG 2.1 Contrast

F5D38E	F8B398	D695A8	AA8BB8	5F8BB8
—	1.2 Fail	1.7 Fail	2.1 Fail	2.5 Fail
1.2 Fail	—	1.4 Fail	1.7 Fail	2.0 Fail
1.7 Fail	1.4 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	2.0 Fail	1.5 Fail	1.2 Fail	—

White BG

1.4Fail

1.8Fail

2.4Fail

3.0Fail

3.6AA Large

Black BG

14.6AAA

11.9AAA

8.7AAA

7.1AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E69F

DADA9F

BAB9A3

9D9CAD

7272AD

Deuteranopia

E8EBA3

DEE3A0

BEC2A2

9EA1AA

706CAA

Tritanopia

F3ACAF

F5A4A5

D3A09F

A8A5A3

61A5A3

Achromatopsia

D5D5D5

C5C5C5

ABABAB

999999

838383

Shades & Tints Shades & Tints

#F5D38E

Dark

Light

#F8B398

Dark

Light

#D695A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5d38e;
  --color-2: #f8b398;
  --color-3: #d695a8;
  --color-4: #aa8bb8;
  --color-5: #5f8bb8;
}

SCSS

$color-1: #f5d38e;
$color-2: #f8b398;
$color-3: #d695a8;
$color-4: #aa8bb8;
$color-5: #5f8bb8;

TAILWIND

colors: {
  'brand-1': '#f5d38e',
  'brand-2': '#f8b398',
  'brand-3': '#d695a8',
  'brand-4': '#aa8bb8',
  'brand-5': '#5f8bb8',
}

RGB Array

[245, 211, 142], [248, 179, 152], [214, 149, 168], [170, 139, 184], [95, 139, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F5D38E, #F8B398, #D695A8, #AA8BB8, #5F8BB8 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: #f5d38e; --color-2: #f8b398; --color-3: #d695a8; --color-4: #aa8bb8; --color-5: #5f8bb8. 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