← Back to Editor

#69856F · #9AA980 · #DDCA90 · #AE8742 · #281B13

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

#69856F

Celadon · DimGray · Olive Green

HEX
#69856F
RGB
rgb(105, 133, 111)
HSL
hsl(133, 12%, 47%)
HSB
hsb(133, 21%, 52%)
CMYK
cmyk(21%, 0%, 17%, 48%)
Oklch
oklch(58.8% 0.046 151.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#9AA980

Grass Green · DarkSeaGreen · Olive Green

HEX
#9AA980
RGB
rgb(154, 169, 128)
HSL
hsl(82, 19%, 58%)
HSB
hsb(82, 24%, 66%)
CMYK
cmyk(9%, 0%, 24%, 34%)
Oklch
oklch(71.2% 0.060 124.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#DDCA90

Goose Yellow · BurlyWood · Sunflower

HEX
#DDCA90
RGB
rgb(221, 202, 144)
HSL
hsl(45, 53%, 72%)
HSB
hsb(45, 35%, 87%)
CMYK
cmyk(0%, 9%, 35%, 13%)
Oklch
oklch(84.1% 0.078 92.1)

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

#AE8742

Ochre · DarkGoldenRod · Amber Brown

HEX
#AE8742
RGB
rgb(174, 135, 66)
HSL
hsl(38, 45%, 47%)
HSB
hsb(38, 62%, 68%)
CMYK
cmyk(0%, 22%, 62%, 32%)
Oklch
oklch(64.7% 0.099 79.7)

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

#281B13

Tangerine · Black · Cinnamon

HEX
#281B13
RGB
rgb(40, 27, 19)
HSL
hsl(23, 36%, 12%)
HSB
hsb(23, 53%, 16%)
CMYK
cmyk(0%, 33%, 53%, 84%)
Oklch
oklch(23.6% 0.025 52.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69856F
866980

Analogous

728669
69856F
69867E

Triadic

69856F
706986
867069

Split-Comp.

69856F
7E6986
866972

Tetradic

69856F
697286
866980
867E69

Contrast Matrix WCAG 2.1 Contrast

69856F
9AA980
DDCA90
AE8742
281B13
—
1.6
Fail
2.5
Fail
1.2
Fail
4.1
AA Large
1.6
Fail
—
1.5
Fail
1.3
Fail
6.7
AA
2.5
Fail
1.5
Fail
—
2.0
Fail
10.3
AAA
1.2
Fail
1.3
Fail
2.0
Fail
—
5.0
AA
4.1
AA Large
6.7
AA
10.3
AAA
5.0
AA
—
White BG
4.0AA Large
2.5Fail
1.6Fail
3.3AA Large
16.7AAA
Black BG
5.2AA
8.4AAA
12.9AAA
6.3AA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

757574
A0A18A
D5D59E
9D9D53
222215

Deuteranopia

747176
A09F8C
D6D7A1
9FA257
232415

Tritanopia

6A7979
9B9293
DCA9AC
AC6063
271617

Achromatopsia

7A7A7A
A0A0A0
C9C9C9
8B8B8B
1E1E1E

Shades & Tints Shades & Tints

#69856F

Dark
Light

#9AA980

Dark
Light

#DDCA90

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69856f;
  --color-2: #9aa980;
  --color-3: #ddca90;
  --color-4: #ae8742;
  --color-5: #281b13;
}

SCSS

$color-1: #69856f;
$color-2: #9aa980;
$color-3: #ddca90;
$color-4: #ae8742;
$color-5: #281b13;

TAILWIND

colors: {
  'brand-1': '#69856f',
  'brand-2': '#9aa980',
  'brand-3': '#ddca90',
  'brand-4': '#ae8742',
  'brand-5': '#281b13',
}

RGB Array

[105, 133, 111], [154, 169, 128], [221, 202, 144], [174, 135, 66], [40, 27, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #69856F, #9AA980, #DDCA90, #AE8742, #281B13 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: #69856f; --color-2: #9aa980; --color-3: #ddca90; --color-4: #ae8742; --color-5: #281b13. 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