#FFBDB6 + #F2D5B1 + #E4E5AB + #C1D8A6 + #A3CCA0 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFBDB6

Peach Pink · LightPink · Cherry Blossom

HEX

#FFBDB6

RGB

rgb(255, 189, 182)

HSL

hsl(6, 100%, 86%)

HSB

hsb(6, 29%, 100%)

CMYK

cmyk(0%, 26%, 29%, 0%)

Oklch

oklch(85.7% 0.077 25.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F2D5B1

Goose Yellow · Wheat · Peach Orange

HEX

#F2D5B1

RGB

rgb(242, 213, 177)

HSL

hsl(33, 71%, 82%)

HSB

hsb(33, 27%, 95%)

CMYK

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

Oklch

oklch(88.8% 0.057 73.0)

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

#E4E5AB

Fresh Green · Wheat · Lemon Cream

HEX

#E4E5AB

RGB

rgb(228, 229, 171)

HSL

hsl(61, 53%, 78%)

HSB

hsb(61, 25%, 90%)

CMYK

cmyk(0%, 0%, 25%, 10%)

Oklch

oklch(90.7% 0.075 108.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C1D8A6

Willow Green · Silver · Apple Green

HEX

#C1D8A6

RGB

rgb(193, 216, 166)

HSL

hsl(88, 39%, 75%)

HSB

hsb(88, 23%, 85%)

CMYK

cmyk(11%, 0%, 23%, 15%)

Oklch

oklch(85.2% 0.072 127.9)

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

#A3CCA0

Celadon · DarkSeaGreen · Apple Green

HEX

#A3CCA0

RGB

rgb(163, 204, 160)

HSL

hsl(116, 30%, 71%)

HSB

hsb(116, 22%, 80%)

CMYK

cmyk(20%, 0%, 22%, 20%)

Oklch

oklch(80.4% 0.075 143.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBDB6

B8F8FF

Analogous

FFB8D4

FFBDB6

FFE2B8

Triadic

FFBDB6

B8FFBF

BFB8FF

Split-Comp.

FFBDB6

B8FFE2

B8D4FF

Tetradic

FFBDB6

D4FFB8

B8F8FF

E2B8FF

Contrast Matrix WCAG 2.1 Contrast

FFBDB6	F2D5B1	E4E5AB	C1D8A6	A3CCA0
—	1.1 Fail	1.2 Fail	1.0 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.0 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.1 Fail	1.3 Fail	1.4 Fail	1.2 Fail	—

White BG

1.6Fail

1.4Fail

1.3Fail

1.5Fail

1.8Fail

Black BG

13.2AAA

14.9AAA

16.1AAA

13.6AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2B8

E5E5BA

E4E4B9

CBCBB2

B5B5AB

Deuteranopia

E6EBB8

E7E9BC

E4E4BC

CAC8B5

B2AFAD

Tritanopia

FCB9B9

F1C1C2

E4C4C7

C2BCBE

A5B3B5

Achromatopsia

D0D0D0

DADADA

DEDEDE

CBCBCB

BBBBBB

Shades & Tints Shades & Tints

#FFBDB6

Dark

Light

#F2D5B1

Dark

Light

#E4E5AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbdb6;
  --color-2: #f2d5b1;
  --color-3: #e4e5ab;
  --color-4: #c1d8a6;
  --color-5: #a3cca0;
}

SCSS

$color-1: #ffbdb6;
$color-2: #f2d5b1;
$color-3: #e4e5ab;
$color-4: #c1d8a6;
$color-5: #a3cca0;

TAILWIND

colors: {
  'brand-1': '#ffbdb6',
  'brand-2': '#f2d5b1',
  'brand-3': '#e4e5ab',
  'brand-4': '#c1d8a6',
  'brand-5': '#a3cca0',
}

RGB Array

[255, 189, 182], [242, 213, 177], [228, 229, 171], [193, 216, 166], [163, 204, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FFBDB6, #F2D5B1, #E4E5AB, #C1D8A6, #A3CCA0 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: #ffbdb6; --color-2: #f2d5b1; --color-3: #e4e5ab; --color-4: #c1d8a6; --color-5: #a3cca0. 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