#FFFFD6 + #AD9887 + #F7E883 + #A2D0B6 + #74A498 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFFFD6

Fresh Green · LightYellow · Lemon Cream

HEX

#FFFFD6

RGB

rgb(255, 255, 214)

HSL

hsl(60, 100%, 92%)

HSB

hsb(60, 16%, 100%)

CMYK

cmyk(0%, 0%, 16%, 0%)

Oklch

oklch(99.0% 0.053 107.3)

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

#AD9887

Tangerine · DarkGray · Warm Sun

HEX

#AD9887

RGB

rgb(173, 152, 135)

HSL

hsl(27, 19%, 60%)

HSB

hsb(27, 22%, 68%)

CMYK

cmyk(0%, 12%, 22%, 32%)

Oklch

oklch(69.4% 0.035 61.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F7E883

Fresh Green · Khaki · Sunflower

HEX

#F7E883

RGB

rgb(247, 232, 131)

HSL

hsl(52, 88%, 74%)

HSB

hsb(52, 47%, 97%)

CMYK

cmyk(0%, 6%, 47%, 3%)

Oklch

oklch(92.2% 0.123 101.0)

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

#A2D0B6

Celadon · Silver · Apple Green

HEX

#A2D0B6

RGB

rgb(162, 208, 182)

HSL

hsl(146, 33%, 73%)

HSB

hsb(146, 22%, 82%)

CMYK

cmyk(22%, 0%, 12%, 18%)

Oklch

oklch(81.8% 0.061 159.9)

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

#74A498

Mineral Blue · CadetBlue · Lake Green

HEX

#74A498

RGB

rgb(116, 164, 152)

HSL

hsl(165, 21%, 55%)

HSB

hsb(165, 29%, 64%)

CMYK

cmyk(29%, 0%, 7%, 36%)

Oklch

oklch(68.1% 0.054 177.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFD6

D6D6FF

Analogous

FFEBD6

FFFFD6

EBFFD6

Triadic

FFFFD6

D6FFFF

FFD6FF

Split-Comp.

FFFFD6

D6EBFF

EBD6FF

Tetradic

FFFFD6

D6FFEB

D6D6FF

FFD6EB

Contrast Matrix WCAG 2.1 Contrast

FFFFD6	AD9887	F7E883	A2D0B6	74A498
—	2.7 Fail	1.2 Fail	1.7 Fail	2.7 Fail
2.7 Fail	—	2.2 Fail	1.6 Fail	1.0 Fail
1.2 Fail	2.2 Fail	—	1.4 Fail	2.2 Fail
1.7 Fail	1.6 Fail	1.4 Fail	—	1.6 Fail
2.7 Fail	1.0 Fail	2.2 Fail	1.6 Fail	—

White BG

1.0Fail

2.8Fail

1.2Fail

1.7Fail

2.8Fail

Black BG

20.5AAA

7.6AAA

16.8AAA

12.2AAA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFE0

A4A48B

F1F09B

B6B6BC

89899B

Deuteranopia

FFFFE2

A5A78C

F1F2A1

B3B0BE

86829C

Tritanopia

FFE8E9

AC8E8F

F6AFB3

A4C1C2

769D9E

Achromatopsia

FAFAFA

9C9C9C

E1E1E1

BFBFBF

949494

Shades & Tints Shades & Tints

#FFFFD6

Dark

Light

#AD9887

Dark

Light

#F7E883

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffd6;
  --color-2: #ad9887;
  --color-3: #f7e883;
  --color-4: #a2d0b6;
  --color-5: #74a498;
}

SCSS

$color-1: #ffffd6;
$color-2: #ad9887;
$color-3: #f7e883;
$color-4: #a2d0b6;
$color-5: #74a498;

TAILWIND

colors: {
  'brand-1': '#ffffd6',
  'brand-2': '#ad9887',
  'brand-3': '#f7e883',
  'brand-4': '#a2d0b6',
  'brand-5': '#74a498',
}

RGB Array

[255, 255, 214], [173, 152, 135], [247, 232, 131], [162, 208, 182], [116, 164, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFD6, #AD9887, #F7E883, #A2D0B6, #74A498 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: #ffffd6; --color-2: #ad9887; --color-3: #f7e883; --color-4: #a2d0b6; --color-5: #74a498. 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 general-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