← Back to Editor

#3D2F06 · #F70046 · #7F8F82 · #9FB5A3 · #B8D9BE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3D2F06

Ochre · DarkOliveGreen · Amber Gold

HEX
#3D2F06
RGB
rgb(61, 47, 6)
HSL
hsl(45, 82%, 13%)
HSB
hsb(45, 90%, 24%)
CMYK
cmyk(0%, 23%, 90%, 76%)
Oklch
oklch(31.3% 0.059 88.8)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#F70046

Dark Violet · Crimson · Camellia

HEX
#F70046
RGB
rgb(247, 0, 70)
HSL
hsl(343, 100%, 48%)
HSB
hsb(343, 100%, 97%)
CMYK
cmyk(0%, 100%, 72%, 3%)
Oklch
oklch(61.8% 0.248 18.8)

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

#7F8F82

Ash · Gray · Warm Gray

HEX
#7F8F82
RGB
rgb(127, 143, 130)
HSL
hsl(131, 7%, 53%)
HSB
hsb(131, 11%, 56%)
CMYK
cmyk(11%, 0%, 9%, 44%)
Oklch
oklch(63.3% 0.027 150.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#9FB5A3

Celadon · DarkGray · Apple Green

HEX
#9FB5A3
RGB
rgb(159, 181, 163)
HSL
hsl(131, 13%, 67%)
HSB
hsb(131, 12%, 71%)
CMYK
cmyk(12%, 0%, 10%, 29%)
Oklch
oklch(75.1% 0.035 150.7)

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

#B8D9BE

Celadon · Silver · Apple Green

HEX
#B8D9BE
RGB
rgb(184, 217, 190)
HSL
hsl(131, 30%, 79%)
HSB
hsb(131, 15%, 85%)
CMYK
cmyk(15%, 0%, 12%, 15%)
Oklch
oklch(85.4% 0.051 150.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D2F06
06143C

Analogous

3C1406
3D2F06
2F3C06

Triadic

3D2F06
063C2F
2F063C

Split-Comp.

3D2F06
062F3C
14063C

Tetradic

3D2F06
063C14
06143C
3C062F

Contrast Matrix WCAG 2.1 Contrast

3D2F06
F70046
7F8F82
9FB5A3
B8D9BE
—
3.1
AA Large
3.8
AA Large
6.0
AA
8.5
AAA
3.1
AA Large
—
1.2
Fail
1.9
Fail
2.7
Fail
3.8
AA Large
1.2
Fail
—
1.6
Fail
2.2
Fail
6.0
AA
1.9
Fail
1.6
Fail
—
1.4
Fail
8.5
AAA
2.7
Fail
2.2
Fail
1.4
Fail
—
White BG
13.1AAA
4.2AA Large
3.4AA Large
2.2Fail
1.5Fail
Black BG
1.6Fail
5.0AA
6.2AA
9.6AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373710
8C8A35
868685
A9A9A7
C6C7C5

Deuteranopia

383912
9AAD31
858486
A7A6A8
C4C2C6

Tritanopia

3C1819
EB2825
808888
A0ABAC
BACACB

Achromatopsia

2F2F2F
525252
898989
ACACAC
CCCCCC

Shades & Tints Shades & Tints

#3D2F06

Dark
Light

#F70046

Dark
Light

#7F8F82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d2f06;
  --color-2: #f70046;
  --color-3: #7f8f82;
  --color-4: #9fb5a3;
  --color-5: #b8d9be;
}

SCSS

$color-1: #3d2f06;
$color-2: #f70046;
$color-3: #7f8f82;
$color-4: #9fb5a3;
$color-5: #b8d9be;

TAILWIND

colors: {
  'brand-1': '#3d2f06',
  'brand-2': '#f70046',
  'brand-3': '#7f8f82',
  'brand-4': '#9fb5a3',
  'brand-5': '#b8d9be',
}

RGB Array

[61, 47, 6], [247, 0, 70], [127, 143, 130], [159, 181, 163], [184, 217, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D2F06, #F70046, #7F8F82, #9FB5A3, #B8D9BE 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: #3d2f06; --color-2: #f70046; --color-3: #7f8f82; --color-4: #9fb5a3; --color-5: #b8d9be. 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