← Back to Editor

#FFB03A · #FF913A · #88A012 · #DEFF3A · #FFF8AD

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 AppData Visualization

Color Details Color Details

#FFB03A

Ginger · SandyBrown · Warm Sun

HEX
#FFB03A
RGB
rgb(255, 176, 58)
HSL
hsl(36, 100%, 61%)
HSB
hsb(36, 77%, 100%)
CMYK
cmyk(0%, 31%, 77%, 0%)
Oklch
oklch(81.4% 0.155 72.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FF913A

Apricot · Coral · Warm Sun

HEX
#FF913A
RGB
rgb(255, 145, 58)
HSL
hsl(26, 100%, 61%)
HSB
hsb(26, 77%, 100%)
CMYK
cmyk(0%, 43%, 77%, 0%)
Oklch
oklch(76.1% 0.164 54.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#88A012

Grass Green · Olive · Forest Green

HEX
#88A012
RGB
rgb(136, 160, 18)
HSL
hsl(70, 80%, 35%)
HSB
hsb(70, 89%, 63%)
CMYK
cmyk(15%, 0%, 89%, 37%)
Oklch
oklch(66.4% 0.153 120.0)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#DEFF3A

Willow Green · GreenYellow · Apple Green

HEX
#DEFF3A
RGB
rgb(222, 255, 58)
HSL
hsl(70, 100%, 61%)
HSB
hsb(70, 77%, 100%)
CMYK
cmyk(13%, 0%, 77%, 0%)
Oklch
oklch(94.4% 0.207 119.2)

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

#FFF8AD

Fresh Green · Wheat · Lemon Cream

HEX
#FFF8AD
RGB
rgb(255, 248, 173)
HSL
hsl(55, 100%, 84%)
HSB
hsb(55, 32%, 100%)
CMYK
cmyk(0%, 3%, 32%, 0%)
Oklch
oklch(96.8% 0.094 103.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB03A
3888FF

Analogous

FF4C38
FFB03A
EBFF38

Triadic

FFB03A
38FFAF
AF38FF

Split-Comp.

FFB03A
38EBFF
4C38FF

Tetradic

FFB03A
38FF4C
3888FF
FF38EB

Contrast Matrix WCAG 2.1 Contrast

FFB03A
FF913A
88A012
DEFF3A
FFF8AD
—
1.2
Fail
1.6
Fail
1.6
Fail
1.7
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
2.6
Fail
2.7
Fail
1.6
Fail
2.0
Fail
2.6
Fail
—
1.0
Fail
1.7
Fail
2.1
Fail
2.7
Fail
1.0
Fail
—
White BG
1.8Fail
2.2Fail
3.0Fail
1.1Fail
1.1Fail
Black BG
11.5AAA
9.4AAA
7.1AAA
18.5AAA
19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDC57
CFCE4F
929334
ECED6A
FCFCBF

Deuteranopia

E1E75D
D6DE54
918F3D
EAE875
FCFDC4

Tritanopia

FB6D72
FA6063
894F55
E08F98
FFCDD1

Achromatopsia

BABABA
A8A8A8
898989
DFDFDF
F2F2F2

Shades & Tints Shades & Tints

#FFB03A

Dark
Light

#FF913A

Dark
Light

#88A012

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb03a;
  --color-2: #ff913a;
  --color-3: #88a012;
  --color-4: #deff3a;
  --color-5: #fff8ad;
}

SCSS

$color-1: #ffb03a;
$color-2: #ff913a;
$color-3: #88a012;
$color-4: #deff3a;
$color-5: #fff8ad;

TAILWIND

colors: {
  'brand-1': '#ffb03a',
  'brand-2': '#ff913a',
  'brand-3': '#88a012',
  'brand-4': '#deff3a',
  'brand-5': '#fff8ad',
}

RGB Array

[255, 176, 58], [255, 145, 58], [136, 160, 18], [222, 255, 58], [255, 248, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFB03A, #FF913A, #88A012, #DEFF3A, #FFF8AD is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #ffb03a; --color-2: #ff913a; --color-3: #88a012; --color-4: #deff3a; --color-5: #fff8ad. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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