← Back to Editor

#1F1301 · #6A532D · #F0DEA8 · #5DA690 · #3E968B

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

#1F1301

Ochre · Black · Cinnamon

HEX
#1F1301
RGB
rgb(31, 19, 1)
HSL
hsl(36, 94%, 6%)
HSB
hsb(36, 97%, 12%)
CMYK
cmyk(0%, 39%, 97%, 88%)
Oklch
oklch(19.8% 0.039 78.3)

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

#6A532D

Ochre · DarkOliveGreen · Amber Brown

HEX
#6A532D
RGB
rgb(106, 83, 45)
HSL
hsl(37, 40%, 30%)
HSB
hsb(37, 58%, 42%)
CMYK
cmyk(0%, 22%, 58%, 58%)
Oklch
oklch(45.7% 0.062 78.8)

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

#F0DEA8

Goose Yellow · Wheat · Lemon Cream

HEX
#F0DEA8
RGB
rgb(240, 222, 168)
HSL
hsl(45, 71%, 80%)
HSB
hsb(45, 30%, 94%)
CMYK
cmyk(0%, 7%, 30%, 6%)
Oklch
oklch(90.2% 0.072 91.8)

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

#5DA690

Mineral Blue · CadetBlue · Lake Green

HEX
#5DA690
RGB
rgb(93, 166, 144)
HSL
hsl(162, 29%, 51%)
HSB
hsb(162, 44%, 65%)
CMYK
cmyk(44%, 0%, 13%, 35%)
Oklch
oklch(67.1% 0.081 172.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3E968B

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#3E968B
RGB
rgb(62, 150, 139)
HSL
hsl(173, 42%, 42%)
HSB
hsb(173, 59%, 59%)
CMYK
cmyk(59%, 0%, 7%, 41%)
Oklch
oklch(61.7% 0.086 184.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F1301
010C1E

Analogous

1E0401
1F1301
1B1E01

Triadic

1F1301
011E12
12011E

Split-Comp.

1F1301
011B1E
04011E

Tetradic

1F1301
011E04
010C1E
1E011B

Contrast Matrix WCAG 2.1 Contrast

1F1301
6A532D
F0DEA8
5DA690
3E968B
—
2.5
Fail
13.6
AAA
6.4
AA
5.2
AA
2.5
Fail
—
5.4
AA
2.5
Fail
2.1
Fail
13.6
AAA
5.4
AA
—
2.1
Fail
2.6
Fail
6.4
AA
2.5
Fail
2.1
Fail
—
1.2
Fail
5.2
AA
2.1
Fail
2.6
Fail
1.2
Fail
—
White BG
18.2AAA
7.3AAA
1.3Fail
2.9Fail
3.5AA Large
Black BG
1.2Fail
2.9Fail
15.7AAA
7.3AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A1A05
606036
E8E8B5
7D7D95
64658E

Deuteranopia

1B1B06
616338
E9EBB8
787397
5F588E

Tritanopia

1E090A
693D3F
EFBFC2
619A9A
429090

Achromatopsia

151515
565656
DDDDDD
8E8E8E
7A7A7A

Shades & Tints Shades & Tints

#1F1301

Dark
Light

#6A532D

Dark
Light

#F0DEA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f1301;
  --color-2: #6a532d;
  --color-3: #f0dea8;
  --color-4: #5da690;
  --color-5: #3e968b;
}

SCSS

$color-1: #1f1301;
$color-2: #6a532d;
$color-3: #f0dea8;
$color-4: #5da690;
$color-5: #3e968b;

TAILWIND

colors: {
  'brand-1': '#1f1301',
  'brand-2': '#6a532d',
  'brand-3': '#f0dea8',
  'brand-4': '#5da690',
  'brand-5': '#3e968b',
}

RGB Array

[31, 19, 1], [106, 83, 45], [240, 222, 168], [93, 166, 144], [62, 150, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #1F1301, #6A532D, #F0DEA8, #5DA690, #3E968B is ideal for: 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: #1f1301; --color-2: #6a532d; --color-3: #f0dea8; --color-4: #5da690; --color-5: #3e968b. 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. 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