← Back to Editor

#231403 · #F0E3B4 · #3D6166 · #A8944C · #4D3213

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

#231403

Ochre · Black · Cinnamon

HEX
#231403
RGB
rgb(35, 20, 3)
HSL
hsl(32, 84%, 7%)
HSB
hsb(32, 91%, 14%)
CMYK
cmyk(0%, 43%, 91%, 86%)
Oklch
oklch(20.7% 0.039 69.1)

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

#F0E3B4

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E3B4
RGB
rgb(240, 227, 180)
HSL
hsl(47, 67%, 82%)
HSB
hsb(47, 25%, 94%)
CMYK
cmyk(0%, 5%, 25%, 6%)
Oklch
oklch(91.5% 0.063 94.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#3D6166

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3D6166
RGB
rgb(61, 97, 102)
HSL
hsl(187, 25%, 32%)
HSB
hsb(187, 40%, 40%)
CMYK
cmyk(40%, 5%, 0%, 60%)
Oklch
oklch(46.7% 0.042 206.9)

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

#A8944C

Ochre · DarkGoldenRod · Honey Gold

HEX
#A8944C
RGB
rgb(168, 148, 76)
HSL
hsl(47, 38%, 48%)
HSB
hsb(47, 55%, 66%)
CMYK
cmyk(0%, 12%, 55%, 34%)
Oklch
oklch(66.9% 0.095 94.1)

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

#4D3213

Ochre · DarkOliveGreen · Cinnamon

HEX
#4D3213
RGB
rgb(77, 50, 19)
HSL
hsl(32, 60%, 19%)
HSB
hsb(32, 75%, 30%)
CMYK
cmyk(0%, 35%, 75%, 70%)
Oklch
oklch(34.3% 0.059 67.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

231403
031121

Analogous

210403
231403
202103

Triadic

231403
032113
130321

Split-Comp.

231403
032021
040321

Tetradic

231403
032104
031121
210320

Contrast Matrix WCAG 2.1 Contrast

231403
F0E3B4
3D6166
A8944C
4D3213
—
13.9
AAA
2.6
Fail
6.0
AA
1.5
Fail
13.9
AAA
—
5.3
AA
2.3
Fail
9.2
AAA
2.6
Fail
5.3
AA
—
2.3
Fail
1.7
Fail
6.0
AA
2.3
Fail
2.3
Fail
—
3.9
AA Large
1.5
Fail
9.2
AAA
1.7
Fail
3.9
AA Large
—
White BG
17.9AAA
1.3Fail
6.8AA
3.0Fail
11.8AAA
Black BG
1.2Fail
16.4AAA
3.1AA Large
7.0AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1C07
EAEABF
4D4D65
9F9F5D
41411B

Deuteranopia

1D1F08
EBECC2
4B4864
A1A262
43451C

Tritanopia

220A0B
EFC8CA
3F6464
A76B6E
4C2022

Achromatopsia

171717
E2E2E2
575757
929292
373737

Shades & Tints Shades & Tints

#231403

Dark
Light

#F0E3B4

Dark
Light

#3D6166

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #231403;
  --color-2: #f0e3b4;
  --color-3: #3d6166;
  --color-4: #a8944c;
  --color-5: #4d3213;
}

SCSS

$color-1: #231403;
$color-2: #f0e3b4;
$color-3: #3d6166;
$color-4: #a8944c;
$color-5: #4d3213;

TAILWIND

colors: {
  'brand-1': '#231403',
  'brand-2': '#f0e3b4',
  'brand-3': '#3d6166',
  'brand-4': '#a8944c',
  'brand-5': '#4d3213',
}

RGB Array

[35, 20, 3], [240, 227, 180], [61, 97, 102], [168, 148, 76], [77, 50, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #231403, #F0E3B4, #3D6166, #A8944C, #4D3213 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: #231403; --color-2: #f0e3b4; --color-3: #3d6166; --color-4: #a8944c; --color-5: #4d3213. 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