← Back to Editor

#2D7563 · #CF5C23 · #D9BA4C · #2F403C · #232625

A 5-color palette 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

#2D7563

Mineral Blue · SeaGreen · Mint Ice

HEX
#2D7563
RGB
rgb(45, 117, 99)
HSL
hsl(165, 44%, 32%)
HSB
hsb(165, 62%, 46%)
CMYK
cmyk(62%, 0%, 15%, 54%)
Oklch
oklch(51.2% 0.077 173.9)

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

#CF5C23

Tangerine · Chocolate · Amber Brown

HEX
#CF5C23
RGB
rgb(207, 92, 35)
HSL
hsl(20, 71%, 47%)
HSB
hsb(20, 83%, 81%)
CMYK
cmyk(0%, 56%, 83%, 19%)
Oklch
oklch(61.1% 0.160 43.5)

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

#D9BA4C

Ginger · SandyBrown · Sunflower

HEX
#D9BA4C
RGB
rgb(217, 186, 76)
HSL
hsl(47, 65%, 57%)
HSB
hsb(47, 65%, 85%)
CMYK
cmyk(0%, 14%, 65%, 15%)
Oklch
oklch(79.5% 0.132 93.4)

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

#2F403C

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2F403C
RGB
rgb(47, 64, 60)
HSL
hsl(166, 15%, 22%)
HSB
hsb(166, 27%, 25%)
CMYK
cmyk(27%, 0%, 6%, 75%)
Oklch
oklch(35.5% 0.023 178.9)

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

#232625

Ink Black · DarkSlateGray · Dark Stone

HEX
#232625
RGB
rgb(35, 38, 37)
HSL
hsl(160, 4%, 14%)
HSB
hsb(160, 8%, 15%)
CMYK
cmyk(8%, 0%, 3%, 85%)
Oklch
oklch(26.5% 0.005 174.1)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D7563
762E40

Analogous

2E7640
2D7563
2E6476

Triadic

2D7563
642E76
76642E

Split-Comp.

2D7563
762E64
76402E

Tetradic

2D7563
402E76
762E40
64762E

Contrast Matrix WCAG 2.1 Contrast

2D7563
CF5C23
D9BA4C
2F403C
232625
—
1.4
Fail
2.9
Fail
2.0
Fail
2.8
Fail
1.4
Fail
—
2.1
Fail
2.7
Fail
3.8
AA Large
2.9
Fail
2.1
Fail
—
5.8
AA
8.1
AAA
2.0
Fail
2.7
Fail
5.8
AA
—
1.4
Fail
2.8
Fail
3.8
AA Large
8.1
AAA
1.4
Fail
—
White BG
5.5AA
4.0AA Large
1.9Fail
10.9AAA
15.3AAA
Black BG
3.8AA Large
5.2AA
11.1AAA
1.9Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4D67
9D9C31
CCCB67
36373D
242425

Deuteranopia

484368
A4AC34
CDD06D
35343D
242425

Tritanopia

316B6C
C93C3E
D77C80
303E3E
232525

Achromatopsia

5D5D5D
787878
B7B7B7
3A3A3A
252525

Shades & Tints Shades & Tints

#2D7563

Dark
Light

#CF5C23

Dark
Light

#D9BA4C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d7563;
  --color-2: #cf5c23;
  --color-3: #d9ba4c;
  --color-4: #2f403c;
  --color-5: #232625;
}

SCSS

$color-1: #2d7563;
$color-2: #cf5c23;
$color-3: #d9ba4c;
$color-4: #2f403c;
$color-5: #232625;

TAILWIND

colors: {
  'brand-1': '#2d7563',
  'brand-2': '#cf5c23',
  'brand-3': '#d9ba4c',
  'brand-4': '#2f403c',
  'brand-5': '#232625',
}

RGB Array

[45, 117, 99], [207, 92, 35], [217, 186, 76], [47, 64, 60], [35, 38, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D7563, #CF5C23, #D9BA4C, #2F403C, #232625 is ideal for: tech websites, dark mode UIs, game UIs, 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: #2d7563; --color-2: #cf5c23; --color-3: #d9ba4c; --color-4: #2f403c; --color-5: #232625. 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. 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 general-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