← Back to Editor

#321809 · #C6232A · #CB982A · #25713C · #218480

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

#321809

Tangerine · Black · Cinnamon

HEX
#321809
RGB
rgb(50, 24, 9)
HSL
hsl(22, 69%, 12%)
HSB
hsb(22, 82%, 20%)
CMYK
cmyk(0%, 52%, 82%, 80%)
Oklch
oklch(24.2% 0.049 49.0)

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

#C6232A

Vermilion · FireBrick · Passion Red

HEX
#C6232A
RGB
rgb(198, 35, 42)
HSL
hsl(357, 70%, 46%)
HSB
hsb(357, 82%, 78%)
CMYK
cmyk(0%, 82%, 79%, 22%)
Oklch
oklch(53.5% 0.197 25.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#CB982A

Ochre · GoldenRod · Honey Gold

HEX
#CB982A
RGB
rgb(203, 152, 42)
HSL
hsl(41, 66%, 48%)
HSB
hsb(41, 79%, 80%)
CMYK
cmyk(0%, 25%, 79%, 20%)
Oklch
oklch(71.0% 0.133 81.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#25713C

Pine Green · ForestGreen · Forest Green

HEX
#25713C
RGB
rgb(37, 113, 60)
HSL
hsl(138, 51%, 29%)
HSB
hsb(138, 67%, 44%)
CMYK
cmyk(67%, 0%, 47%, 56%)
Oklch
oklch(48.8% 0.112 150.0)

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

#218480

Mineral Blue · Teal · Mint Ice

HEX
#218480
RGB
rgb(33, 132, 128)
HSL
hsl(178, 60%, 32%)
HSB
hsb(178, 75%, 52%)
CMYK
cmyk(75%, 0%, 3%, 48%)
Oklch
oklch(55.8% 0.087 190.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

321809
092434

Analogous

34090F
321809
342E09

Triadic

321809
093419
190934

Split-Comp.

321809
09342E
090F34

Tetradic

321809
0F3409
092434
2E0934

Contrast Matrix WCAG 2.1 Contrast

321809
C6232A
CB982A
25713C
218480
—
2.9
Fail
6.3
AA
2.8
Fail
3.7
AA Large
2.9
Fail
—
2.2
Fail
1.0
Fail
1.3
Fail
6.3
AA
2.2
Fail
—
2.3
Fail
1.7
Fail
2.8
Fail
1.0
Fail
2.3
Fail
—
1.3
Fail
3.7
AA Large
1.3
Fail
1.7
Fail
1.3
Fail
—
White BG
16.5AAA
5.7AA
2.6Fail
6.0AA
4.5AA Large
Black BG
1.3Fail
3.7AA Large
8.1AAA
3.5AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27270D
7F7E28
B5B445
464749
4C4D81

Deuteranopia

282A0E
899528
B8BC4B
423C4C
463F81

Tritanopia

310F10
BE2727
C85A5E
295355
268282

Achromatopsia

1E1E1E
555555
9B9B9B
545454
666666

Shades & Tints Shades & Tints

#321809

Dark
Light

#C6232A

Dark
Light

#CB982A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #321809;
  --color-2: #c6232a;
  --color-3: #cb982a;
  --color-4: #25713c;
  --color-5: #218480;
}

SCSS

$color-1: #321809;
$color-2: #c6232a;
$color-3: #cb982a;
$color-4: #25713c;
$color-5: #218480;

TAILWIND

colors: {
  'brand-1': '#321809',
  'brand-2': '#c6232a',
  'brand-3': '#cb982a',
  'brand-4': '#25713c',
  'brand-5': '#218480',
}

RGB Array

[50, 24, 9], [198, 35, 42], [203, 152, 42], [37, 113, 60], [33, 132, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #321809, #C6232A, #CB982A, #25713C, #218480 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #321809; --color-2: #c6232a; --color-3: #cb982a; --color-4: #25713c; --color-5: #218480. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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