← Back to Editor

#FFF37C · #BDBB83 · #EE9911 · #B27347 · #8F6A4B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFF37C

Fresh Green · Khaki · Sunflower

HEX
#FFF37C
RGB
rgb(255, 243, 124)
HSL
hsl(55, 100%, 74%)
HSB
hsb(55, 51%, 100%)
CMYK
cmyk(0%, 5%, 51%, 0%)
Oklch
oklch(95.0% 0.141 103.5)

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

#BDBB83

Fresh Green · Tan · Sunflower

HEX
#BDBB83
RGB
rgb(189, 187, 131)
HSL
hsl(58, 31%, 63%)
HSB
hsb(58, 31%, 74%)
CMYK
cmyk(0%, 1%, 31%, 26%)
Oklch
oklch(78.0% 0.075 106.3)

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

#EE9911

Ochre · Orange · Amber Brown

HEX
#EE9911
RGB
rgb(238, 153, 17)
HSL
hsl(37, 87%, 50%)
HSB
hsb(37, 93%, 93%)
CMYK
cmyk(0%, 36%, 93%, 7%)
Oklch
oklch(75.1% 0.160 69.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B27347

Tangerine · Sienna · Amber Brown

HEX
#B27347
RGB
rgb(178, 115, 71)
HSL
hsl(25, 43%, 49%)
HSB
hsb(25, 60%, 70%)
CMYK
cmyk(0%, 35%, 60%, 30%)
Oklch
oklch(61.3% 0.099 54.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#8F6A4B

Tangerine · Sienna · Amber Brown

HEX
#8F6A4B
RGB
rgb(143, 106, 75)
HSL
hsl(27, 31%, 43%)
HSB
hsb(27, 48%, 56%)
CMYK
cmyk(0%, 26%, 48%, 44%)
Oklch
oklch(55.4% 0.065 60.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF37C
7A85FF

Analogous

FFB27A
FFF37C
C8FF7A

Triadic

FFF37C
7AFFF4
F47AFF

Split-Comp.

FFF37C
7AC8FF
B27AFF

Tetradic

FFF37C
7AFFB2
7A85FF
FF7AC8

Contrast Matrix WCAG 2.1 Contrast

FFF37C
BDBB83
EE9911
B27347
8F6A4B
—
1.7
Fail
2.0
Fail
3.4
AA Large
4.2
AA Large
1.7
Fail
—
1.2
Fail
1.9
Fail
2.4
Fail
2.0
Fail
1.2
Fail
—
1.7
Fail
2.1
Fail
3.4
AA Large
1.9
Fail
1.7
Fail
—
1.3
Fail
4.2
AA Large
2.4
Fail
2.1
Fail
1.3
Fail
—
White BG
1.1Fail
2.0Fail
2.3Fail
3.9AA Large
4.8AA
Black BG
18.4AAA
10.6AAA
9.2AAA
5.4AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFA99
BCBC91
C9C832
979652
7F7F53

Deuteranopia

FBFBA0
BCBC94
CED53A
9A9F54
818454

Tritanopia

FEB0B5
BD9B9E
EA4C52
AF5A5C
8D585A

Achromatopsia

E9E9E9
B5B5B5
A3A3A3
818181
727272

Shades & Tints Shades & Tints

#FFF37C

Dark
Light

#BDBB83

Dark
Light

#EE9911

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff37c;
  --color-2: #bdbb83;
  --color-3: #ee9911;
  --color-4: #b27347;
  --color-5: #8f6a4b;
}

SCSS

$color-1: #fff37c;
$color-2: #bdbb83;
$color-3: #ee9911;
$color-4: #b27347;
$color-5: #8f6a4b;

TAILWIND

colors: {
  'brand-1': '#fff37c',
  'brand-2': '#bdbb83',
  'brand-3': '#ee9911',
  'brand-4': '#b27347',
  'brand-5': '#8f6a4b',
}

RGB Array

[255, 243, 124], [189, 187, 131], [238, 153, 17], [178, 115, 71], [143, 106, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF37C, #BDBB83, #EE9911, #B27347, #8F6A4B 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: #fff37c; --color-2: #bdbb83; --color-3: #ee9911; --color-4: #b27347; --color-5: #8f6a4b. 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 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