← Back to Editor

#38383B · #F6FFC7 · #E3F799 · #BFD48A · #C4143D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#38383B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#38383B
RGB
rgb(56, 56, 59)
HSL
hsl(240, 3%, 23%)
HSB
hsb(240, 5%, 23%)
CMYK
cmyk(5%, 5%, 0%, 77%)
Oklch
oklch(34.2% 0.005 286.1)

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

#F6FFC7

Willow Green · Beige · Mint Green

HEX
#F6FFC7
RGB
rgb(246, 255, 199)
HSL
hsl(70, 100%, 89%)
HSB
hsb(70, 22%, 100%)
CMYK
cmyk(4%, 0%, 22%, 0%)
Oklch
oklch(98.0% 0.073 115.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#E3F799

Willow Green · Khaki · Apple Green

HEX
#E3F799
RGB
rgb(227, 247, 153)
HSL
hsl(73, 85%, 78%)
HSB
hsb(73, 38%, 97%)
CMYK
cmyk(8%, 0%, 38%, 3%)
Oklch
oklch(94.0% 0.120 118.6)

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

#BFD48A

Willow Green · Tan · Apple Green

HEX
#BFD48A
RGB
rgb(191, 212, 138)
HSL
hsl(77, 46%, 69%)
HSB
hsb(77, 35%, 83%)
CMYK
cmyk(10%, 0%, 35%, 17%)
Oklch
oklch(83.7% 0.100 121.5)

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

#C4143D

Vermilion · Crimson · Passion Red

HEX
#C4143D
RGB
rgb(196, 20, 61)
HSL
hsl(346, 81%, 42%)
HSB
hsb(346, 90%, 77%)
CMYK
cmyk(0%, 90%, 69%, 23%)
Oklch
oklch(52.7% 0.202 17.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38383B
3C3C39

Analogous

393B3C
38383B
3B393C

Triadic

38383B
3C3939
393C39

Split-Comp.

38383B
3C3B39
3B3C39

Tetradic

38383B
3C393B
3C3C39
393C3B

Contrast Matrix WCAG 2.1 Contrast

38383B
F6FFC7
E3F799
BFD48A
C4143D
—
11.2
AAA
10.0
AAA
7.2
AAA
2.0
Fail
11.2
AAA
—
1.1
Fail
1.5
Fail
5.7
AA
10.0
AAA
1.1
Fail
—
1.4
Fail
5.1
AA
7.2
AAA
1.5
Fail
1.4
Fail
—
3.7
AA Large
2.0
Fail
5.7
AA
5.1
AA
3.7
AA Large
—
White BG
11.7AAA
1.0Fail
1.2Fail
1.6Fail
6.0AA
Black BG
1.8Fail
20.0AAA
18.0AAA
13.0AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

38383A
FAFAD5
ECECB0
C8C89C
787633

Deuteranopia

38383A
F9F9D8
EBE9B5
C7C5A0
828F31

Tritanopia

383A3A
F6DFE2
E4C2C6
C0AAAD
BB2B2A

Achromatopsia

383838
F6F6F6
E6E6E6
C5C5C5
4D4D4D

Shades & Tints Shades & Tints

#38383B

Dark
Light

#F6FFC7

Dark
Light

#E3F799

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38383b;
  --color-2: #f6ffc7;
  --color-3: #e3f799;
  --color-4: #bfd48a;
  --color-5: #c4143d;
}

SCSS

$color-1: #38383b;
$color-2: #f6ffc7;
$color-3: #e3f799;
$color-4: #bfd48a;
$color-5: #c4143d;

TAILWIND

colors: {
  'brand-1': '#38383b',
  'brand-2': '#f6ffc7',
  'brand-3': '#e3f799',
  'brand-4': '#bfd48a',
  'brand-5': '#c4143d',
}

RGB Array

[56, 56, 59], [246, 255, 199], [227, 247, 153], [191, 212, 138], [196, 20, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #38383B, #F6FFC7, #E3F799, #BFD48A, #C4143D 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: #38383b; --color-2: #f6ffc7; --color-3: #e3f799; --color-4: #bfd48a; --color-5: #c4143d. 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