← Back to Editor

#373F52 · #159B9E · #CFE4BB · #FFF2B7 · #AF0D3C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#373F52

Indigo · DarkSlateGray · Prussian Blue

HEX
#373F52
RGB
rgb(55, 63, 82)
HSL
hsl(222, 20%, 27%)
HSB
hsb(222, 33%, 32%)
CMYK
cmyk(33%, 23%, 0%, 68%)
Oklch
oklch(36.8% 0.035 266.9)

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

#159B9E

Lake Blue · LightSeaGreen · Mint Ice

HEX
#159B9E
RGB
rgb(21, 155, 158)
HSL
hsl(181, 77%, 35%)
HSB
hsb(181, 87%, 62%)
CMYK
cmyk(87%, 2%, 0%, 38%)
Oklch
oklch(62.7% 0.103 197.3)

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

#CFE4BB

Celadon · LightGray · Mint Green

HEX
#CFE4BB
RGB
rgb(207, 228, 187)
HSL
hsl(91, 43%, 81%)
HSB
hsb(91, 18%, 89%)
CMYK
cmyk(9%, 0%, 18%, 11%)
Oklch
oklch(89.3% 0.059 129.7)

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

#FFF2B7

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF2B7
RGB
rgb(255, 242, 183)
HSL
hsl(49, 100%, 86%)
HSB
hsb(49, 28%, 100%)
CMYK
cmyk(0%, 5%, 28%, 0%)
Oklch
oklch(95.7% 0.076 97.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#AF0D3C

Dark Violet · FireBrick · Camellia

HEX
#AF0D3C
RGB
rgb(175, 13, 60)
HSL
hsl(343, 86%, 37%)
HSB
hsb(343, 93%, 69%)
CMYK
cmyk(0%, 93%, 66%, 31%)
Oklch
oklch(48.4% 0.187 14.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373F52
534A37

Analogous

374D53
373F52
3D3753

Triadic

373F52
53373F
3F5337

Split-Comp.

373F52
533D37
4D5337

Tetradic

373F52
53374D
534A37
37533D

Contrast Matrix WCAG 2.1 Contrast

373F52
159B9E
CFE4BB
FFF2B7
AF0D3C
—
3.1
AA Large
7.8
AAA
9.3
AAA
1.5
Fail
3.1
AA Large
—
2.5
Fail
3.0
Fail
2.1
Fail
7.8
AAA
2.5
Fail
—
1.2
Fail
5.3
AA
9.3
AAA
3.0
Fail
1.2
Fail
—
6.3
AA
1.5
Fail
2.1
Fail
5.3
AA
6.3
AA
—
White BG
10.5AAA
3.4AA Large
1.4Fail
1.1Fail
7.1AAA
Black BG
2.0Fail
6.2AA
15.5AAA
18.6AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3B4D
4F509D
D8D8C5
F9F9C5
696731

Deuteranopia

3A394C
473D9D
D7D5C7
FAFBC9
727E2E

Tritanopia

374A49
1C9D9D
D0CDCE
FED1D3
A72826

Achromatopsia

3F3F3F
737373
D9D9D9
EFEFEF
434343

Shades & Tints Shades & Tints

#373F52

Dark
Light

#159B9E

Dark
Light

#CFE4BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373f52;
  --color-2: #159b9e;
  --color-3: #cfe4bb;
  --color-4: #fff2b7;
  --color-5: #af0d3c;
}

SCSS

$color-1: #373f52;
$color-2: #159b9e;
$color-3: #cfe4bb;
$color-4: #fff2b7;
$color-5: #af0d3c;

TAILWIND

colors: {
  'brand-1': '#373f52',
  'brand-2': '#159b9e',
  'brand-3': '#cfe4bb',
  'brand-4': '#fff2b7',
  'brand-5': '#af0d3c',
}

RGB Array

[55, 63, 82], [21, 155, 158], [207, 228, 187], [255, 242, 183], [175, 13, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #373F52, #159B9E, #CFE4BB, #FFF2B7, #AF0D3C is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #373f52; --color-2: #159b9e; --color-3: #cfe4bb; --color-4: #fff2b7; --color-5: #af0d3c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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