← Back to Editor

#E67102 · #FBA30A · #FFBF18 · #FFE15A · #859618

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#E67102

Tangerine · Chocolate · Amber Brown

HEX
#E67102
RGB
rgb(230, 113, 2)
HSL
hsl(29, 98%, 45%)
HSB
hsb(29, 99%, 90%)
CMYK
cmyk(0%, 51%, 99%, 10%)
Oklch
oklch(67.4% 0.173 52.0)

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

#FBA30A

Ginger · Orange · Warm Sun

HEX
#FBA30A
RGB
rgb(251, 163, 10)
HSL
hsl(38, 97%, 51%)
HSB
hsb(38, 96%, 98%)
CMYK
cmyk(0%, 35%, 96%, 2%)
Oklch
oklch(78.5% 0.168 70.7)

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

#FFBF18

Ginger · Gold · Sunflower

HEX
#FFBF18
RGB
rgb(255, 191, 24)
HSL
hsl(43, 100%, 55%)
HSB
hsb(43, 91%, 100%)
CMYK
cmyk(0%, 25%, 91%, 0%)
Oklch
oklch(84.1% 0.169 83.4)

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

#FFE15A

Ginger · Khaki · Sunflower

HEX
#FFE15A
RGB
rgb(255, 225, 90)
HSL
hsl(49, 100%, 68%)
HSB
hsb(49, 65%, 100%)
CMYK
cmyk(0%, 12%, 65%, 0%)
Oklch
oklch(91.1% 0.154 96.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#859618

Autumn Sage · Olive · Honey Gold

HEX
#859618
RGB
rgb(133, 150, 24)
HSL
hsl(68, 72%, 34%)
HSB
hsb(68, 84%, 59%)
CMYK
cmyk(11%, 0%, 84%, 41%)
Oklch
oklch(63.8% 0.141 117.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E67102
0276E3

Analogous

E30206
E67102
E3DF02

Triadic

E67102
02E36F
6F02E3

Split-Comp.

E67102
02E3DF
0206E3

Tetradic

E67102
06E302
0276E3
DF02E3

Contrast Matrix WCAG 2.1 Contrast

E67102
FBA30A
FFBF18
FFE15A
859618
—
1.5
Fail
1.9
Fail
2.4
Fail
1.1
Fail
1.5
Fail
—
1.2
Fail
1.6
Fail
1.6
Fail
1.9
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
2.4
Fail
1.6
Fail
1.3
Fail
—
2.5
Fail
1.1
Fail
1.6
Fail
2.0
Fail
2.5
Fail
—
White BG
3.1AA Large
2.0Fail
1.7Fail
1.3Fail
3.3AA Large
Black BG
6.7AA
10.3AAA
12.7AAA
16.2AAA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B21D
D5D42F
E3E340
F2F27B
8C8D36

Deuteranopia

BAC323
DAE138
E7EC4A
F4F683
8B8A3E

Tritanopia

E03237
F74C53
FC6067
FE949A
864F54

Achromatopsia

878787
ACACAC
BFBFBF
DBDBDB
838383

Shades & Tints Shades & Tints

#E67102

Dark
Light

#FBA30A

Dark
Light

#FFBF18

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e67102;
  --color-2: #fba30a;
  --color-3: #ffbf18;
  --color-4: #ffe15a;
  --color-5: #859618;
}

SCSS

$color-1: #e67102;
$color-2: #fba30a;
$color-3: #ffbf18;
$color-4: #ffe15a;
$color-5: #859618;

TAILWIND

colors: {
  'brand-1': '#e67102',
  'brand-2': '#fba30a',
  'brand-3': '#ffbf18',
  'brand-4': '#ffe15a',
  'brand-5': '#859618',
}

RGB Array

[230, 113, 2], [251, 163, 10], [255, 191, 24], [255, 225, 90], [133, 150, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E67102, #FBA30A, #FFBF18, #FFE15A, #859618 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e67102; --color-2: #fba30a; --color-3: #ffbf18; --color-4: #ffe15a; --color-5: #859618. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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