← Back to Editor

#55654B · #AABFA0 · #FFFDCE · #EA9C2F · #AF3300

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

#55654B

Celadon · DarkOliveGreen · Forest Green

HEX
#55654B
RGB
rgb(85, 101, 75)
HSL
hsl(97, 15%, 35%)
HSB
hsb(97, 26%, 40%)
CMYK
cmyk(16%, 0%, 26%, 60%)
Oklch
oklch(48.6% 0.045 133.6)

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

#AABFA0

Celadon · DarkGray · Apple Green

HEX
#AABFA0
RGB
rgb(170, 191, 160)
HSL
hsl(101, 19%, 69%)
HSB
hsb(101, 16%, 75%)
CMYK
cmyk(11%, 0%, 16%, 25%)
Oklch
oklch(78.0% 0.049 135.5)

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

#FFFDCE

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFDCE
RGB
rgb(255, 253, 206)
HSL
hsl(58, 100%, 90%)
HSB
hsb(58, 19%, 100%)
CMYK
cmyk(0%, 1%, 19%, 0%)
Oklch
oklch(98.4% 0.060 105.4)

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

#EA9C2F

Ginger · GoldenRod · Warm Sun

HEX
#EA9C2F
RGB
rgb(234, 156, 47)
HSL
hsl(35, 82%, 55%)
HSB
hsb(35, 80%, 92%)
CMYK
cmyk(0%, 33%, 80%, 8%)
Oklch
oklch(75.3% 0.148 69.9)

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

#AF3300

Tangerine · FireBrick · Amber Brown

HEX
#AF3300
RGB
rgb(175, 51, 0)
HSL
hsl(17, 100%, 34%)
HSB
hsb(17, 100%, 69%)
CMYK
cmyk(0%, 71%, 100%, 31%)
Oklch
oklch(50.5% 0.168 37.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55654B
5C4C67

Analogous

64674C
55654B
4C674F

Triadic

55654B
4C5667
674C56

Split-Comp.

55654B
4F4C67
674C64

Tetradic

55654B
4C6467
5C4C67
674F4C

Contrast Matrix WCAG 2.1 Contrast

55654B
AABFA0
FFFDCE
EA9C2F
AF3300
—
3.2
AA Large
6.0
AA
2.8
Fail
1.0
Fail
3.2
AA Large
—
1.9
Fail
1.1
Fail
3.2
AA Large
6.0
AA
1.9
Fail
—
2.2
Fail
6.1
AA
2.8
Fail
1.1
Fail
2.2
Fail
—
2.8
Fail
1.0
Fail
3.2
AA Large
6.1
AA
2.8
Fail
—
White BG
6.3AA
2.0Fail
1.0Fail
2.3Fail
6.4AA
Black BG
3.3AA Large
10.7AAA
20.2AAA
9.3AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5C51
B3B3A8
FEFED9
C8C849
79780C

Deuteranopia

5B5A53
B2B0A9
FEFEDC
CDD350
818A0F

Tritanopia

565657
ABADAF
FFE2E4
E65E63
A91618

Achromatopsia

5D5D5D
B5B5B5
F8F8F8
A7A7A7
525252

Shades & Tints Shades & Tints

#55654B

Dark
Light

#AABFA0

Dark
Light

#FFFDCE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55654b;
  --color-2: #aabfa0;
  --color-3: #fffdce;
  --color-4: #ea9c2f;
  --color-5: #af3300;
}

SCSS

$color-1: #55654b;
$color-2: #aabfa0;
$color-3: #fffdce;
$color-4: #ea9c2f;
$color-5: #af3300;

TAILWIND

colors: {
  'brand-1': '#55654b',
  'brand-2': '#aabfa0',
  'brand-3': '#fffdce',
  'brand-4': '#ea9c2f',
  'brand-5': '#af3300',
}

RGB Array

[85, 101, 75], [170, 191, 160], [255, 253, 206], [234, 156, 47], [175, 51, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #55654B, #AABFA0, #FFFDCE, #EA9C2F, #AF3300 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: #55654b; --color-2: #aabfa0; --color-3: #fffdce; --color-4: #ea9c2f; --color-5: #af3300. 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