← Back to Editor

#553218 · #AE7F2C · #F9F794 · #33C1DD · #A5F3FB

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

Color Details Color Details

#553218

Tangerine · DarkOliveGreen · Cinnamon

HEX
#553218
RGB
rgb(85, 50, 24)
HSL
hsl(26, 56%, 21%)
HSB
hsb(26, 72%, 33%)
CMYK
cmyk(0%, 41%, 72%, 67%)
Oklch
oklch(35.5% 0.064 55.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#AE7F2C

Ochre · DarkGoldenRod · Amber Brown

HEX
#AE7F2C
RGB
rgb(174, 127, 44)
HSL
hsl(38, 60%, 43%)
HSB
hsb(38, 75%, 68%)
CMYK
cmyk(0%, 27%, 75%, 32%)
Oklch
oklch(62.8% 0.113 77.8)

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

#F9F794

Fresh Green · Khaki · Lemon Cream

HEX
#F9F794
RGB
rgb(249, 247, 148)
HSL
hsl(59, 89%, 78%)
HSB
hsb(59, 41%, 98%)
CMYK
cmyk(0%, 1%, 41%, 2%)
Oklch
oklch(95.7% 0.121 107.5)

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

#33C1DD

Lake Blue · MediumTurquoise · Lake Green

HEX
#33C1DD
RGB
rgb(51, 193, 221)
HSL
hsl(190, 71%, 53%)
HSB
hsb(190, 77%, 87%)
CMYK
cmyk(77%, 13%, 0%, 13%)
Oklch
oklch(75.0% 0.121 214.5)

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

#A5F3FB

Sky Blue · LightBlue · Glacier Blue

HEX
#A5F3FB
RGB
rgb(165, 243, 251)
HSL
hsl(186, 91%, 82%)
HSB
hsb(186, 34%, 98%)
CMYK
cmyk(34%, 3%, 0%, 2%)
Oklch
oklch(91.6% 0.077 204.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

553218
183A54

Analogous

54181C
553218
545018

Triadic

553218
185432
321854

Split-Comp.

553218
185450
181C54

Tetradic

553218
1C5418
183A54
501854

Contrast Matrix WCAG 2.1 Contrast

553218
AE7F2C
F9F794
33C1DD
A5F3FB
—
3.2
AA Large
10.1
AAA
5.3
AA
9.1
AAA
3.2
AA Large
—
3.2
AA Large
1.7
Fail
2.9
Fail
10.1
AAA
3.2
AA Large
—
1.9
Fail
1.1
Fail
5.3
AA
1.7
Fail
1.9
Fail
—
1.7
Fail
9.1
AAA
2.9
Fail
1.1
Fail
1.7
Fail
—
White BG
11.3AAA
3.6AA Large
1.1Fail
2.1Fail
1.2Fail
Black BG
1.9Fail
5.9AA
18.8AAA
9.8AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46461E
9A9940
F8F8AC
7072D6
C7C7F9

Deuteranopia

484B20
9CA045
F8F8B2
685ED5
C2BCF9

Tritanopia

532324
AC5053
F9BFC3
3AD1D0
A9F8F7

Achromatopsia

3A3A3A
848484
ECECEC
9A9A9A
DDDDDD

Shades & Tints Shades & Tints

#553218

Dark
Light

#AE7F2C

Dark
Light

#F9F794

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #553218;
  --color-2: #ae7f2c;
  --color-3: #f9f794;
  --color-4: #33c1dd;
  --color-5: #a5f3fb;
}

SCSS

$color-1: #553218;
$color-2: #ae7f2c;
$color-3: #f9f794;
$color-4: #33c1dd;
$color-5: #a5f3fb;

TAILWIND

colors: {
  'brand-1': '#553218',
  'brand-2': '#ae7f2c',
  'brand-3': '#f9f794',
  'brand-4': '#33c1dd',
  'brand-5': '#a5f3fb',
}

RGB Array

[85, 50, 24], [174, 127, 44], [249, 247, 148], [51, 193, 221], [165, 243, 251]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #553218, #AE7F2C, #F9F794, #33C1DD, #A5F3FB 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: #553218; --color-2: #ae7f2c; --color-3: #f9f794; --color-4: #33c1dd; --color-5: #a5f3fb. 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 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