← Back to Editor

#342D3F · #E7619C · #EF936A · #F6B63A · #D1CFDC

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

#342D3F

Deep Indigo · DarkSlateGray · Eggplant

HEX
#342D3F
RGB
rgb(52, 45, 63)
HSL
hsl(263, 17%, 21%)
HSB
hsb(263, 29%, 25%)
CMYK
cmyk(17%, 29%, 0%, 75%)
Oklch
oklch(31.2% 0.033 302.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#E7619C

Rouge · LightCoral · Rose Pink

HEX
#E7619C
RGB
rgb(231, 97, 156)
HSL
hsl(334, 74%, 64%)
HSB
hsb(334, 58%, 91%)
CMYK
cmyk(0%, 58%, 32%, 9%)
Oklch
oklch(67.7% 0.176 355.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#EF936A

Apricot · DarkSalmon · Warm Sun

HEX
#EF936A
RGB
rgb(239, 147, 106)
HSL
hsl(18, 81%, 68%)
HSB
hsb(18, 56%, 94%)
CMYK
cmyk(0%, 38%, 56%, 6%)
Oklch
oklch(75.0% 0.125 44.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F6B63A

Ginger · GoldenRod · Sunflower

HEX
#F6B63A
RGB
rgb(246, 182, 58)
HSL
hsl(40, 91%, 60%)
HSB
hsb(40, 76%, 96%)
CMYK
cmyk(0%, 26%, 76%, 4%)
Oklch
oklch(81.6% 0.151 79.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D1CFDC

Wisteria · LightGray · Sky Blue

HEX
#D1CFDC
RGB
rgb(209, 207, 220)
HSL
hsl(249, 16%, 84%)
HSB
hsb(249, 6%, 86%)
CMYK
cmyk(5%, 6%, 0%, 14%)
Oklch
oklch(86.0% 0.018 293.1)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

342D3F
383F2C

Analogous

2C2F3F
342D3F
3D2C3F

Triadic

342D3F
3F332C
2C3F33

Split-Comp.

342D3F
3F3D2C
2F3F2C

Tetradic

342D3F
3F2C2F
383F2C
2C3F3D

Contrast Matrix WCAG 2.1 Contrast

342D3F
E7619C
EF936A
F6B63A
D1CFDC
—
4.1
AA Large
5.7
AA
7.3
AAA
8.6
AAA
4.1
AA Large
—
1.4
Fail
1.8
Fail
2.1
Fail
5.7
AA
1.4
Fail
—
1.3
Fail
1.5
Fail
7.3
AAA
1.8
Fail
1.3
Fail
—
1.2
Fail
8.6
AAA
2.1
Fail
1.5
Fail
1.2
Fail
—
White BG
13.2AAA
3.2AA Large
2.3Fail
1.8Fail
1.5Fail
Black BG
1.6Fail
6.6AA
9.1AAA
11.7AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31313B
ADAC8E
C7C674
DADA58
D0D0D9

Deuteranopia

31323A
B5BF8A
CDD376
DEE35F
D0D0D8

Tritanopia

343736
E08280
EA7C7D
F37075
D1D6D6

Achromatopsia

313131
909090
AAAAAA
BBBBBB
D1D1D1

Shades & Tints Shades & Tints

#342D3F

Dark
Light

#E7619C

Dark
Light

#EF936A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #342d3f;
  --color-2: #e7619c;
  --color-3: #ef936a;
  --color-4: #f6b63a;
  --color-5: #d1cfdc;
}

SCSS

$color-1: #342d3f;
$color-2: #e7619c;
$color-3: #ef936a;
$color-4: #f6b63a;
$color-5: #d1cfdc;

TAILWIND

colors: {
  'brand-1': '#342d3f',
  'brand-2': '#e7619c',
  'brand-3': '#ef936a',
  'brand-4': '#f6b63a',
  'brand-5': '#d1cfdc',
}

RGB Array

[52, 45, 63], [231, 97, 156], [239, 147, 106], [246, 182, 58], [209, 207, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #342D3F, #E7619C, #EF936A, #F6B63A, #D1CFDC 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: #342d3f; --color-2: #e7619c; --color-3: #ef936a; --color-4: #f6b63a; --color-5: #d1cfdc. 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