← Back to Editor

#2D7A6E · #24151D · #544957 · #746B68 · #948D6E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#2D7A6E

Mineral Blue · SeaGreen · Mint Ice

HEX
#2D7A6E
RGB
rgb(45, 122, 110)
HSL
hsl(171, 46%, 33%)
HSB
hsb(171, 63%, 48%)
CMYK
cmyk(63%, 0%, 10%, 52%)
Oklch
oklch(52.9% 0.077 181.2)

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

#24151D

Rose Purple · Black · Raspberry

HEX
#24151D
RGB
rgb(36, 21, 29)
HSL
hsl(328, 26%, 11%)
HSB
hsb(328, 42%, 14%)
CMYK
cmyk(0%, 42%, 19%, 86%)
Oklch
oklch(21.9% 0.028 346.4)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#544957

Dark Plum · DarkSlateGray · Charcoal

HEX
#544957
RGB
rgb(84, 73, 87)
HSL
hsl(287, 9%, 31%)
HSB
hsb(287, 16%, 34%)
CMYK
cmyk(3%, 16%, 0%, 66%)
Oklch
oklch(42.2% 0.027 319.0)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#746B68

Ink Gray · DimGray · Warm Gray

HEX
#746B68
RGB
rgb(116, 107, 104)
HSL
hsl(15, 5%, 43%)
HSB
hsb(15, 10%, 45%)
CMYK
cmyk(0%, 8%, 10%, 55%)
Oklch
oklch(53.5% 0.012 39.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#948D6E

Ginger · Gray · Sunflower

HEX
#948D6E
RGB
rgb(148, 141, 110)
HSL
hsl(49, 15%, 51%)
HSB
hsb(49, 26%, 58%)
CMYK
cmyk(0%, 5%, 26%, 42%)
Oklch
oklch(64.1% 0.045 96.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D7A6E
7B2D39

Analogous

2D7B49
2D7A6E
2D607B

Triadic

2D7A6E
6F2D7B
7B6F2D

Split-Comp.

2D7A6E
7B2D60
7B492D

Tetradic

2D7A6E
492D7B
7B2D39
607B2D

Contrast Matrix WCAG 2.1 Contrast

2D7A6E
24151D
544957
746B68
948D6E
—
3.4
AA Large
1.7
Fail
1.0
Fail
1.5
Fail
3.4
AA Large
—
2.1
Fail
3.4
AA Large
5.2
AA
1.7
Fail
2.1
Fail
—
1.6
Fail
2.6
Fail
1.0
Fail
3.4
AA Large
1.6
Fail
—
1.6
Fail
1.5
Fail
5.2
AA
2.6
Fail
1.6
Fail
—
White BG
5.1AA
17.5AAA
8.5AAA
5.2AA
3.3AA Large
Black BG
4.1AA Large
1.2Fail
2.5Fail
4.0AA Large
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4F71
1E1D1B
4F4F54
707069
919176

Deuteranopia

4A4472
1E201B
505153
717169
919277

Tritanopia

317374
231A19
535150
746969
947B7D

Achromatopsia

626262
1A1A1A
4E4E4E
6D6D6D
8C8C8C

Shades & Tints Shades & Tints

#2D7A6E

Dark
Light

#24151D

Dark
Light

#544957

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d7a6e;
  --color-2: #24151d;
  --color-3: #544957;
  --color-4: #746b68;
  --color-5: #948d6e;
}

SCSS

$color-1: #2d7a6e;
$color-2: #24151d;
$color-3: #544957;
$color-4: #746b68;
$color-5: #948d6e;

TAILWIND

colors: {
  'brand-1': '#2d7a6e',
  'brand-2': '#24151d',
  'brand-3': '#544957',
  'brand-4': '#746b68',
  'brand-5': '#948d6e',
}

RGB Array

[45, 122, 110], [36, 21, 29], [84, 73, 87], [116, 107, 104], [148, 141, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D7A6E, #24151D, #544957, #746B68, #948D6E is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2d7a6e; --color-2: #24151d; --color-3: #544957; --color-4: #746b68; --color-5: #948d6e. 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 general-style 5-color scheme is especially suited for finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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