#1370AD + #369699 + #36B38B + #AFCCA8 + #D43D2C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1370AD

Lake Blue · Teal · Prussian Blue

HEX

#1370AD

RGB

rgb(19, 112, 173)

HSL

hsl(204, 80%, 38%)

HSB

hsb(204, 89%, 68%)

CMYK

cmyk(89%, 35%, 0%, 32%)

Oklch

oklch(52.6% 0.125 244.7)

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

#369699

Slate Blue · SteelBlue · Mint Ice

HEX

#369699

RGB

rgb(54, 150, 153)

HSL

hsl(182, 48%, 41%)

HSB

hsb(182, 65%, 60%)

CMYK

cmyk(65%, 2%, 0%, 40%)

Oklch

oklch(61.9% 0.088 198.1)

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

#36B38B

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#36B38B

RGB

rgb(54, 179, 139)

HSL

hsl(161, 54%, 46%)

HSB

hsb(161, 70%, 70%)

CMYK

cmyk(70%, 0%, 22%, 30%)

Oklch

oklch(68.9% 0.124 167.3)

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

#AFCCA8

Celadon · Silver · Apple Green

HEX

#AFCCA8

RGB

rgb(175, 204, 168)

HSL

hsl(108, 26%, 73%)

HSB

hsb(108, 18%, 80%)

CMYK

cmyk(14%, 0%, 18%, 20%)

Oklch

oklch(81.4% 0.059 139.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D43D2C

Vermilion · FireBrick · Passion Red

HEX

#D43D2C

RGB

rgb(212, 61, 44)

HSL

hsl(6, 66%, 50%)

HSB

hsb(6, 79%, 83%)

CMYK

cmyk(0%, 71%, 79%, 17%)

Oklch

oklch(58.2% 0.191 30.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1370AD

AE5113

Analogous

13AE9F

1370AD

1323AE

Triadic

1370AD

AE1370

70AE13

Split-Comp.

1370AD

AE1323

AE9F13

Tetradic

1370AD

9F13AE

AE5113

23AE13

Contrast Matrix WCAG 2.1 Contrast

1370AD	369699	36B38B	AFCCA8	D43D2C
—	1.5 Fail	2.0 Fail	3.0 AA Large	1.1 Fail
1.5 Fail	—	1.3 Fail	2.0 Fail	1.3 Fail
2.0 Fail	1.3 Fail	—	1.5 Fail	1.8 Fail
3.0 AA Large	2.0 Fail	1.5 Fail	—	2.7 Fail
1.1 Fail	1.3 Fail	1.8 Fail	2.7 Fail	—

White BG

5.3AA

3.5AA Large

2.6Fail

1.7Fail

4.7AA

Black BG

3.9AA Large

6.0AA

8.0AAA

12.0AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3C9E

606098

6C6D95

BCBCB1

939130

Deuteranopia

362F9B

5A5398

655C97

BAB8B3

9BA731

Tritanopia

189390

3B9898

3C9C9E

B0B8B9

CC3334

Achromatopsia

5B5B5B

7A7A7A

898989

BFBFBF

686868

Shades & Tints Shades & Tints

#1370AD

Dark

Light

#369699

Dark

Light

#36B38B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1370ad;
  --color-2: #369699;
  --color-3: #36b38b;
  --color-4: #afcca8;
  --color-5: #d43d2c;
}

SCSS

$color-1: #1370ad;
$color-2: #369699;
$color-3: #36b38b;
$color-4: #afcca8;
$color-5: #d43d2c;

TAILWIND

colors: {
  'brand-1': '#1370ad',
  'brand-2': '#369699',
  'brand-3': '#36b38b',
  'brand-4': '#afcca8',
  'brand-5': '#d43d2c',
}

RGB Array

[19, 112, 173], [54, 150, 153], [54, 179, 139], [175, 204, 168], [212, 61, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1370AD, #369699, #36B38B, #AFCCA8, #D43D2C is ideal for: corporate websites, product showcases, portfolios. 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: #1370ad; --color-2: #369699; --color-3: #36b38b; --color-4: #afcca8; --color-5: #d43d2c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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