#F4D6B0 + #CFC496 + #AEB999 + #B8A996 + #F4B0A5 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4D6B0

Goose Yellow · Wheat · Peach Orange

HEX

#F4D6B0

RGB

rgb(244, 214, 176)

HSL

hsl(34, 76%, 82%)

HSB

hsb(34, 28%, 96%)

CMYK

cmyk(0%, 12%, 28%, 4%)

Oklch

oklch(89.2% 0.060 73.5)

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

#CFC496

Ginger · Tan · Sunflower

HEX

#CFC496

RGB

rgb(207, 196, 150)

HSL

hsl(48, 37%, 70%)

HSB

hsb(48, 28%, 81%)

CMYK

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

Oklch

oklch(81.8% 0.062 96.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#AEB999

Willow Green · DarkGray · Apple Green

HEX

#AEB999

RGB

rgb(174, 185, 153)

HSL

hsl(81, 19%, 66%)

HSB

hsb(81, 17%, 73%)

CMYK

cmyk(6%, 0%, 17%, 27%)

Oklch

oklch(76.8% 0.046 122.9)

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

#B8A996

Ginger · DarkGray · Warm Sun

HEX

#B8A996

RGB

rgb(184, 169, 150)

HSL

hsl(34, 19%, 65%)

HSB

hsb(34, 18%, 72%)

CMYK

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

Oklch

oklch(74.2% 0.032 73.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F4B0A5

Peach Pink · LightPink · Coral Red

HEX

#F4B0A5

RGB

rgb(244, 176, 165)

HSL

hsl(8, 78%, 80%)

HSB

hsb(8, 32%, 96%)

CMYK

cmyk(0%, 28%, 32%, 4%)

Oklch

oklch(81.8% 0.082 29.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4D6B0

AECCF4

Analogous

F4B3AE

F4D6B0

EFF4AE

Triadic

F4D6B0

AEF4D6

D6AEF4

Split-Comp.

F4D6B0

AEEFF4

B3AEF4

Tetradic

F4D6B0

AEF4B3

AECCF4

F4AEEF

Contrast Matrix WCAG 2.1 Contrast

F4D6B0	CFC496	AEB999	B8A996	F4B0A5
—	1.3 Fail	1.5 Fail	1.6 Fail	1.3 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.0 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
1.3 Fail	1.0 Fail	1.1 Fail	1.3 Fail	—

White BG

1.4Fail

1.8Fail

2.1Fail

2.3Fail

1.8Fail

Black BG

15.1AAA

12.0AAA

10.2AAA

9.2AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7B9

CACAA1

B3B3A1

B2B19B

D7D6A8

Deuteranopia

E9EBBB

CBCCA4

B2B1A3

B2B39C

DBE0A8

Tritanopia

F2C0C2

CEAAAC

AFA7A8

B79E9F

F1AAAA

Achromatopsia

DBDBDB

C2C2C2

B2B2B2

ABABAB

C3C3C3

Shades & Tints Shades & Tints

#F4D6B0

Dark

Light

#CFC496

Dark

Light

#AEB999

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4d6b0;
  --color-2: #cfc496;
  --color-3: #aeb999;
  --color-4: #b8a996;
  --color-5: #f4b0a5;
}

SCSS

$color-1: #f4d6b0;
$color-2: #cfc496;
$color-3: #aeb999;
$color-4: #b8a996;
$color-5: #f4b0a5;

TAILWIND

colors: {
  'brand-1': '#f4d6b0',
  'brand-2': '#cfc496',
  'brand-3': '#aeb999',
  'brand-4': '#b8a996',
  'brand-5': '#f4b0a5',
}

RGB Array

[244, 214, 176], [207, 196, 150], [174, 185, 153], [184, 169, 150], [244, 176, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F4D6B0, #CFC496, #AEB999, #B8A996, #F4B0A5 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: #f4d6b0; --color-2: #cfc496; --color-3: #aeb999; --color-4: #b8a996; --color-5: #f4b0a5. 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