← Back to Editor

#120F0F · #3B3939 · #82746F · #BA8670 · #F2A36B

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

#120F0F

Crimson · Black · Jet Black

HEX
#120F0F
RGB
rgb(18, 15, 15)
HSL
hsl(0, 9%, 6%)
HSB
hsb(0, 17%, 7%)
CMYK
cmyk(0%, 17%, 17%, 93%)
Oklch
oklch(17.2% 0.005 17.7)

Traditional「Crimson」· Paint「Jet Black」· Creative Midnight Shadow

#3B3939

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3B3939
RGB
rgb(59, 57, 57)
HSL
hsl(0, 2%, 23%)
HSB
hsb(0, 3%, 23%)
CMYK
cmyk(0%, 3%, 3%, 77%)
Oklch
oklch(34.7% 0.003 17.3)

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

#82746F

Tangerine · Gray · Warm Gray

HEX
#82746F
RGB
rgb(130, 116, 111)
HSL
hsl(16, 8%, 47%)
HSB
hsb(16, 15%, 51%)
CMYK
cmyk(0%, 11%, 15%, 49%)
Oklch
oklch(57.0% 0.019 40.7)

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

#BA8670

Tangerine · DarkSalmon · Warm Sun

HEX
#BA8670
RGB
rgb(186, 134, 112)
HSL
hsl(18, 35%, 58%)
HSB
hsb(18, 40%, 73%)
CMYK
cmyk(0%, 28%, 40%, 27%)
Oklch
oklch(66.6% 0.072 43.9)

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

#F2A36B

Apricot · SandyBrown · Warm Sun

HEX
#F2A36B
RGB
rgb(242, 163, 107)
HSL
hsl(25, 84%, 68%)
HSB
hsb(25, 56%, 95%)
CMYK
cmyk(0%, 33%, 56%, 5%)
Oklch
oklch(78.1% 0.118 55.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

120F0F
0E1111

Analogous

110E0F
120F0F
110F0E

Triadic

120F0F
0E110E
0E0E11

Split-Comp.

120F0F
0E110F
0E0F11

Tetradic

120F0F
0F110E
0E1111
0F0E11

Contrast Matrix WCAG 2.1 Contrast

120F0F
3B3939
82746F
BA8670
F2A36B
—
1.7
Fail
4.2
AA Large
6.1
AA
9.3
AAA
1.7
Fail
—
2.6
Fail
3.7
AA Large
5.6
AA
4.2
AA Large
2.6
Fail
—
1.4
Fail
2.2
Fail
6.1
AA
3.7
AA Large
1.4
Fail
—
1.5
Fail
9.3
AAA
5.6
AA
2.2
Fail
1.5
Fail
—
White BG
19.1AAA
11.5AAA
4.5AA Large
3.1AA Large
2.1Fail
Black BG
1.1Fail
1.8Fail
4.7AA
6.7AA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

11110F
3A3A39
7C7C70
A3A375
D0CF79

Deuteranopia

11110F
3A3A39
7D7E70
A7AA77
D4DA7C

Tritanopia

120F0F
3B3939
817171
B77A7A
EE8386

Achromatopsia

101010
3A3A3A
787878
939393
B4B4B4

Shades & Tints Shades & Tints

#120F0F

Dark
Light

#3B3939

Dark
Light

#82746F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #120f0f;
  --color-2: #3b3939;
  --color-3: #82746f;
  --color-4: #ba8670;
  --color-5: #f2a36b;
}

SCSS

$color-1: #120f0f;
$color-2: #3b3939;
$color-3: #82746f;
$color-4: #ba8670;
$color-5: #f2a36b;

TAILWIND

colors: {
  'brand-1': '#120f0f',
  'brand-2': '#3b3939',
  'brand-3': '#82746f',
  'brand-4': '#ba8670',
  'brand-5': '#f2a36b',
}

RGB Array

[18, 15, 15], [59, 57, 57], [130, 116, 111], [186, 134, 112], [242, 163, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #120F0F, #3B3939, #82746F, #BA8670, #F2A36B is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #120f0f; --color-2: #3b3939; --color-3: #82746f; --color-4: #ba8670; --color-5: #f2a36b. 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. Restrained colors convey professionalism and trust. 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