← Back to Editor

#2A1E1A · #482C20 · #673928 · #A0AB9B · #F7F1D9

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

#2A1E1A

Tangerine · Black · Cinnamon

HEX
#2A1E1A
RGB
rgb(42, 30, 26)
HSL
hsl(15, 24%, 13%)
HSB
hsb(15, 38%, 16%)
CMYK
cmyk(0%, 29%, 38%, 84%)
Oklch
oklch(24.8% 0.020 39.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#482C20

Tangerine · DarkSlateGray · Cinnamon

HEX
#482C20
RGB
rgb(72, 44, 32)
HSL
hsl(18, 38%, 20%)
HSB
hsb(18, 56%, 28%)
CMYK
cmyk(0%, 39%, 56%, 72%)
Oklch
oklch(32.4% 0.046 43.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#673928

Tangerine · DarkOliveGreen · Amber Brown

HEX
#673928
RGB
rgb(103, 57, 40)
HSL
hsl(16, 44%, 28%)
HSB
hsb(16, 61%, 40%)
CMYK
cmyk(0%, 45%, 61%, 60%)
Oklch
oklch(39.8% 0.071 40.8)

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

#A0AB9B

Celadon · DarkGray · Silver Sand

HEX
#A0AB9B
RGB
rgb(160, 171, 155)
HSL
hsl(101, 9%, 64%)
HSB
hsb(101, 9%, 67%)
CMYK
cmyk(6%, 0%, 9%, 33%)
Oklch
oklch(72.8% 0.026 135.7)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#F7F1D9

Goose Yellow · Beige · Lemon Cream

HEX
#F7F1D9
RGB
rgb(247, 241, 217)
HSL
hsl(48, 65%, 91%)
HSB
hsb(48, 12%, 97%)
CMYK
cmyk(0%, 2%, 12%, 3%)
Oklch
oklch(95.7% 0.032 95.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A1E1A
192529

Analogous

29191D
2A1E1A
292519

Triadic

2A1E1A
19291D
1D1929

Split-Comp.

2A1E1A
192925
191D29

Tetradic

2A1E1A
1D2919
192529
251929

Contrast Matrix WCAG 2.1 Contrast

2A1E1A
482C20
673928
A0AB9B
F7F1D9
—
1.3
Fail
1.7
Fail
6.8
AA
14.3
AAA
1.3
Fail
—
1.3
Fail
5.3
AA
11.2
AAA
1.7
Fail
1.3
Fail
—
4.0
AA Large
8.5
AAA
6.8
AA
5.3
AA
4.0
AA Large
—
2.1
Fail
14.3
AAA
11.2
AAA
8.5
AAA
2.1
Fail
—
White BG
16.2AAA
12.7AAA
9.6AAA
2.4Fail
1.1Fail
Black BG
1.3Fail
1.7Fail
2.2Fail
8.8AAA
18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

25251B
3C3C23
53532C
A5A59F
F4F4DF

Deuteranopia

26261B
3E4024
56592D
A4A3A0
F5F5E0

Tritanopia

291C1C
472526
652F30
A1A2A3
F7E3E4

Achromatopsia

212121
333333
454545
A6A6A6
F0F0F0

Shades & Tints Shades & Tints

#2A1E1A

Dark
Light

#482C20

Dark
Light

#673928

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a1e1a;
  --color-2: #482c20;
  --color-3: #673928;
  --color-4: #a0ab9b;
  --color-5: #f7f1d9;
}

SCSS

$color-1: #2a1e1a;
$color-2: #482c20;
$color-3: #673928;
$color-4: #a0ab9b;
$color-5: #f7f1d9;

TAILWIND

colors: {
  'brand-1': '#2a1e1a',
  'brand-2': '#482c20',
  'brand-3': '#673928',
  'brand-4': '#a0ab9b',
  'brand-5': '#f7f1d9',
}

RGB Array

[42, 30, 26], [72, 44, 32], [103, 57, 40], [160, 171, 155], [247, 241, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A1E1A, #482C20, #673928, #A0AB9B, #F7F1D9 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: #2a1e1a; --color-2: #482c20; --color-3: #673928; --color-4: #a0ab9b; --color-5: #f7f1d9. 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