#2D1A1E + #12828D + #C3286A + #7D2E5B + #630D3A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D1A1E

Crimson · Black · Deep Berry

HEX

#2D1A1E

RGB

rgb(45, 26, 30)

HSL

hsl(347, 27%, 14%)

HSB

hsb(347, 42%, 18%)

CMYK

cmyk(0%, 42%, 33%, 82%)

Oklch

oklch(24.4% 0.031 5.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#12828D

Lake Blue · Teal · Mint Ice

HEX

#12828D

RGB

rgb(18, 130, 141)

HSL

hsl(185, 77%, 31%)

HSB

hsb(185, 87%, 55%)

CMYK

cmyk(87%, 8%, 0%, 45%)

Oklch

oklch(55.5% 0.091 205.7)

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

#C3286A

Dark Violet · MediumVioletRed · Camellia

HEX

#C3286A

RGB

rgb(195, 40, 106)

HSL

hsl(334, 66%, 46%)

HSB

hsb(334, 79%, 76%)

CMYK

cmyk(0%, 79%, 46%, 24%)

Oklch

oklch(54.7% 0.195 0.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#7D2E5B

Rose Purple · Purple · Camellia

HEX

#7D2E5B

RGB

rgb(125, 46, 91)

HSL

hsl(326, 46%, 34%)

HSB

hsb(326, 63%, 49%)

CMYK

cmyk(0%, 63%, 27%, 51%)

Oklch

oklch(42.9% 0.121 348.2)

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

#630D3A

Rose Purple · Maroon · Raspberry

HEX

#630D3A

RGB

rgb(99, 13, 58)

HSL

hsl(329, 77%, 22%)

HSB

hsb(329, 87%, 39%)

CMYK

cmyk(0%, 87%, 41%, 61%)

Oklch

oklch(33.5% 0.124 354.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D1A1E

1A2D29

Analogous

2D1A28

2D1A1E

2D201A

Triadic

2D1A1E

1E2D1A

1A1E2D

Split-Comp.

2D1A1E

1A2D20

1A282D

Tetradic

2D1A1E

282D1A

1A2D29

201A2D

Contrast Matrix WCAG 2.1 Contrast

2D1A1E	12828D	C3286A	7D2E5B	630D3A
—	3.6 AA Large	3.0 Fail	1.9 Fail	1.3 Fail
3.6 AA Large	—	1.2 Fail	1.9 Fail	2.8 Fail
3.0 Fail	1.2 Fail	—	1.6 Fail	2.3 Fail
1.9 Fail	1.9 Fail	1.6 Fail	—	1.5 Fail
1.3 Fail	2.8 Fail	2.3 Fail	1.5 Fail	—

White BG

16.4AAA

4.6AA

5.5AA

8.7AAA

12.7AAA

Black BG

1.3Fail

4.6AA

3.8AA Large

2.4Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

25251D

42448A

807E5A

5B5A50

3E3D2F

Deuteranopia

26271D

3C348A

899556

5F654E

43492C

Tritanopia

2C1C1C

188888

BB4D4B

794846

5F2725

Achromatopsia

202020

626262

5E5E5E

4B4B4B

2C2C2C

Shades & Tints Shades & Tints

#2D1A1E

Dark

Light

#12828D

Dark

Light

#C3286A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d1a1e;
  --color-2: #12828d;
  --color-3: #c3286a;
  --color-4: #7d2e5b;
  --color-5: #630d3a;
}

SCSS

$color-1: #2d1a1e;
$color-2: #12828d;
$color-3: #c3286a;
$color-4: #7d2e5b;
$color-5: #630d3a;

TAILWIND

colors: {
  'brand-1': '#2d1a1e',
  'brand-2': '#12828d',
  'brand-3': '#c3286a',
  'brand-4': '#7d2e5b',
  'brand-5': '#630d3a',
}

RGB Array

[45, 26, 30], [18, 130, 141], [195, 40, 106], [125, 46, 91], [99, 13, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D1A1E, #12828D, #C3286A, #7D2E5B, #630D3A 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: #2d1a1e; --color-2: #12828d; --color-3: #c3286a; --color-4: #7d2e5b; --color-5: #630d3a. 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