← Back to Editor

#D67438 · #302C26 · #BF4C13 · #8C6950 · #87A19B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D67438

Tangerine · Chocolate · Warm Sun

HEX
#D67438
RGB
rgb(214, 116, 56)
HSL
hsl(23, 66%, 53%)
HSB
hsb(23, 74%, 84%)
CMYK
cmyk(0%, 46%, 74%, 16%)
Oklch
oklch(66.0% 0.143 49.4)

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

#302C26

Ochre · DarkSlateGray · Cinnamon

HEX
#302C26
RGB
rgb(48, 44, 38)
HSL
hsl(36, 12%, 17%)
HSB
hsb(36, 21%, 19%)
CMYK
cmyk(0%, 8%, 21%, 81%)
Oklch
oklch(29.5% 0.012 78.1)

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

#BF4C13

Tangerine · Chocolate · Amber Brown

HEX
#BF4C13
RGB
rgb(191, 76, 19)
HSL
hsl(20, 82%, 41%)
HSB
hsb(20, 90%, 75%)
CMYK
cmyk(0%, 60%, 90%, 25%)
Oklch
oklch(56.3% 0.161 42.0)

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

#8C6950

Tangerine · DimGray · Amber Brown

HEX
#8C6950
RGB
rgb(140, 105, 80)
HSL
hsl(25, 27%, 43%)
HSB
hsb(25, 43%, 55%)
CMYK
cmyk(0%, 25%, 43%, 45%)
Oklch
oklch(55.0% 0.058 56.7)

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

#87A19B

Mineral Blue · LightSlateGray · Lake Green

HEX
#87A19B
RGB
rgb(135, 161, 155)
HSL
hsl(166, 12%, 58%)
HSB
hsb(166, 16%, 63%)
CMYK
cmyk(16%, 0%, 4%, 37%)
Oklch
oklch(68.7% 0.030 179.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D67438
389AD6

Analogous

D6384B
D67438
D6C438

Triadic

D67438
38D675
7538D6

Split-Comp.

D67438
38D6C4
384BD6

Tetradic

D67438
4BD638
389AD6
C438D6

Contrast Matrix WCAG 2.1 Contrast

D67438
302C26
BF4C13
8C6950
87A19B
—
4.2
AA Large
1.5
Fail
1.5
Fail
1.2
Fail
4.2
AA Large
—
2.8
Fail
2.8
Fail
5.0
AA
1.5
Fail
2.8
Fail
—
1.0
Fail
1.8
Fail
1.5
Fail
2.8
Fail
1.0
Fail
—
1.8
Fail
1.2
Fail
5.0
AA
1.8
Fail
1.8
Fail
—
White BG
3.3AA Large
13.9AAA
4.9AA
4.9AA
2.8Fail
Black BG
6.4AA
1.5Fail
4.3AA Large
4.3AA Large
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAB47
2E2E27
8D8C21
7D7D56
92929C

Deuteranopia

B1B94A
2F2F28
949D24
7F8258
918F9D

Tritanopia

D15255
302929
B92C2E
8A5B5C
889E9E

Achromatopsia

8A8A8A
2D2D2D
686868
717171
999999

Shades & Tints Shades & Tints

#D67438

Dark
Light

#302C26

Dark
Light

#BF4C13

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d67438;
  --color-2: #302c26;
  --color-3: #bf4c13;
  --color-4: #8c6950;
  --color-5: #87a19b;
}

SCSS

$color-1: #d67438;
$color-2: #302c26;
$color-3: #bf4c13;
$color-4: #8c6950;
$color-5: #87a19b;

TAILWIND

colors: {
  'brand-1': '#d67438',
  'brand-2': '#302c26',
  'brand-3': '#bf4c13',
  'brand-4': '#8c6950',
  'brand-5': '#87a19b',
}

RGB Array

[214, 116, 56], [48, 44, 38], [191, 76, 19], [140, 105, 80], [135, 161, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D67438, #302C26, #BF4C13, #8C6950, #87A19B 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: #d67438; --color-2: #302c26; --color-3: #bf4c13; --color-4: #8c6950; --color-5: #87a19b. 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