← Back to Editor

#FEAE37 · #FF8F24 · #61473A · #51B4D4 · #2F8DCA

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FEAE37

Ginger · SandyBrown · Warm Sun

HEX
#FEAE37
RGB
rgb(254, 174, 55)
HSL
hsl(36, 99%, 61%)
HSB
hsb(36, 78%, 100%)
CMYK
cmyk(0%, 31%, 78%, 0%)
Oklch
oklch(80.9% 0.156 72.0)

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

#FF8F24

Tangerine · Orange · Warm Sun

HEX
#FF8F24
RGB
rgb(255, 143, 36)
HSL
hsl(29, 100%, 57%)
HSB
hsb(29, 86%, 100%)
CMYK
cmyk(0%, 44%, 86%, 0%)
Oklch
oklch(75.6% 0.172 57.2)

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

#61473A

Tangerine · DarkOliveGreen · Amber Brown

HEX
#61473A
RGB
rgb(97, 71, 58)
HSL
hsl(20, 25%, 30%)
HSB
hsb(20, 40%, 38%)
CMYK
cmyk(0%, 27%, 40%, 62%)
Oklch
oklch(42.2% 0.042 47.7)

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

#51B4D4

Lake Blue · MediumTurquoise · Lake Green

HEX
#51B4D4
RGB
rgb(81, 180, 212)
HSL
hsl(195, 60%, 57%)
HSB
hsb(195, 62%, 83%)
CMYK
cmyk(62%, 15%, 0%, 17%)
Oklch
oklch(72.4% 0.103 222.3)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#2F8DCA

Lake Blue · SteelBlue · Navy Blue

HEX
#2F8DCA
RGB
rgb(47, 141, 202)
HSL
hsl(204, 62%, 49%)
HSB
hsb(204, 77%, 79%)
CMYK
cmyk(77%, 30%, 0%, 21%)
Oklch
oklch(61.7% 0.126 241.9)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEAE37
3988FE

Analogous

FE4D39
FEAE37
EAFE39

Triadic

FEAE37
39FEAF
AF39FE

Split-Comp.

FEAE37
39EAFE
4D39FE

Tetradic

FEAE37
39FE4D
3988FE
FE39EA

Contrast Matrix WCAG 2.1 Contrast

FEAE37
FF8F24
61473A
51B4D4
2F8DCA
—
1.2
Fail
4.6
AA
1.3
Fail
2.0
Fail
1.2
Fail
—
3.7
AA Large
1.0
Fail
1.6
Fail
4.6
AA
3.7
AA Large
—
3.6
AA Large
2.3
Fail
1.3
Fail
1.0
Fail
3.6
AA Large
—
1.5
Fail
2.0
Fail
1.6
Fail
2.3
Fail
1.5
Fail
—
White BG
1.9Fail
2.3Fail
8.5AAA
2.4Fail
3.6AA Large
Black BG
11.3AAA
9.2AAA
2.5Fail
8.8AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB54
CFCD3E
56563D
7C7DCC
5859BB

Deuteranopia

E0E65B
D5DD44
57593E
766FCA
524BB8

Tritanopia

FA6B70
F95257
604040
56C6C5
34B0AD

Achromatopsia

B8B8B8
A4A4A4
4D4D4D
9A9A9A
787878

Shades & Tints Shades & Tints

#FEAE37

Dark
Light

#FF8F24

Dark
Light

#61473A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #feae37;
  --color-2: #ff8f24;
  --color-3: #61473a;
  --color-4: #51b4d4;
  --color-5: #2f8dca;
}

SCSS

$color-1: #feae37;
$color-2: #ff8f24;
$color-3: #61473a;
$color-4: #51b4d4;
$color-5: #2f8dca;

TAILWIND

colors: {
  'brand-1': '#feae37',
  'brand-2': '#ff8f24',
  'brand-3': '#61473a',
  'brand-4': '#51b4d4',
  'brand-5': '#2f8dca',
}

RGB Array

[254, 174, 55], [255, 143, 36], [97, 71, 58], [81, 180, 212], [47, 141, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FEAE37, #FF8F24, #61473A, #51B4D4, #2F8DCA 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: #feae37; --color-2: #ff8f24; --color-3: #61473a; --color-4: #51b4d4; --color-5: #2f8dca. 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 coffee-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