← Back to Editor

#312849 · #40A6A7 · #7BC8AC · #F2E7AB · #F05448

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#312849

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#312849
RGB
rgb(49, 40, 73)
HSL
hsl(256, 29%, 22%)
HSB
hsb(256, 45%, 29%)
CMYK
cmyk(33%, 45%, 0%, 71%)
Oklch
oklch(30.3% 0.059 295.2)

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

#40A6A7

Slate Blue · CadetBlue · Mint Ice

HEX
#40A6A7
RGB
rgb(64, 166, 167)
HSL
hsl(181, 45%, 45%)
HSB
hsb(181, 62%, 65%)
CMYK
cmyk(62%, 1%, 0%, 35%)
Oklch
oklch(66.7% 0.093 196.1)

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

#7BC8AC

Jade · MediumAquaMarine · Apple Green

HEX
#7BC8AC
RGB
rgb(123, 200, 172)
HSL
hsl(158, 41%, 63%)
HSB
hsb(158, 39%, 78%)
CMYK
cmyk(38%, 0%, 14%, 22%)
Oklch
oklch(77.5% 0.087 168.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#F2E7AB

Fresh Green · Wheat · Lemon Cream

HEX
#F2E7AB
RGB
rgb(242, 231, 171)
HSL
hsl(51, 73%, 81%)
HSB
hsb(51, 29%, 95%)
CMYK
cmyk(0%, 5%, 29%, 5%)
Oklch
oklch(92.3% 0.078 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F05448

Peach Pink · Tomato · Coral Red

HEX
#F05448
RGB
rgb(240, 84, 72)
HSL
hsl(4, 85%, 61%)
HSB
hsb(4, 70%, 94%)
CMYK
cmyk(0%, 65%, 70%, 6%)
Oklch
oklch(65.5% 0.194 28.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312849
404828

Analogous

282F48
312849
412848

Triadic

312849
483128
284831

Split-Comp.

312849
484128
2F4828

Tetradic

312849
48282F
404828
284841

Contrast Matrix WCAG 2.1 Contrast

312849
40A6A7
7BC8AC
F2E7AB
F05448
—
4.7
AA
7.0
AA
11.0
AAA
4.0
AA Large
4.7
AA
—
1.5
Fail
2.3
Fail
1.2
Fail
7.0
AA
1.5
Fail
—
1.6
Fail
1.8
Fail
11.0
AAA
2.3
Fail
1.6
Fail
—
2.8
Fail
4.0
AA Large
1.2
Fail
1.8
Fail
2.8
Fail
—
White BG
13.7AAA
2.9Fail
2.0Fail
1.3Fail
3.5AA Large
Black BG
1.5Fail
7.2AAA
10.7AAA
16.8AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D41
6C6DA7
9C9DB3
EDEDBA
ACAB4B

Deuteranopia

2E2E3F
665FA7
9892B4
EEEFBD
B6C14C

Tritanopia

313B39
45A7A7
7FB8B9
F1C5C8
E84D4E

Achromatopsia

2E2E2E
888888
AEAEAE
E3E3E3
818181

Shades & Tints Shades & Tints

#312849

Dark
Light

#40A6A7

Dark
Light

#7BC8AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312849;
  --color-2: #40a6a7;
  --color-3: #7bc8ac;
  --color-4: #f2e7ab;
  --color-5: #f05448;
}

SCSS

$color-1: #312849;
$color-2: #40a6a7;
$color-3: #7bc8ac;
$color-4: #f2e7ab;
$color-5: #f05448;

TAILWIND

colors: {
  'brand-1': '#312849',
  'brand-2': '#40a6a7',
  'brand-3': '#7bc8ac',
  'brand-4': '#f2e7ab',
  'brand-5': '#f05448',
}

RGB Array

[49, 40, 73], [64, 166, 167], [123, 200, 172], [242, 231, 171], [240, 84, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #312849, #40A6A7, #7BC8AC, #F2E7AB, #F05448 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #312849; --color-2: #40a6a7; --color-3: #7bc8ac; --color-4: #f2e7ab; --color-5: #f05448. 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 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