#FFE170 + #EDDF8D + #DBDDAA + #C9DAC7 + #B7D8E4 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FFE170

Goose Yellow · Khaki · Sunflower

HEX

#FFE170

RGB

rgb(255, 225, 112)

HSL

hsl(47, 100%, 72%)

HSB

hsb(47, 56%, 100%)

CMYK

cmyk(0%, 12%, 56%, 0%)

Oklch

oklch(91.3% 0.136 94.7)

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

#EDDF8D

Fresh Green · Khaki · Sunflower

HEX

#EDDF8D

RGB

rgb(237, 223, 141)

HSL

hsl(51, 73%, 74%)

HSB

hsb(51, 41%, 93%)

CMYK

cmyk(0%, 6%, 41%, 7%)

Oklch

oklch(89.7% 0.104 99.8)

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

#DBDDAA

Fresh Green · Wheat · Lemon Cream

HEX

#DBDDAA

RGB

rgb(219, 221, 170)

HSL

hsl(62, 43%, 77%)

HSB

hsb(62, 23%, 87%)

CMYK

cmyk(1%, 0%, 23%, 13%)

Oklch

oklch(88.3% 0.067 109.6)

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

#C9DAC7

Celadon · LightGray · Mint Green

HEX

#C9DAC7

RGB

rgb(201, 218, 199)

HSL

hsl(114, 20%, 82%)

HSB

hsb(114, 9%, 85%)

CMYK

cmyk(8%, 0%, 9%, 15%)

Oklch

oklch(87.0% 0.032 142.3)

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

#B7D8E4

Sky Blue · LightBlue · Glacier Blue

HEX

#B7D8E4

RGB

rgb(183, 216, 228)

HSL

hsl(196, 45%, 81%)

HSB

hsb(196, 20%, 89%)

CMYK

cmyk(20%, 5%, 0%, 11%)

Oklch

oklch(86.2% 0.039 221.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE170

708FFF

Analogous

FF9970

FFE170

D7FF70

Triadic

FFE170

70FFE0

E070FF

Split-Comp.

FFE170

70D7FF

9970FF

Tetradic

FFE170

70FF99

708FFF

FF70D7

Contrast Matrix WCAG 2.1 Contrast

FFE170	EDDF8D	DBDDAA	C9DAC7	B7D8E4
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

Black BG

16.3AAA

15.5AAA

14.9AAA

14.3AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F28B

E7E7A1

DCDCB6

D0D1CC

C5C6E1

Deuteranopia

F4F692

E8E9A6

DCDCB9

CFCECD

C3C1E0

Tritanopia

FEA1A6

ECB1B4

DBC0C2

CACFD0

B9DFDE

Achromatopsia

DDDDDD

DADADA

D7D7D7

D3D3D3

D0D0D0

Shades & Tints Shades & Tints

#FFE170

Dark

Light

#EDDF8D

Dark

Light

#DBDDAA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe170;
  --color-2: #eddf8d;
  --color-3: #dbddaa;
  --color-4: #c9dac7;
  --color-5: #b7d8e4;
}

SCSS

$color-1: #ffe170;
$color-2: #eddf8d;
$color-3: #dbddaa;
$color-4: #c9dac7;
$color-5: #b7d8e4;

TAILWIND

colors: {
  'brand-1': '#ffe170',
  'brand-2': '#eddf8d',
  'brand-3': '#dbddaa',
  'brand-4': '#c9dac7',
  'brand-5': '#b7d8e4',
}

RGB Array

[255, 225, 112], [237, 223, 141], [219, 221, 170], [201, 218, 199], [183, 216, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FFE170, #EDDF8D, #DBDDAA, #C9DAC7, #B7D8E4 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: #ffe170; --color-2: #eddf8d; --color-3: #dbddaa; --color-4: #c9dac7; --color-5: #b7d8e4. 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 pastel-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