← Back to Editor

#F4C686 · #F87630 · #D09E4E · #BBBB62 · #9DC59D

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

#F4C686

Goose Yellow · BurlyWood · Warm Sun

HEX
#F4C686
RGB
rgb(244, 198, 134)
HSL
hsl(35, 83%, 74%)
HSB
hsb(35, 45%, 96%)
CMYK
cmyk(0%, 19%, 45%, 4%)
Oklch
oklch(85.3% 0.097 75.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F87630

Tangerine · Tomato · Warm Sun

HEX
#F87630
RGB
rgb(248, 118, 48)
HSL
hsl(21, 93%, 58%)
HSB
hsb(21, 81%, 97%)
CMYK
cmyk(0%, 52%, 81%, 3%)
Oklch
oklch(70.9% 0.178 45.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D09E4E

Ginger · SandyBrown · Warm Sun

HEX
#D09E4E
RGB
rgb(208, 158, 78)
HSL
hsl(37, 58%, 56%)
HSB
hsb(37, 63%, 82%)
CMYK
cmyk(0%, 24%, 63%, 18%)
Oklch
oklch(73.1% 0.114 77.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#BBBB62

Autumn Sage · Tan · Sunflower

HEX
#BBBB62
RGB
rgb(187, 187, 98)
HSL
hsl(60, 40%, 56%)
HSB
hsb(60, 48%, 73%)
CMYK
cmyk(0%, 0%, 48%, 27%)
Oklch
oklch(77.3% 0.112 108.8)

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

#9DC59D

Celadon · DarkSeaGreen · Apple Green

HEX
#9DC59D
RGB
rgb(157, 197, 157)
HSL
hsl(120, 26%, 69%)
HSB
hsb(120, 20%, 77%)
CMYK
cmyk(20%, 0%, 20%, 23%)
Oklch
oklch(78.4% 0.070 144.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C686
86B4F4

Analogous

F48F86
F4C686
EBF486

Triadic

F4C686
86F4C6
C686F4

Split-Comp.

F4C686
86EBF4
8F86F4

Tetradic

F4C686
86F48F
86B4F4
F486EB

Contrast Matrix WCAG 2.1 Contrast

F4C686
F87630
D09E4E
BBBB62
9DC59D
—
1.7
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.7
Fail
—
1.1
Fail
1.4
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
1.0
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.0
Fail
—
White BG
1.6Fail
2.8Fail
2.4Fail
2.0Fail
1.9Fail
Black BG
13.3AAA
7.6AAA
8.7AAA
10.4AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E095
C0BF41
BABA61
BBBB78
AEAFA7

Deuteranopia

E3E699
C7D145
BDC166
BBBB7D
ACA9A9

Tritanopia

F2A2A4
F24E51
CE7174
BB898C
9FAEB0

Achromatopsia

CCCCCC
959595
A4A4A4
B1B1B1
B4B4B4

Shades & Tints Shades & Tints

#F4C686

Dark
Light

#F87630

Dark
Light

#D09E4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c686;
  --color-2: #f87630;
  --color-3: #d09e4e;
  --color-4: #bbbb62;
  --color-5: #9dc59d;
}

SCSS

$color-1: #f4c686;
$color-2: #f87630;
$color-3: #d09e4e;
$color-4: #bbbb62;
$color-5: #9dc59d;

TAILWIND

colors: {
  'brand-1': '#f4c686',
  'brand-2': '#f87630',
  'brand-3': '#d09e4e',
  'brand-4': '#bbbb62',
  'brand-5': '#9dc59d',
}

RGB Array

[244, 198, 134], [248, 118, 48], [208, 158, 78], [187, 187, 98], [157, 197, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4C686, #F87630, #D09E4E, #BBBB62, #9DC59D 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: #f4c686; --color-2: #f87630; --color-3: #d09e4e; --color-4: #bbbb62; --color-5: #9dc59d. 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