← Back to Editor

#3E7067 · #36322F · #F94A57 · #EBCE8A · #F3E3C1

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

#3E7067

Mineral Blue · SeaGreen · Mint Ice

HEX
#3E7067
RGB
rgb(62, 112, 103)
HSL
hsl(169, 29%, 34%)
HSB
hsb(169, 45%, 44%)
CMYK
cmyk(45%, 0%, 8%, 56%)
Oklch
oklch(50.7% 0.056 181.0)

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

#36322F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#36322F
RGB
rgb(54, 50, 47)
HSL
hsl(26, 7%, 20%)
HSB
hsb(26, 13%, 21%)
CMYK
cmyk(0%, 7%, 13%, 79%)
Oklch
oklch(32.0% 0.008 59.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#F94A57

Peach Pink · Tomato · Coral Red

HEX
#F94A57
RGB
rgb(249, 74, 87)
HSL
hsl(356, 94%, 63%)
HSB
hsb(356, 70%, 98%)
CMYK
cmyk(0%, 70%, 65%, 2%)
Oklch
oklch(66.2% 0.210 21.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EBCE8A

Goose Yellow · Khaki · Sunflower

HEX
#EBCE8A
RGB
rgb(235, 206, 138)
HSL
hsl(42, 71%, 73%)
HSB
hsb(42, 41%, 92%)
CMYK
cmyk(0%, 12%, 41%, 8%)
Oklch
oklch(86.1% 0.092 87.4)

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

#F3E3C1

Goose Yellow · Bisque · Lemon Cream

HEX
#F3E3C1
RGB
rgb(243, 227, 193)
HSL
hsl(41, 68%, 85%)
HSB
hsb(41, 21%, 95%)
CMYK
cmyk(0%, 7%, 21%, 5%)
Oklch
oklch(92.0% 0.048 85.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E7067
703E47

Analogous

3E704D
3E7067
3E6070

Triadic

3E7067
673E70
70673E

Split-Comp.

3E7067
703E60
704D3E

Tetradic

3E7067
4D3E70
703E47
60703E

Contrast Matrix WCAG 2.1 Contrast

3E7067
36322F
F94A57
EBCE8A
F3E3C1
—
2.2
Fail
1.7
Fail
3.7
AA Large
4.5
AA Large
2.2
Fail
—
3.7
AA Large
8.3
AAA
10.0
AAA
1.7
Fail
3.7
AA Large
—
2.2
Fail
2.7
Fail
3.7
AA Large
8.3
AAA
2.2
Fail
—
1.2
Fail
4.5
AA Large
10.0
AAA
2.7
Fail
1.2
Fail
—
White BG
5.6AA
12.7AAA
3.4AA Large
1.5Fail
1.3Fail
Black BG
3.7AA Large
1.7Fail
6.1AA
13.7AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545469
343430
ADAC54
DEDE9A
ECECC9

Deuteranopia

514D6A
353530
B7C453
E0E29E
EDEECB

Tritanopia

416B6B
363030
F05151
EAA7AA
F2D0D1

Achromatopsia

606060
333333
808080
CFCFCF
E4E4E4

Shades & Tints Shades & Tints

#3E7067

Dark
Light

#36322F

Dark
Light

#F94A57

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e7067;
  --color-2: #36322f;
  --color-3: #f94a57;
  --color-4: #ebce8a;
  --color-5: #f3e3c1;
}

SCSS

$color-1: #3e7067;
$color-2: #36322f;
$color-3: #f94a57;
$color-4: #ebce8a;
$color-5: #f3e3c1;

TAILWIND

colors: {
  'brand-1': '#3e7067',
  'brand-2': '#36322f',
  'brand-3': '#f94a57',
  'brand-4': '#ebce8a',
  'brand-5': '#f3e3c1',
}

RGB Array

[62, 112, 103], [54, 50, 47], [249, 74, 87], [235, 206, 138], [243, 227, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E7067, #36322F, #F94A57, #EBCE8A, #F3E3C1 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: #3e7067; --color-2: #36322f; --color-3: #f94a57; --color-4: #ebce8a; --color-5: #f3e3c1. 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