#FFE04B + #DCC555 + #B9AA5E + #968F68 + #737471 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFE04B

Fresh Green · SandyBrown · Sunflower

HEX

#FFE04B

RGB

rgb(255, 224, 75)

HSL

hsl(50, 100%, 65%)

HSB

hsb(50, 71%, 100%)

CMYK

cmyk(0%, 12%, 71%, 0%)

Oklch

oklch(90.7% 0.163 97.1)

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

#DCC555

Autumn Sage · SandyBrown · Sunflower

HEX

#DCC555

RGB

rgb(220, 197, 85)

HSL

hsl(50, 66%, 60%)

HSB

hsb(50, 61%, 86%)

CMYK

cmyk(0%, 10%, 61%, 14%)

Oklch

oklch(82.2% 0.133 97.7)

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

#B9AA5E

Autumn Sage · Tan · Sunflower

HEX

#B9AA5E

RGB

rgb(185, 170, 94)

HSL

hsl(50, 39%, 55%)

HSB

hsb(50, 49%, 73%)

CMYK

cmyk(0%, 8%, 49%, 27%)

Oklch

oklch(73.4% 0.099 98.4)

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

#968F68

Autumn Sage · Gray · Honey Gold

HEX

#968F68

RGB

rgb(150, 143, 104)

HSL

hsl(51, 18%, 50%)

HSB

hsb(51, 31%, 59%)

CMYK

cmyk(0%, 5%, 31%, 41%)

Oklch

oklch(64.6% 0.055 99.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#737471

Ink Gray · DimGray · Warm Gray

HEX

#737471

RGB

rgb(115, 116, 113)

HSL

hsl(80, 1%, 45%)

HSB

hsb(80, 3%, 45%)

CMYK

cmyk(1%, 0%, 3%, 55%)

Oklch

oklch(55.7% 0.005 121.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE04B

4D6AFF

Analogous

FF884D

FFE04B

C4FF4D

Triadic

FFE04B

4DFFE1

E14DFF

Split-Comp.

FFE04B

4DC3FF

884DFF

Tetradic

FFE04B

4DFF88

4D6AFF

FF4DC4

Contrast Matrix WCAG 2.1 Contrast

FFE04B	DCC555	B9AA5E	968F68	737471
—	1.3 Fail	1.8 Fail	2.5 Fail	3.6 AA Large
1.3 Fail	—	1.4 Fail	1.9 Fail	2.7 Fail
1.8 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.5 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
3.6 AA Large	2.7 Fail	2.0 Fail	1.4 Fail	—

White BG

1.3Fail

1.7Fail

2.3Fail

3.3AA Large

4.7AA

Black BG

16.0AAA

12.2AAA

9.0AAA

6.4AA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F16F

D2D270

B3B270

939371

737372

Deuteranopia

F3F678

D3D577

B3B575

939474

737372

Tritanopia

FD8C92

DB858A

B87F82

96797B

737272

Achromatopsia

D8D8D8

BFBFBF

A6A6A6

8D8D8D

737373

Shades & Tints Shades & Tints

#FFE04B

Dark

Light

#DCC555

Dark

Light

#B9AA5E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe04b;
  --color-2: #dcc555;
  --color-3: #b9aa5e;
  --color-4: #968f68;
  --color-5: #737471;
}

SCSS

$color-1: #ffe04b;
$color-2: #dcc555;
$color-3: #b9aa5e;
$color-4: #968f68;
$color-5: #737471;

TAILWIND

colors: {
  'brand-1': '#ffe04b',
  'brand-2': '#dcc555',
  'brand-3': '#b9aa5e',
  'brand-4': '#968f68',
  'brand-5': '#737471',
}

RGB Array

[255, 224, 75], [220, 197, 85], [185, 170, 94], [150, 143, 104], [115, 116, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFE04B, #DCC555, #B9AA5E, #968F68, #737471 is ideal for: corporate websites, product showcases, portfolios. 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: #ffe04b; --color-2: #dcc555; --color-3: #b9aa5e; --color-4: #968f68; --color-5: #737471. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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