← Back to Editor

#3F4334 · #8AAB97 · #FBFEC5 · #C00301 · #841A0D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3F4334

Grass Green · DarkSlateGray · Forest Green

HEX
#3F4334
RGB
rgb(63, 67, 52)
HSL
hsl(76, 13%, 23%)
HSB
hsb(76, 22%, 26%)
CMYK
cmyk(6%, 0%, 22%, 74%)
Oklch
oklch(37.4% 0.025 119.8)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#8AAB97

Celadon · DarkSeaGreen · Apple Green

HEX
#8AAB97
RGB
rgb(138, 171, 151)
HSL
hsl(144, 16%, 61%)
HSB
hsb(144, 19%, 67%)
CMYK
cmyk(19%, 0%, 12%, 33%)
Oklch
oklch(71.1% 0.046 158.4)

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

#FBFEC5

Fresh Green · Beige · Lemon Cream

HEX
#FBFEC5
RGB
rgb(251, 254, 197)
HSL
hsl(63, 97%, 88%)
HSB
hsb(63, 22%, 100%)
CMYK
cmyk(1%, 0%, 22%, 0%)
Oklch
oklch(98.1% 0.073 110.2)

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

#C00301

Vermilion · FireBrick · Wine Red

HEX
#C00301
RGB
rgb(192, 3, 1)
HSL
hsl(1, 99%, 38%)
HSB
hsb(1, 99%, 75%)
CMYK
cmyk(0%, 98%, 99%, 25%)
Oklch
oklch(50.8% 0.207 29.3)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#841A0D

Vermilion · Maroon · Wine Red

HEX
#841A0D
RGB
rgb(132, 26, 13)
HSL
hsl(7, 82%, 28%)
HSB
hsb(7, 90%, 52%)
CMYK
cmyk(0%, 80%, 90%, 48%)
Oklch
oklch(40.1% 0.143 30.8)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F4334
373342

Analogous

423F33
3F4334
374233

Triadic

3F4334
333E42
42333E

Split-Comp.

3F4334
333742
3F3342

Tetradic

3F4334
33423F
373342
423337

Contrast Matrix WCAG 2.1 Contrast

3F4334
8AAB97
FBFEC5
C00301
841A0D
—
4.0
AA Large
9.7
AAA
1.6
Fail
1.0
Fail
4.0
AA Large
—
2.4
Fail
2.6
Fail
3.9
AA Large
9.7
AAA
2.4
Fail
—
6.2
AA
9.4
AAA
1.6
Fail
2.6
Fail
6.2
AA
—
1.5
Fail
1.0
Fail
3.9
AA Large
9.4
AAA
1.5
Fail
—
White BG
10.2AAA
2.5Fail
1.0Fail
6.5AA
9.8AAA
Black BG
2.1Fail
8.4AAA
20.1AAA
3.3AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

414138
98999C
FCFCD3
6E6C01
565510

Deuteranopia

414039
96949D
FCFCD6
798702
5C6411

Tritanopia

3F3A3B
8CA0A1
FBDEE0
B70202
7F1313

Achromatopsia

404040
9F9F9F
F7F7F7
3B3B3B
383838

Shades & Tints Shades & Tints

#3F4334

Dark
Light

#8AAB97

Dark
Light

#FBFEC5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f4334;
  --color-2: #8aab97;
  --color-3: #fbfec5;
  --color-4: #c00301;
  --color-5: #841a0d;
}

SCSS

$color-1: #3f4334;
$color-2: #8aab97;
$color-3: #fbfec5;
$color-4: #c00301;
$color-5: #841a0d;

TAILWIND

colors: {
  'brand-1': '#3f4334',
  'brand-2': '#8aab97',
  'brand-3': '#fbfec5',
  'brand-4': '#c00301',
  'brand-5': '#841a0d',
}

RGB Array

[63, 67, 52], [138, 171, 151], [251, 254, 197], [192, 3, 1], [132, 26, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F4334, #8AAB97, #FBFEC5, #C00301, #841A0D 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: #3f4334; --color-2: #8aab97; --color-3: #fbfec5; --color-4: #c00301; --color-5: #841a0d. 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