← Back to Editor

#664D4D · #74424D · #E2F4DC · #CDD9CB · #BECCC0

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#664D4D

Crimson · DimGray · Wine Red

HEX
#664D4D
RGB
rgb(102, 77, 77)
HSL
hsl(0, 14%, 35%)
HSB
hsb(0, 25%, 40%)
CMYK
cmyk(0%, 25%, 25%, 60%)
Oklch
oklch(44.7% 0.034 18.5)

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

#74424D

Crimson · DimGray · Wine Red

HEX
#74424D
RGB
rgb(116, 66, 77)
HSL
hsl(347, 27%, 36%)
HSB
hsb(347, 43%, 45%)
CMYK
cmyk(0%, 43%, 34%, 55%)
Oklch
oklch(44.2% 0.070 6.2)

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

#E2F4DC

Emerald · Beige · Mint Green

HEX
#E2F4DC
RGB
rgb(226, 244, 220)
HSL
hsl(105, 52%, 91%)
HSB
hsb(105, 10%, 96%)
CMYK
cmyk(7%, 0%, 10%, 4%)
Oklch
oklch(94.7% 0.037 137.8)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#CDD9CB

Celadon · LightGray · Mint Green

HEX
#CDD9CB
RGB
rgb(205, 217, 203)
HSL
hsl(111, 16%, 82%)
HSB
hsb(111, 6%, 85%)
CMYK
cmyk(6%, 0%, 6%, 15%)
Oklch
oklch(87.2% 0.023 141.2)

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

#BECCC0

Celadon · Silver · Apple Green

HEX
#BECCC0
RGB
rgb(190, 204, 192)
HSL
hsl(129, 12%, 77%)
HSB
hsb(129, 7%, 80%)
CMYK
cmyk(7%, 0%, 6%, 20%)
Oklch
oklch(83.1% 0.022 149.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664D4D
4D6666

Analogous

664D59
664D4D
66594D

Triadic

664D4D
4D664D
4D4D66

Split-Comp.

664D4D
4D6659
4D5966

Tetradic

664D4D
59664D
4D6666
594D66

Contrast Matrix WCAG 2.1 Contrast

664D4D
74424D
E2F4DC
CDD9CB
BECCC0
—
1.0
Fail
6.7
AA
5.3
AA
4.6
AA
1.0
Fail
—
6.9
AA
5.5
AA
4.8
AA
6.7
AA
6.9
AA
—
1.3
Fail
1.4
Fail
5.3
AA
5.5
AA
1.3
Fail
—
1.1
Fail
4.6
AA
4.8
AA
1.4
Fail
1.1
Fail
—
White BG
7.7AAA
8.0AAA
1.2Fail
1.5Fail
1.7Fail
Black BG
2.7Fail
2.6Fail
18.2AAA
14.4AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B4D
5E5E4A
EAEAE2
D2D2CE
C4C4C3

Deuteranopia

5D5E4D
61654A
E9E7E3
D2D1CF
C3C2C4

Tritanopia

654D4D
714848
E3E6E7
CED1D2
BFC5C6

Achromatopsia

545454
525252
ECECEC
D4D4D4
C6C6C6

Shades & Tints Shades & Tints

#664D4D

Dark
Light

#74424D

Dark
Light

#E2F4DC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664d4d;
  --color-2: #74424d;
  --color-3: #e2f4dc;
  --color-4: #cdd9cb;
  --color-5: #beccc0;
}

SCSS

$color-1: #664d4d;
$color-2: #74424d;
$color-3: #e2f4dc;
$color-4: #cdd9cb;
$color-5: #beccc0;

TAILWIND

colors: {
  'brand-1': '#664d4d',
  'brand-2': '#74424d',
  'brand-3': '#e2f4dc',
  'brand-4': '#cdd9cb',
  'brand-5': '#beccc0',
}

RGB Array

[102, 77, 77], [116, 66, 77], [226, 244, 220], [205, 217, 203], [190, 204, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #664D4D, #74424D, #E2F4DC, #CDD9CB, #BECCC0 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #664d4d; --color-2: #74424d; --color-3: #e2f4dc; --color-4: #cdd9cb; --color-5: #beccc0. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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