#2D1F3B + #2B4158 + #2F706C + #629454 + #F7C630 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D1F3B

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2D1F3B

RGB

rgb(45, 31, 59)

HSL

hsl(270, 31%, 18%)

HSB

hsb(270, 47%, 23%)

CMYK

cmyk(24%, 47%, 0%, 77%)

Oklch

oklch(27.0% 0.054 306.2)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#2B4158

Indigo · DarkSlateGray · Prussian Blue

HEX

#2B4158

RGB

rgb(43, 65, 88)

HSL

hsl(211, 34%, 26%)

HSB

hsb(211, 51%, 35%)

CMYK

cmyk(51%, 26%, 0%, 65%)

Oklch

oklch(36.8% 0.049 250.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#2F706C

Mineral Blue · SeaGreen · Mint Ice

HEX

#2F706C

RGB

rgb(47, 112, 108)

HSL

hsl(176, 41%, 31%)

HSB

hsb(176, 58%, 44%)

CMYK

cmyk(58%, 0%, 4%, 56%)

Oklch

oklch(50.2% 0.066 189.8)

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

#629454

Celadon · DimGray · Olive Green

HEX

#629454

RGB

rgb(98, 148, 84)

HSL

hsl(107, 28%, 45%)

HSB

hsb(107, 43%, 58%)

CMYK

cmyk(34%, 0%, 43%, 42%)

Oklch

oklch(61.5% 0.107 139.0)

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

#F7C630

Ginger · GoldenRod · Sunflower

HEX

#F7C630

RGB

rgb(247, 198, 48)

HSL

hsl(45, 93%, 58%)

HSB

hsb(45, 81%, 97%)

CMYK

cmyk(0%, 20%, 81%, 3%)

Oklch

oklch(84.7% 0.161 89.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D1F3B

2E3C20

Analogous

20203C

2D1F3B

3C203C

Triadic

2D1F3B

3C2E20

203C2E

Split-Comp.

2D1F3B

3C3C20

203C20

Tetradic

2D1F3B

3C2020

2E3C20

203C3C

Contrast Matrix WCAG 2.1 Contrast

2D1F3B	2B4158	2F706C	629454	F7C630
—	1.5 Fail	2.7 Fail	4.3 AA Large	9.5 AAA
1.5 Fail	—	1.8 Fail	2.9 Fail	6.5 AA
2.7 Fail	1.8 Fail	—	1.6 Fail	3.6 AA Large
4.3 AA Large	2.9 Fail	1.6 Fail	—	2.2 Fail
9.5 AAA	6.5 AA	3.6 AA Large	2.2 Fail	—

White BG

15.3AAA

10.5AAA

5.7AA

3.6AA Large

1.6Fail

Black BG

1.4Fail

2.0Fail

3.7AA Large

5.9AA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272734

353552

4B4C6D

787863

E2E154

Deuteranopia

282933

333251

47436D

757167

E5E85D

Tritanopia

2C2F2E

2C4E4D

326E6E

657072

F57177

Achromatopsia

262626

3D3D3D

5C5C5C

7E7E7E

C4C4C4

Shades & Tints Shades & Tints

#2D1F3B

Dark

Light

#2B4158

Dark

Light

#2F706C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d1f3b;
  --color-2: #2b4158;
  --color-3: #2f706c;
  --color-4: #629454;
  --color-5: #f7c630;
}

SCSS

$color-1: #2d1f3b;
$color-2: #2b4158;
$color-3: #2f706c;
$color-4: #629454;
$color-5: #f7c630;

TAILWIND

colors: {
  'brand-1': '#2d1f3b',
  'brand-2': '#2b4158',
  'brand-3': '#2f706c',
  'brand-4': '#629454',
  'brand-5': '#f7c630',
}

RGB Array

[45, 31, 59], [43, 65, 88], [47, 112, 108], [98, 148, 84], [247, 198, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D1F3B, #2B4158, #2F706C, #629454, #F7C630 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: #2d1f3b; --color-2: #2b4158; --color-3: #2f706c; --color-4: #629454; --color-5: #f7c630. 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 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