← Back to Editor

#3CAB96 · #2C2E33 · #AB3C3C · #CCB98D · #402B21

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3CAB96

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#3CAB96
RGB
rgb(60, 171, 150)
HSL
hsl(169, 48%, 45%)
HSB
hsb(169, 65%, 67%)
CMYK
cmyk(65%, 0%, 12%, 33%)
Oklch
oklch(67.3% 0.105 178.0)

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

#2C2E33

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2C2E33
RGB
rgb(44, 46, 51)
HSL
hsl(223, 7%, 19%)
HSB
hsb(223, 14%, 20%)
CMYK
cmyk(14%, 10%, 0%, 80%)
Oklch
oklch(30.1% 0.009 268.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#AB3C3C

Crimson · Brown · Passion Red

HEX
#AB3C3C
RGB
rgb(171, 60, 60)
HSL
hsl(0, 48%, 45%)
HSB
hsb(0, 65%, 67%)
CMYK
cmyk(0%, 65%, 65%, 33%)
Oklch
oklch(51.4% 0.146 23.8)

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

#CCB98D

Ginger · Tan · Sunflower

HEX
#CCB98D
RGB
rgb(204, 185, 141)
HSL
hsl(42, 38%, 68%)
HSB
hsb(42, 31%, 80%)
CMYK
cmyk(0%, 9%, 31%, 20%)
Oklch
oklch(79.1% 0.063 87.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#402B21

Tangerine · DarkSlateGray · Cinnamon

HEX
#402B21
RGB
rgb(64, 43, 33)
HSL
hsl(19, 32%, 19%)
HSB
hsb(19, 48%, 25%)
CMYK
cmyk(0%, 33%, 48%, 75%)
Oklch
oklch(31.1% 0.036 46.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3CAB96
AA3C50

Analogous

3CAA5F
3CAB96
3C87AA

Triadic

3CAB96
963CAA
AA963C

Split-Comp.

3CAB96
AA3C87
AA5F3C

Tetradic

3CAB96
5F3CAA
AA3C50
87AA3C

Contrast Matrix WCAG 2.1 Contrast

3CAB96
2C2E33
AB3C3C
CCB98D
402B21
—
4.8
AA
2.2
Fail
1.5
Fail
4.7
AA
4.8
AA
—
2.2
Fail
7.0
AAA
1.0
Fail
2.2
Fail
2.2
Fail
—
3.2
AA Large
2.2
Fail
1.5
Fail
7.0
AAA
3.2
AA Large
—
6.9
AA
4.7
AA
1.0
Fail
2.2
Fail
6.9
AA
—
White BG
2.8Fail
13.6AAA
6.1AA
1.9Fail
13.2AAA
Black BG
7.5AAA
1.5Fail
3.4AA Large
10.9AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6D9B
2D2D32
7B7A3C
C4C498
373723

Deuteranopia

665D9C
2D2D31
818A3C
C5C69A
383A24

Tritanopia

429FA0
2C3131
A53C3C
CBA0A2
3F2526

Achromatopsia

878787
2E2E2E
5D5D5D
BABABA
303030

Shades & Tints Shades & Tints

#3CAB96

Dark
Light

#2C2E33

Dark
Light

#AB3C3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3cab96;
  --color-2: #2c2e33;
  --color-3: #ab3c3c;
  --color-4: #ccb98d;
  --color-5: #402b21;
}

SCSS

$color-1: #3cab96;
$color-2: #2c2e33;
$color-3: #ab3c3c;
$color-4: #ccb98d;
$color-5: #402b21;

TAILWIND

colors: {
  'brand-1': '#3cab96',
  'brand-2': '#2c2e33',
  'brand-3': '#ab3c3c',
  'brand-4': '#ccb98d',
  'brand-5': '#402b21',
}

RGB Array

[60, 171, 150], [44, 46, 51], [171, 60, 60], [204, 185, 141], [64, 43, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #3CAB96, #2C2E33, #AB3C3C, #CCB98D, #402B21 is ideal for: tech websites, dark mode UIs, game UIs, 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: #3cab96; --color-2: #2c2e33; --color-3: #ab3c3c; --color-4: #ccb98d; --color-5: #402b21. 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. 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 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