#F0E2BF + #D1C6AA + #C3BCA9 + #D3E2E9 + #C1D5E0 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0E2BF

Goose Yellow · Wheat · Lemon Cream

HEX

#F0E2BF

RGB

rgb(240, 226, 191)

HSL

hsl(43, 62%, 85%)

HSB

hsb(43, 20%, 94%)

CMYK

cmyk(0%, 6%, 20%, 6%)

Oklch

oklch(91.5% 0.048 88.8)

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

#D1C6AA

Goose Yellow · Silver · Sunflower

HEX

#D1C6AA

RGB

rgb(209, 198, 170)

HSL

hsl(43, 30%, 74%)

HSB

hsb(43, 19%, 82%)

CMYK

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

Oklch

oklch(82.8% 0.040 89.1)

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

#C3BCA9

Goose Yellow · Silver · Sunflower

HEX

#C3BCA9

RGB

rgb(195, 188, 169)

HSL

hsl(44, 18%, 71%)

HSB

hsb(44, 13%, 76%)

CMYK

cmyk(0%, 4%, 13%, 24%)

Oklch

oklch(79.6% 0.027 90.1)

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

#D3E2E9

Sky Blue · Lavender · Glacier Blue

HEX

#D3E2E9

RGB

rgb(211, 226, 233)

HSL

hsl(199, 33%, 87%)

HSB

hsb(199, 9%, 91%)

CMYK

cmyk(9%, 3%, 0%, 9%)

Oklch

oklch(90.4% 0.019 227.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#C1D5E0

Sky Blue · LightBlue · Sky Blue

HEX

#C1D5E0

RGB

rgb(193, 213, 224)

HSL

hsl(201, 33%, 82%)

HSB

hsb(201, 14%, 88%)

CMYK

cmyk(14%, 5%, 0%, 12%)

Oklch

oklch(86.1% 0.026 231.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E2BF

C1CEF0

Analogous

F0CBC1

F0E2BF

E6F0C1

Triadic

F0E2BF

C1F0E3

E3C1F0

Split-Comp.

F0E2BF

C1E6F0

CBC1F0

Tetradic

F0E2BF

C1F0CB

C1CEF0

F0C1E6

Contrast Matrix WCAG 2.1 Contrast

F0E2BF	D1C6AA	C3BCA9	D3E2E9	C1D5E0
—	1.3 Fail	1.5 Fail	1.0 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.1 Fail
1.5 Fail	1.1 Fail	—	1.4 Fail	1.3 Fail
1.0 Fail	1.3 Fail	1.4 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.3Fail

1.7Fail

1.9Fail

1.3Fail

1.5Fail

Black BG

16.3AAA

12.4AAA

11.1AAA

15.8AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAC7

CCCCB1

C0C0AE

D9DAE7

CACADD

Deuteranopia

EBECCA

CDCEB2

C0C1AF

D9D8E7

C9C7DD

Tritanopia

EFCED0

D0B6B7

C3B1B2

D4E6E6

C2DBDB

Achromatopsia

E2E2E2

C6C6C6

BCBCBC

DEDEDE

D0D0D0

Shades & Tints Shades & Tints

#F0E2BF

Dark

Light

#D1C6AA

Dark

Light

#C3BCA9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e2bf;
  --color-2: #d1c6aa;
  --color-3: #c3bca9;
  --color-4: #d3e2e9;
  --color-5: #c1d5e0;
}

SCSS

$color-1: #f0e2bf;
$color-2: #d1c6aa;
$color-3: #c3bca9;
$color-4: #d3e2e9;
$color-5: #c1d5e0;

TAILWIND

colors: {
  'brand-1': '#f0e2bf',
  'brand-2': '#d1c6aa',
  'brand-3': '#c3bca9',
  'brand-4': '#d3e2e9',
  'brand-5': '#c1d5e0',
}

RGB Array

[240, 226, 191], [209, 198, 170], [195, 188, 169], [211, 226, 233], [193, 213, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F0E2BF, #D1C6AA, #C3BCA9, #D3E2E9, #C1D5E0 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: #f0e2bf; --color-2: #d1c6aa; --color-3: #c3bca9; --color-4: #d3e2e9; --color-5: #c1d5e0. 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