#FBDF26 + #FBEECB + #D3C4A5 + #B0A182 + #8B8C7A · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBDF26

Autumn Sage · Gold · Sunflower

HEX

#FBDF26

RGB

rgb(251, 223, 38)

HSL

hsl(52, 96%, 57%)

HSB

hsb(52, 85%, 98%)

CMYK

cmyk(0%, 11%, 85%, 2%)

Oklch

oklch(90.0% 0.180 99.6)

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

#FBEECB

Goose Yellow · Bisque · Lemon Cream

HEX

#FBEECB

RGB

rgb(251, 238, 203)

HSL

hsl(44, 86%, 89%)

HSB

hsb(44, 19%, 98%)

CMYK

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

Oklch

oklch(95.1% 0.048 90.1)

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

#D3C4A5

Goose Yellow · Tan · Sunflower

HEX

#D3C4A5

RGB

rgb(211, 196, 165)

HSL

hsl(40, 34%, 74%)

HSB

hsb(40, 22%, 83%)

CMYK

cmyk(0%, 7%, 22%, 17%)

Oklch

oklch(82.5% 0.045 85.2)

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

#B0A182

Ginger · Tan · Sunflower

HEX

#B0A182

RGB

rgb(176, 161, 130)

HSL

hsl(40, 23%, 60%)

HSB

hsb(40, 26%, 69%)

CMYK

cmyk(0%, 9%, 26%, 31%)

Oklch

oklch(71.4% 0.046 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8B8C7A

Ash · Gray · Warm Gray

HEX

#8B8C7A

RGB

rgb(139, 140, 122)

HSL

hsl(63, 7%, 51%)

HSB

hsb(63, 13%, 55%)

CMYK

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

Oklch

oklch(63.4% 0.026 109.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBDF26

2844FB

Analogous

FB7528

FBDF26

ADFB28

Triadic

FBDF26

28FBDF

DF28FB

Split-Comp.

FBDF26

28ADFB

7528FB

Tetradic

FBDF26

28FB75

2844FB

FB28AD

Contrast Matrix WCAG 2.1 Contrast

FBDF26	FBEECB	D3C4A5	B0A182	8B8C7A
—	1.2 Fail	1.3 Fail	1.9 Fail	2.6 Fail
1.2 Fail	—	1.5 Fail	2.2 Fail	3.0 Fail
1.3 Fail	1.5 Fail	—	1.5 Fail	2.0 Fail
1.9 Fail	2.2 Fail	1.5 Fail	—	1.3 Fail
2.6 Fail	3.0 Fail	2.0 Fail	1.3 Fail	—

White BG

1.3Fail

1.2Fail

1.7Fail

2.5Fail

3.4AA Large

Black BG

15.7AAA

18.2AAA

12.2AAA

8.3AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEF53

F5F5D3

CDCCAD

AAA98A

8B8B7E

Deuteranopia

F1F35D

F6F7D6

CDCFAE

AAAC8B

8B8B7F

Tritanopia

FA767E

FADADC

D2B2B4

AF8F91

8B8283

Achromatopsia

D2D2D2

EEEEEE

C5C5C5

A2A2A2

8A8A8A

Shades & Tints Shades & Tints

#FBDF26

Dark

Light

#FBEECB

Dark

Light

#D3C4A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbdf26;
  --color-2: #fbeecb;
  --color-3: #d3c4a5;
  --color-4: #b0a182;
  --color-5: #8b8c7a;
}

SCSS

$color-1: #fbdf26;
$color-2: #fbeecb;
$color-3: #d3c4a5;
$color-4: #b0a182;
$color-5: #8b8c7a;

TAILWIND

colors: {
  'brand-1': '#fbdf26',
  'brand-2': '#fbeecb',
  'brand-3': '#d3c4a5',
  'brand-4': '#b0a182',
  'brand-5': '#8b8c7a',
}

RGB Array

[251, 223, 38], [251, 238, 203], [211, 196, 165], [176, 161, 130], [139, 140, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FBDF26, #FBEECB, #D3C4A5, #B0A182, #8B8C7A 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: #fbdf26; --color-2: #fbeecb; --color-3: #d3c4a5; --color-4: #b0a182; --color-5: #8b8c7a. 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 warm-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