#3C3C49 + #7FA396 + #B1D27D + #F57B26 + #9E7662 · skin - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C3C49

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#3C3C49

RGB

rgb(60, 60, 73)

HSL

hsl(240, 10%, 26%)

HSB

hsb(240, 18%, 29%)

CMYK

cmyk(18%, 18%, 0%, 71%)

Oklch

oklch(36.1% 0.022 285.2)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#7FA396

Mineral Blue · LightSlateGray · Olive Green

HEX

#7FA396

RGB

rgb(127, 163, 150)

HSL

hsl(158, 16%, 57%)

HSB

hsb(158, 22%, 64%)

CMYK

cmyk(22%, 0%, 8%, 36%)

Oklch

oklch(68.5% 0.044 170.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B1D27D

Willow Green · DarkSeaGreen · Apple Green

HEX

#B1D27D

RGB

rgb(177, 210, 125)

HSL

hsl(83, 49%, 66%)

HSB

hsb(83, 40%, 82%)

CMYK

cmyk(16%, 0%, 40%, 18%)

Oklch

oklch(82.0% 0.117 126.2)

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

#F57B26

Tangerine · Chocolate · Warm Sun

HEX

#F57B26

RGB

rgb(245, 123, 38)

HSL

hsl(25, 91%, 55%)

HSB

hsb(25, 84%, 96%)

CMYK

cmyk(0%, 50%, 84%, 4%)

Oklch

oklch(71.2% 0.174 49.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#9E7662

Tangerine · Gray · Amber Brown

HEX

#9E7662

RGB

rgb(158, 118, 98)

HSL

hsl(20, 24%, 50%)

HSB

hsb(20, 38%, 62%)

CMYK

cmyk(0%, 25%, 38%, 38%)

Oklch

oklch(60.0% 0.059 47.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3C49

49493C

Analogous

3C4249

3C3C49

423C49

Triadic

3C3C49

493C3C

3C493C

Split-Comp.

3C3C49

49423C

42493C

Tetradic

3C3C49

493C42

49493C

3C4942

Contrast Matrix WCAG 2.1 Contrast

3C3C49	7FA396	B1D27D	F57B26	9E7662
—	3.9 AA Large	6.4 AA	4.0 AA Large	2.7 Fail
3.9 AA Large	—	1.6 Fail	1.0 Fail	1.5 Fail
6.4 AA	1.6 Fail	—	1.6 Fail	2.4 Fail
4.0 AA Large	1.0 Fail	1.6 Fail	—	1.5 Fail
2.7 Fail	1.5 Fail	2.4 Fail	1.5 Fail	—

White BG

10.9AAA

2.8Fail

1.7Fail

2.7Fail

4.0AA Large

Black BG

1.9Fail

7.6AAA

12.4AAA

7.7AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C46

8F8F99

BFC092

C0BF3B

8D8C67

Deuteranopia

3C3C45

8D8A9A

BDBB97

C7D040

8F9268

Tritanopia

3C4343

819C9C

B3A2A5

EF4B4E

9C6B6C

Achromatopsia

3D3D3D

979797

BEBEBE

969696

808080

Shades & Tints Shades & Tints

#3C3C49

Dark

Light

#7FA396

Dark

Light

#B1D27D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3c49;
  --color-2: #7fa396;
  --color-3: #b1d27d;
  --color-4: #f57b26;
  --color-5: #9e7662;
}

SCSS

$color-1: #3c3c49;
$color-2: #7fa396;
$color-3: #b1d27d;
$color-4: #f57b26;
$color-5: #9e7662;

TAILWIND

colors: {
  'brand-1': '#3c3c49',
  'brand-2': '#7fa396',
  'brand-3': '#b1d27d',
  'brand-4': '#f57b26',
  'brand-5': '#9e7662',
}

RGB Array

[60, 60, 73], [127, 163, 150], [177, 210, 125], [245, 123, 38], [158, 118, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #3C3C49, #7FA396, #B1D27D, #F57B26, #9E7662 is ideal for: corporate websites, product showcases, portfolios. 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: #3c3c49; --color-2: #7fa396; --color-3: #b1d27d; --color-4: #f57b26; --color-5: #9e7662. 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. 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 skin-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