← Back to Editor

#FFFFFF · #E1E1E1 · #AEBF23 · #F46610 · #2E2E22

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

Color Details Color Details

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#E1E1E1

Plain White · LightGray · Cloud White

HEX
#E1E1E1
RGB
rgb(225, 225, 225)
HSL
hsl(0, 0%, 88%)
HSB
hsb(0, 0%, 88%)
CMYK
cmyk(0%, 0%, 0%, 12%)
Oklch
oklch(91.0% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#AEBF23

Autumn Sage · GoldenRod · Honey Gold

HEX
#AEBF23
RGB
rgb(174, 191, 35)
HSL
hsl(67, 69%, 44%)
HSB
hsb(67, 82%, 75%)
CMYK
cmyk(9%, 0%, 82%, 25%)
Oklch
oklch(76.6% 0.166 116.2)

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

#F46610

Tangerine · Chocolate · Warm Sun

HEX
#F46610
RGB
rgb(244, 102, 16)
HSL
hsl(23, 91%, 51%)
HSB
hsb(23, 93%, 96%)
CMYK
cmyk(0%, 58%, 93%, 4%)
Oklch
oklch(67.9% 0.192 44.1)

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

#2E2E22

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#2E2E22
RGB
rgb(46, 46, 34)
HSL
hsl(60, 15%, 16%)
HSB
hsb(60, 26%, 18%)
CMYK
cmyk(0%, 0%, 26%, 82%)
Oklch
oklch(29.7% 0.021 107.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF
FFFFFF

Analogous

FFFFFF
FFFFFF
FFFFFF

Triadic

FFFFFF
FFFFFF
FFFFFF

Split-Comp.

FFFFFF
FFFFFF
FFFFFF

Tetradic

FFFFFF
FFFFFF
FFFFFF
FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF
E1E1E1
AEBF23
F46610
2E2E22
—
1.3
Fail
2.0
Fail
3.1
AA Large
13.7
AAA
1.3
Fail
—
1.6
Fail
2.4
Fail
10.5
AAA
2.0
Fail
1.6
Fail
—
1.5
Fail
6.7
AA
3.1
AA Large
2.4
Fail
1.5
Fail
—
4.4
AA Large
13.7
AAA
10.5
AAA
6.7
AA
4.4
AA Large
—
White BG
1.0Fail
1.3Fail
2.0Fail
3.1AA Large
13.7AAA
Black BG
21.0AAA
16.1AAA
10.3AAA
6.8AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF
E1E1E1
B5B649
B7B525
2E2E25

Deuteranopia

FFFFFF
E1E1E1
B4B352
BFC92A
2E2E26

Tritanopia

FFFFFF
E1E1E1
AF676D
ED3539
2E2728

Achromatopsia

FFFFFF
E1E1E1
A8A8A8
878787
2D2D2D

Shades & Tints Shades & Tints

#FFFFFF

Dark
Light

#E1E1E1

Dark
Light

#AEBF23

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #e1e1e1;
  --color-3: #aebf23;
  --color-4: #f46610;
  --color-5: #2e2e22;
}

SCSS

$color-1: #ffffff;
$color-2: #e1e1e1;
$color-3: #aebf23;
$color-4: #f46610;
$color-5: #2e2e22;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#e1e1e1',
  'brand-3': '#aebf23',
  'brand-4': '#f46610',
  'brand-5': '#2e2e22',
}

RGB Array

[255, 255, 255], [225, 225, 225], [174, 191, 35], [244, 102, 16], [46, 46, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFFF, #E1E1E1, #AEBF23, #F46610, #2E2E22 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ffffff; --color-2: #e1e1e1; --color-3: #aebf23; --color-4: #f46610; --color-5: #2e2e22. 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 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