← Back to Editor

#14B9C4 · #947353 · #4D6664 · #3D3832 · #302C27

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#14B9C4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#14B9C4
RGB
rgb(20, 185, 196)
HSL
hsl(184, 81%, 42%)
HSB
hsb(184, 90%, 77%)
CMYK
cmyk(90%, 6%, 0%, 23%)
Oklch
oklch(71.7% 0.119 202.5)

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

#947353

Ochre · DimGray · Amber Brown

HEX
#947353
RGB
rgb(148, 115, 83)
HSL
hsl(30, 28%, 45%)
HSB
hsb(30, 44%, 58%)
CMYK
cmyk(0%, 22%, 44%, 42%)
Oklch
oklch(58.0% 0.062 65.2)

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

#4D6664

Mineral Blue · DimGray · Mint Ice

HEX
#4D6664
RGB
rgb(77, 102, 100)
HSL
hsl(175, 14%, 35%)
HSB
hsb(175, 25%, 40%)
CMYK
cmyk(25%, 0%, 2%, 60%)
Oklch
oklch(49.0% 0.030 190.1)

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

#3D3832

Ochre · DarkSlateGray · Cinnamon

HEX
#3D3832
RGB
rgb(61, 56, 50)
HSL
hsl(33, 10%, 22%)
HSB
hsb(33, 18%, 24%)
CMYK
cmyk(0%, 8%, 18%, 76%)
Oklch
oklch(34.4% 0.012 72.4)

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

#302C27

Ochre · DarkSlateGray · Cinnamon

HEX
#302C27
RGB
rgb(48, 44, 39)
HSL
hsl(33, 10%, 17%)
HSB
hsb(33, 19%, 19%)
CMYK
cmyk(0%, 8%, 19%, 81%)
Oklch
oklch(29.6% 0.011 73.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14B9C4
C22014

Analogous

14C277
14B9C4
1460C2

Triadic

14B9C4
C214B6
B6C214

Split-Comp.

14B9C4
C21460
C27714

Tetradic

14B9C4
7714C2
C22014
60C214

Contrast Matrix WCAG 2.1 Contrast

14B9C4
947353
4D6664
3D3832
302C27
—
1.8
Fail
2.6
Fail
4.8
AA
5.8
AA
1.8
Fail
—
1.4
Fail
2.7
Fail
3.2
AA Large
2.6
Fail
1.4
Fail
—
1.9
Fail
2.2
Fail
4.8
AA
2.7
Fail
1.9
Fail
—
1.2
Fail
5.8
AA
3.2
AA Large
2.2
Fail
1.2
Fail
—
White BG
2.4Fail
4.3AA Large
6.2AA
11.6AAA
13.9AAA
Black BG
8.8AAA
4.8AA
3.4AA Large
1.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5DC1
86855B
585864
3B3B33
2E2E28

Deuteranopia

5246C1
888A5D
565565
3B3C34
2F2F29

Tritanopia

1CBFBF
926162
4E6565
3D3535
302929

Achromatopsia

898989
797979
5E5E5E
393939
2D2D2D

Shades & Tints Shades & Tints

#14B9C4

Dark
Light

#947353

Dark
Light

#4D6664

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14b9c4;
  --color-2: #947353;
  --color-3: #4d6664;
  --color-4: #3d3832;
  --color-5: #302c27;
}

SCSS

$color-1: #14b9c4;
$color-2: #947353;
$color-3: #4d6664;
$color-4: #3d3832;
$color-5: #302c27;

TAILWIND

colors: {
  'brand-1': '#14b9c4',
  'brand-2': '#947353',
  'brand-3': '#4d6664',
  'brand-4': '#3d3832',
  'brand-5': '#302c27',
}

RGB Array

[20, 185, 196], [148, 115, 83], [77, 102, 100], [61, 56, 50], [48, 44, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #14B9C4, #947353, #4D6664, #3D3832, #302C27 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #14b9c4; --color-2: #947353; --color-3: #4d6664; --color-4: #3d3832; --color-5: #302c27. 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 finance, legal, luxury 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