← Back to Editor

#38220D · #783D15 · #9F4A21 · #9A754B · #AFA782

space

A 5-color space 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

#38220D

Tangerine · Black · Cinnamon

HEX
#38220D
RGB
rgb(56, 34, 13)
HSL
hsl(29, 62%, 14%)
HSB
hsb(29, 77%, 22%)
CMYK
cmyk(0%, 39%, 77%, 78%)
Oklch
oklch(27.5% 0.047 62.3)

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

#783D15

Tangerine · Sienna · Amber Brown

HEX
#783D15
RGB
rgb(120, 61, 21)
HSL
hsl(24, 70%, 28%)
HSB
hsb(24, 83%, 47%)
CMYK
cmyk(0%, 49%, 83%, 53%)
Oklch
oklch(42.8% 0.097 50.8)

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

#9F4A21

Tangerine · Sienna · Amber Brown

HEX
#9F4A21
RGB
rgb(159, 74, 33)
HSL
hsl(20, 66%, 38%)
HSB
hsb(20, 79%, 62%)
CMYK
cmyk(0%, 53%, 79%, 38%)
Oklch
oklch(51.1% 0.125 44.0)

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

#9A754B

Ochre · Sienna · Amber Brown

HEX
#9A754B
RGB
rgb(154, 117, 75)
HSL
hsl(32, 34%, 45%)
HSB
hsb(32, 51%, 60%)
CMYK
cmyk(0%, 24%, 51%, 40%)
Oklch
oklch(58.9% 0.074 69.1)

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

#AFA782

Ginger · Tan · Sunflower

HEX
#AFA782
RGB
rgb(175, 167, 130)
HSL
hsl(49, 22%, 60%)
HSB
hsb(49, 26%, 69%)
CMYK
cmyk(0%, 5%, 26%, 31%)
Oklch
oklch(72.6% 0.052 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38220D
0E243A

Analogous

3A0E0E
38220D
3A390E

Triadic

38220D
0E3A23
230E3A

Split-Comp.

38220D
0E3A39
0E0E3A

Tetradic

38220D
0E3A0E
0E243A
390E3A

Contrast Matrix WCAG 2.1 Contrast

38220D
783D15
9F4A21
9A754B
AFA782
—
1.8
Fail
2.5
Fail
3.6
AA Large
6.2
AA
1.8
Fail
—
1.4
Fail
2.0
Fail
3.5
AA Large
2.5
Fail
1.4
Fail
—
1.4
Fail
2.5
Fail
3.6
AA Large
2.0
Fail
1.4
Fail
—
1.7
Fail
6.2
AA
3.5
AA Large
2.5
Fail
1.7
Fail
—
White BG
15.0AAA
8.5AAA
6.0AA
4.2AA Large
2.4Fail
Black BG
1.4Fail
2.5Fail
3.5AA Large
5.0AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E12
5E5E1F
7A792B
8A8A55
ACAB8B

Deuteranopia

303113
626621
7F862D
8C8F58
ACAD8D

Tritanopia

371617
752628
9B3334
985D5F
AF9294

Achromatopsia

262626
4A4A4A
5F5F5F
7B7B7B
A5A5A5

Shades & Tints Shades & Tints

#38220D

Dark
Light

#783D15

Dark
Light

#9F4A21

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38220d;
  --color-2: #783d15;
  --color-3: #9f4a21;
  --color-4: #9a754b;
  --color-5: #afa782;
}

SCSS

$color-1: #38220d;
$color-2: #783d15;
$color-3: #9f4a21;
$color-4: #9a754b;
$color-5: #afa782;

TAILWIND

colors: {
  'brand-1': '#38220d',
  'brand-2': '#783d15',
  'brand-3': '#9f4a21',
  'brand-4': '#9a754b',
  'brand-5': '#afa782',
}

RGB Array

[56, 34, 13], [120, 61, 21], [159, 74, 33], [154, 117, 75], [175, 167, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #38220D, #783D15, #9F4A21, #9A754B, #AFA782 is ideal for: tech websites, dark mode UIs, game UIs, 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: #38220d; --color-2: #783d15; --color-3: #9f4a21; --color-4: #9a754b; --color-5: #afa782. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 space-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