#FFF4C5 + #B5E1D9 + #9EB6CC + #A2A56C + #DD4E23 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF4C5

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF4C5

RGB

rgb(255, 244, 197)

HSL

hsl(49, 100%, 89%)

HSB

hsb(49, 23%, 100%)

CMYK

cmyk(0%, 4%, 23%, 0%)

Oklch

oklch(96.4% 0.062 96.4)

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

#B5E1D9

Jade · LightBlue · Glacier Blue

HEX

#B5E1D9

RGB

rgb(181, 225, 217)

HSL

hsl(169, 42%, 80%)

HSB

hsb(169, 20%, 88%)

CMYK

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

Oklch

oklch(87.6% 0.047 182.9)

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

#9EB6CC

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#9EB6CC

RGB

rgb(158, 182, 204)

HSL

hsl(209, 31%, 71%)

HSB

hsb(209, 23%, 80%)

CMYK

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

Oklch

oklch(76.5% 0.041 246.0)

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

#A2A56C

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A2A56C

RGB

rgb(162, 165, 108)

HSL

hsl(63, 24%, 54%)

HSB

hsb(63, 35%, 65%)

CMYK

cmyk(2%, 0%, 35%, 35%)

Oklch

oklch(70.6% 0.077 110.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DD4E23

Vermilion · Chocolate · Passion Red

HEX

#DD4E23

RGB

rgb(221, 78, 35)

HSL

hsl(14, 73%, 50%)

HSB

hsb(14, 84%, 87%)

CMYK

cmyk(0%, 65%, 84%, 13%)

Oklch

oklch(61.4% 0.187 36.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF4C5

C7D1FF

Analogous

FFD9C7

FFF4C5

EDFFC7

Triadic

FFF4C5

C7FFF5

F5C7FF

Split-Comp.

FFF4C5

C7EDFF

D9C7FF

Tetradic

FFF4C5

C7FFD9

C7D1FF

FFC7ED

Contrast Matrix WCAG 2.1 Contrast

FFF4C5	B5E1D9	9EB6CC	A2A56C	DD4E23
—	1.3 Fail	1.9 Fail	2.3 Fail	3.7 AA Large
1.3 Fail	—	1.5 Fail	1.8 Fail	2.8 Fail
1.9 Fail	1.5 Fail	—	1.2 Fail	1.9 Fail
2.3 Fail	1.8 Fail	1.2 Fail	—	1.6 Fail
3.7 AA Large	2.8 Fail	1.9 Fail	1.6 Fail	—

White BG

1.1Fail

1.4Fail

2.1Fail

2.6Fail

4.0AA Large

Black BG

19.0AAA

14.7AAA

10.0AAA

8.1AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAD0

C8C8DB

A8A9C7

A3A37A

9F9E2D

Deuteranopia

FBFCD3

C6C2DB

A7A5C5

A3A37D

A7B230

Tritanopia

FED9DB

B7DCDD

9FC2C2

A28587

D63637

Achromatopsia

F2F2F2

D3D3D3

B1B1B1

9E9E9E

747474

Shades & Tints Shades & Tints

#FFF4C5

Dark

Light

#B5E1D9

Dark

Light

#9EB6CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff4c5;
  --color-2: #b5e1d9;
  --color-3: #9eb6cc;
  --color-4: #a2a56c;
  --color-5: #dd4e23;
}

SCSS

$color-1: #fff4c5;
$color-2: #b5e1d9;
$color-3: #9eb6cc;
$color-4: #a2a56c;
$color-5: #dd4e23;

TAILWIND

colors: {
  'brand-1': '#fff4c5',
  'brand-2': '#b5e1d9',
  'brand-3': '#9eb6cc',
  'brand-4': '#a2a56c',
  'brand-5': '#dd4e23',
}

RGB Array

[255, 244, 197], [181, 225, 217], [158, 182, 204], [162, 165, 108], [221, 78, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF4C5, #B5E1D9, #9EB6CC, #A2A56C, #DD4E23 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: #fff4c5; --color-2: #b5e1d9; --color-3: #9eb6cc; --color-4: #a2a56c; --color-5: #dd4e23. 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