#221D28 + #113341 + #259BB1 + #4BBFAC + #39B3A7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#221D28

Deep Indigo · Black · Dark Purple

HEX

#221D28

RGB

rgb(34, 29, 40)

HSL

hsl(267, 16%, 14%)

HSB

hsb(267, 28%, 16%)

CMYK

cmyk(15%, 27%, 0%, 84%)

Oklch

oklch(24.1% 0.022 305.5)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#113341

Lake Blue · DarkSlateGray · Peacock Green

HEX

#113341

RGB

rgb(17, 51, 65)

HSL

hsl(197, 59%, 16%)

HSB

hsb(197, 74%, 25%)

CMYK

cmyk(74%, 22%, 0%, 75%)

Oklch

oklch(30.3% 0.046 228.4)

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

#259BB1

Lake Blue · LightSeaGreen · Mint Ice

HEX

#259BB1

RGB

rgb(37, 155, 177)

HSL

hsl(189, 65%, 42%)

HSB

hsb(189, 79%, 69%)

CMYK

cmyk(79%, 12%, 0%, 31%)

Oklch

oklch(63.7% 0.103 213.7)

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

#4BBFAC

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#4BBFAC

RGB

rgb(75, 191, 172)

HSL

hsl(170, 48%, 52%)

HSB

hsb(170, 61%, 75%)

CMYK

cmyk(61%, 0%, 10%, 25%)

Oklch

oklch(73.4% 0.108 180.5)

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

#39B3A7

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#39B3A7

RGB

rgb(57, 179, 167)

HSL

hsl(174, 52%, 46%)

HSB

hsb(174, 68%, 70%)

CMYK

cmyk(68%, 0%, 7%, 30%)

Oklch

oklch(69.8% 0.107 185.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221D28

24291E

Analogous

1E1F29

221D28

291E29

Triadic

221D28

29231E

1E2923

Split-Comp.

221D28

29291E

1F291E

Tetradic

221D28

291E1F

24291E

1E2929

Contrast Matrix WCAG 2.1 Contrast

221D28	113341	259BB1	4BBFAC	39B3A7
—	1.2 Fail	5.0 AA	7.3 AAA	6.4 AA
1.2 Fail	—	4.1 AA Large	5.9 AA	5.2 AA
5.0 AA	4.1 AA Large	—	1.5 Fail	1.3 Fail
7.3 AAA	5.9 AA	1.5 Fail	—	1.1 Fail
6.4 AA	5.2 AA	1.3 Fail	1.1 Fail	—

White BG

16.5AAA

13.3AAA

3.3AA Large

2.2Fail

2.6Fail

Black BG

1.3Fail

1.6Fail

6.4AA

9.3AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202025

20203E

5859AC

7D7EB1

6E6FAA

Deuteranopia

202125

1E1B3D

5148AA

776EB2

675EAB

Tritanopia

222323

133B3A

2BA7A7

51B4B5

3FACAD

Achromatopsia

202020

2A2A2A

7A7A7A

9A9A9A

8D8D8D

Shades & Tints Shades & Tints

#221D28

Dark

Light

#113341

Dark

Light

#259BB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221d28;
  --color-2: #113341;
  --color-3: #259bb1;
  --color-4: #4bbfac;
  --color-5: #39b3a7;
}

SCSS

$color-1: #221d28;
$color-2: #113341;
$color-3: #259bb1;
$color-4: #4bbfac;
$color-5: #39b3a7;

TAILWIND

colors: {
  'brand-1': '#221d28',
  'brand-2': '#113341',
  'brand-3': '#259bb1',
  'brand-4': '#4bbfac',
  'brand-5': '#39b3a7',
}

RGB Array

[34, 29, 40], [17, 51, 65], [37, 155, 177], [75, 191, 172], [57, 179, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221D28, #113341, #259BB1, #4BBFAC, #39B3A7 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: #221d28; --color-2: #113341; --color-3: #259bb1; --color-4: #4bbfac; --color-5: #39b3a7. 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