#122329 + #213E40 + #6E604B + #473C2E + #331F0F · 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

#122329

Slate Blue · Black · Peacock Green

HEX

#122329

RGB

rgb(18, 35, 41)

HSL

hsl(196, 39%, 12%)

HSB

hsb(196, 56%, 16%)

CMYK

cmyk(56%, 15%, 0%, 84%)

Oklch

oklch(24.4% 0.025 222.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#213E40

Slate Blue · DarkSlateGray · Peacock Green

HEX

#213E40

RGB

rgb(33, 62, 64)

HSL

hsl(184, 32%, 19%)

HSB

hsb(184, 48%, 25%)

CMYK

cmyk(48%, 3%, 0%, 75%)

Oklch

oklch(34.2% 0.035 201.4)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#6E604B

Ochre · DimGray · Amber Brown

HEX

#6E604B

RGB

rgb(110, 96, 75)

HSL

hsl(36, 19%, 36%)

HSB

hsb(36, 32%, 43%)

CMYK

cmyk(0%, 13%, 32%, 57%)

Oklch

oklch(49.7% 0.037 77.8)

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

#473C2E

Ochre · DarkSlateGray · Cinnamon

HEX

#473C2E

RGB

rgb(71, 60, 46)

HSL

hsl(34, 21%, 23%)

HSB

hsb(34, 35%, 28%)

CMYK

cmyk(0%, 15%, 35%, 72%)

Oklch

oklch(36.4% 0.028 73.5)

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

#331F0F

Tangerine · Black · Cinnamon

HEX

#331F0F

RGB

rgb(51, 31, 15)

HSL

hsl(27, 55%, 13%)

HSB

hsb(27, 71%, 20%)

CMYK

cmyk(0%, 39%, 71%, 80%)

Oklch

oklch(26.1% 0.041 58.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

122329

2B1913

Analogous

132B25

122329

13182B

Triadic

122329

2B1324

242B13

Split-Comp.

122329

2B1318

2B2513

Tetradic

122329

25132B

2B1913

182B13

Contrast Matrix WCAG 2.1 Contrast

122329	213E40	6E604B	473C2E	331F0F
—	1.4 Fail	2.6 Fail	1.5 Fail	1.0 Fail
1.4 Fail	—	1.9 Fail	1.1 Fail	1.4 Fail
2.6 Fail	1.9 Fail	—	1.8 Fail	2.6 Fail
1.5 Fail	1.1 Fail	1.8 Fail	—	1.5 Fail
1.0 Fail	1.4 Fail	2.6 Fail	1.5 Fail	—

White BG

16.2AAA

11.5AAA

6.1AA

10.7AAA

15.6AAA

Black BG

1.3Fail

1.8Fail

3.4AA Large

2.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

191A28

2E2E40

686850

424231

2A2A13

Deuteranopia

181727

2C2A3F

696A51

434432

2C2D14

Tritanopia

132626

223F3F

6D5455

463435

321617

Achromatopsia

1F1F1F

363636

626262

3E3E3E

232323

Shades & Tints Shades & Tints

#122329

Dark

Light

#213E40

Dark

Light

#6E604B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #122329;
  --color-2: #213e40;
  --color-3: #6e604b;
  --color-4: #473c2e;
  --color-5: #331f0f;
}

SCSS

$color-1: #122329;
$color-2: #213e40;
$color-3: #6e604b;
$color-4: #473c2e;
$color-5: #331f0f;

TAILWIND

colors: {
  'brand-1': '#122329',
  'brand-2': '#213e40',
  'brand-3': '#6e604b',
  'brand-4': '#473c2e',
  'brand-5': '#331f0f',
}

RGB Array

[18, 35, 41], [33, 62, 64], [110, 96, 75], [71, 60, 46], [51, 31, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #122329, #213E40, #6E604B, #473C2E, #331F0F 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: #122329; --color-2: #213e40; --color-3: #6e604b; --color-4: #473c2e; --color-5: #331f0f. 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