← Back to Editor

#D18732 · #D67729 · #D6691C · #241F1D · #292421

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 Library

Color Details Color Details

#D18732

Ginger · Chocolate · Warm Sun

HEX
#D18732
RGB
rgb(209, 135, 50)
HSL
hsl(32, 63%, 51%)
HSB
hsb(32, 76%, 82%)
CMYK
cmyk(0%, 35%, 76%, 18%)
Oklch
oklch(68.6% 0.133 65.4)

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

#D67729

Tangerine · Chocolate · Amber Brown

HEX
#D67729
RGB
rgb(214, 119, 41)
HSL
hsl(27, 68%, 50%)
HSB
hsb(27, 81%, 84%)
CMYK
cmyk(0%, 44%, 81%, 16%)
Oklch
oklch(66.3% 0.147 55.0)

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

#D6691C

Tangerine · Chocolate · Amber Brown

HEX
#D6691C
RGB
rgb(214, 105, 28)
HSL
hsl(25, 77%, 47%)
HSB
hsb(25, 87%, 84%)
CMYK
cmyk(0%, 51%, 87%, 16%)
Oklch
oklch(64.0% 0.159 49.6)

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

#241F1D

Tangerine · Black · Cinnamon

HEX
#241F1D
RGB
rgb(36, 31, 29)
HSL
hsl(17, 11%, 13%)
HSB
hsb(17, 19%, 14%)
CMYK
cmyk(0%, 14%, 19%, 86%)
Oklch
oklch(24.4% 0.009 43.1)

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

#292421

Tangerine · DarkSlateGray · Cinnamon

HEX
#292421
RGB
rgb(41, 36, 33)
HSL
hsl(22, 11%, 15%)
HSB
hsb(22, 20%, 16%)
CMYK
cmyk(0%, 12%, 20%, 84%)
Oklch
oklch(26.5% 0.009 53.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D18732
337DD1

Analogous

D13933
D18732
CCD133

Triadic

D18732
33D187
8733D1

Split-Comp.

D18732
33CCD1
3933D1

Tetradic

D18732
33D139
337DD1
D133CC

Contrast Matrix WCAG 2.1 Contrast

D18732
D67729
D6691C
241F1D
292421
—
1.1
Fail
1.2
Fail
5.6
AA
5.3
AA
1.1
Fail
—
1.1
Fail
5.1
AA
4.8
AA
1.2
Fail
1.1
Fail
—
4.6
AA
4.3
AA Large
5.6
AA
5.1
AA
4.6
AA
—
1.1
Fail
5.3
AA
4.8
AA
4.3
AA Large
1.1
Fail
—
White BG
2.9Fail
3.2AA Large
3.6AA Large
16.3AAA
15.3AAA
Black BG
7.2AAA
6.5AA
5.9AA
1.3Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B047
ADAC3C
A7A62F
22221D
272722

Deuteranopia

B5BB4C
B2B940
ADB533
22231E
272822

Tritanopia

CD575A
D14B4E
D13D41
241E1E
292222

Achromatopsia

939393
8B8B8B
818181
202020
252525

Shades & Tints Shades & Tints

#D18732

Dark
Light

#D67729

Dark
Light

#D6691C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d18732;
  --color-2: #d67729;
  --color-3: #d6691c;
  --color-4: #241f1d;
  --color-5: #292421;
}

SCSS

$color-1: #d18732;
$color-2: #d67729;
$color-3: #d6691c;
$color-4: #241f1d;
$color-5: #292421;

TAILWIND

colors: {
  'brand-1': '#d18732',
  'brand-2': '#d67729',
  'brand-3': '#d6691c',
  'brand-4': '#241f1d',
  'brand-5': '#292421',
}

RGB Array

[209, 135, 50], [214, 119, 41], [214, 105, 28], [36, 31, 29], [41, 36, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D18732, #D67729, #D6691C, #241F1D, #292421 is ideal for: tech websites, dark mode UIs, game UIs. 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: #d18732; --color-2: #d67729; --color-3: #d6691c; --color-4: #241f1d; --color-5: #292421. 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. 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