#353B3D + #613B3B + #8A3A43 + #C43D58 + #AD824E · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#353B3D

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#353B3D

RGB

rgb(53, 59, 61)

HSL

hsl(195, 7%, 22%)

HSB

hsb(195, 13%, 24%)

CMYK

cmyk(13%, 3%, 0%, 76%)

Oklch

oklch(34.7% 0.009 219.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#613B3B

Crimson · DarkOliveGreen · Wine Red

HEX

#613B3B

RGB

rgb(97, 59, 59)

HSL

hsl(0, 24%, 31%)

HSB

hsb(0, 39%, 38%)

CMYK

cmyk(0%, 39%, 39%, 62%)

Oklch

oklch(39.8% 0.054 19.7)

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

#8A3A43

Crimson · Sienna · Wine Red

HEX

#8A3A43

RGB

rgb(138, 58, 67)

HSL

hsl(353, 41%, 38%)

HSB

hsb(353, 58%, 54%)

CMYK

cmyk(0%, 58%, 51%, 46%)

Oklch

oklch(45.9% 0.109 15.6)

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

#C43D58

Crimson · Crimson · Passion Red

HEX

#C43D58

RGB

rgb(196, 61, 88)

HSL

hsl(348, 53%, 50%)

HSB

hsb(348, 69%, 77%)

CMYK

cmyk(0%, 69%, 55%, 23%)

Oklch

oklch(56.2% 0.171 12.9)

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

#AD824E

Ochre · Sienna · Amber Brown

HEX

#AD824E

RGB

rgb(173, 130, 78)

HSL

hsl(33, 38%, 49%)

HSB

hsb(33, 55%, 68%)

CMYK

cmyk(0%, 25%, 55%, 32%)

Oklch

oklch(63.7% 0.087 70.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

353B3D

3C3634

Analogous

343C3A

353B3D

34363C

Triadic

353B3D

3C343A

3A3C34

Split-Comp.

353B3D

3C3436

3C3A34

Tetradic

353B3D

3A343C

3C3634

363C34

Contrast Matrix WCAG 2.1 Contrast

353B3D	613B3B	8A3A43	C43D58	AD824E
—	1.2 Fail	1.5 Fail	2.3 Fail	3.3 AA Large
1.2 Fail	—	1.3 Fail	1.9 Fail	2.8 Fail
1.5 Fail	1.3 Fail	—	1.5 Fail	2.2 Fail
2.3 Fail	1.9 Fail	1.5 Fail	—	1.5 Fail
3.3 AA Large	2.8 Fail	2.2 Fail	1.5 Fail	—

White BG

11.4AAA

9.6AAA

7.6AAA

5.1AA

3.5AA Large

Black BG

1.8Fail

2.2Fail

2.8Fail

4.2AA Large

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

38383D

51503B

676741

8A8851

9A9A5B

Deuteranopia

37373C

53563B

6C7240

919C50

9DA05E

Tritanopia

353C3C

5F3B3B

863F3F

BD4C4B

AB6567

Achromatopsia

393939

464646

535353

686868

898989

Shades & Tints Shades & Tints

#353B3D

Dark

Light

#613B3B

Dark

Light

#8A3A43

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #353b3d;
  --color-2: #613b3b;
  --color-3: #8a3a43;
  --color-4: #c43d58;
  --color-5: #ad824e;
}

SCSS

$color-1: #353b3d;
$color-2: #613b3b;
$color-3: #8a3a43;
$color-4: #c43d58;
$color-5: #ad824e;

TAILWIND

colors: {
  'brand-1': '#353b3d',
  'brand-2': '#613b3b',
  'brand-3': '#8a3a43',
  'brand-4': '#c43d58',
  'brand-5': '#ad824e',
}

RGB Array

[53, 59, 61], [97, 59, 59], [138, 58, 67], [196, 61, 88], [173, 130, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #353B3D, #613B3B, #8A3A43, #C43D58, #AD824E is ideal for: tech websites, dark mode UIs, game UIs. 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: #353b3d; --color-2: #613b3b; --color-3: #8a3a43; --color-4: #c43d58; --color-5: #ad824e. 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 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