#212D50 + #174C56 + #1D5F53 + #C1C371 + #FF0073 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#212D50

Indigo · DarkSlateGray · Prussian Blue

HEX

#212D50

RGB

rgb(33, 45, 80)

HSL

hsl(225, 42%, 22%)

HSB

hsb(225, 59%, 31%)

CMYK

cmyk(59%, 44%, 0%, 69%)

Oklch

oklch(30.5% 0.065 268.1)

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

#174C56

Lake Blue · DarkSlateGray · Peacock Green

HEX

#174C56

RGB

rgb(23, 76, 86)

HSL

hsl(190, 58%, 21%)

HSB

hsb(190, 73%, 34%)

CMYK

cmyk(73%, 12%, 0%, 66%)

Oklch

oklch(38.7% 0.057 212.6)

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

#1D5F53

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#1D5F53

RGB

rgb(29, 95, 83)

HSL

hsl(169, 53%, 24%)

HSB

hsb(169, 69%, 37%)

CMYK

cmyk(69%, 0%, 13%, 63%)

Oklch

oklch(44.1% 0.069 178.5)

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

#C1C371

Autumn Sage · Tan · Sunflower

HEX

#C1C371

RGB

rgb(193, 195, 113)

HSL

hsl(61, 41%, 60%)

HSB

hsb(61, 42%, 76%)

CMYK

cmyk(1%, 0%, 42%, 24%)

Oklch

oklch(79.7% 0.105 109.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF0073

Dark Violet · DeepPink · Camellia

HEX

#FF0073

RGB

rgb(255, 0, 115)

HSL

hsl(333, 100%, 50%)

HSB

hsb(333, 100%, 100%)

CMYK

cmyk(0%, 100%, 55%, 0%)

Oklch

oklch(64.2% 0.257 6.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

212D50

504421

Analogous

214450

212D50

2C2150

Triadic

212D50

50212C

2C5021

Split-Comp.

212D50

502C21

445021

Tetradic

212D50

502144

504421

21502C

Contrast Matrix WCAG 2.1 Contrast

212D50	174C56	1D5F53	C1C371	FF0073
—	1.4 Fail	1.8 Fail	7.3 AAA	3.5 AA Large
1.4 Fail	—	1.3 Fail	5.1 AA	2.5 Fail
1.8 Fail	1.3 Fail	—	4.0 AA Large	2.0 Fail
7.3 AAA	5.1 AA	4.0 AA Large	—	2.1 Fail
3.5 AA Large	2.5 Fail	2.0 Fail	2.1 Fail	—

White BG

13.5AAA

9.5AAA

7.5AAA

1.9Fail

3.8AA Large

Black BG

1.6Fail

2.2Fail

2.8Fail

11.3AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262648

2E2E54

3A3A56

C2C285

918E57

Deuteranopia

262546

2B2753

363157

C2C28A

9FB351

Tritanopia

22413F

1A5251

205859

C19598

F2413C

Achromatopsia

2D2D2D

3D3D3D

4A4A4A

B9B9B9

595959

Shades & Tints Shades & Tints

#212D50

Dark

Light

#174C56

Dark

Light

#1D5F53

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #212d50;
  --color-2: #174c56;
  --color-3: #1d5f53;
  --color-4: #c1c371;
  --color-5: #ff0073;
}

SCSS

$color-1: #212d50;
$color-2: #174c56;
$color-3: #1d5f53;
$color-4: #c1c371;
$color-5: #ff0073;

TAILWIND

colors: {
  'brand-1': '#212d50',
  'brand-2': '#174c56',
  'brand-3': '#1d5f53',
  'brand-4': '#c1c371',
  'brand-5': '#ff0073',
}

RGB Array

[33, 45, 80], [23, 76, 86], [29, 95, 83], [193, 195, 113], [255, 0, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #212D50, #174C56, #1D5F53, #C1C371, #FF0073 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: #212d50; --color-2: #174c56; --color-3: #1d5f53; --color-4: #c1c371; --color-5: #ff0073. 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