← Back to Editor

#18130D · #2B2117 · #B16F23 · #BD8D4F · #D4C2AC

cool

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

#18130D

Ochre · Black · Cinnamon

HEX
#18130D
RGB
rgb(24, 19, 13)
HSL
hsl(33, 30%, 7%)
HSB
hsb(33, 46%, 9%)
CMYK
cmyk(0%, 21%, 46%, 91%)
Oklch
oklch(19.1% 0.014 71.9)

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

#2B2117

Ochre · Black · Cinnamon

HEX
#2B2117
RGB
rgb(43, 33, 23)
HSL
hsl(30, 30%, 13%)
HSB
hsb(30, 47%, 17%)
CMYK
cmyk(0%, 23%, 47%, 83%)
Oklch
oklch(25.6% 0.023 66.5)

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

#B16F23

Ochre · Chocolate · Amber Brown

HEX
#B16F23
RGB
rgb(177, 111, 35)
HSL
hsl(32, 67%, 42%)
HSB
hsb(32, 80%, 69%)
CMYK
cmyk(0%, 37%, 80%, 31%)
Oklch
oklch(60.0% 0.121 64.7)

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

#BD8D4F

Ginger · GoldenRod · Warm Sun

HEX
#BD8D4F
RGB
rgb(189, 141, 79)
HSL
hsl(34, 45%, 53%)
HSB
hsb(34, 58%, 74%)
CMYK
cmyk(0%, 25%, 58%, 26%)
Oklch
oklch(67.7% 0.099 71.9)

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

#D4C2AC

Goose Yellow · Silver · Warm Sun

HEX
#D4C2AC
RGB
rgb(212, 194, 172)
HSL
hsl(33, 32%, 75%)
HSB
hsb(33, 19%, 83%)
CMYK
cmyk(0%, 8%, 19%, 17%)
Oklch
oklch(82.3% 0.036 72.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18130D
0C1117

Analogous

170D0C
18130D
17170C

Triadic

18130D
0C1712
120C17

Split-Comp.

18130D
0C1717
0D0C17

Tetradic

18130D
0C170D
0C1117
170C17

Contrast Matrix WCAG 2.1 Contrast

18130D
2B2117
B16F23
BD8D4F
D4C2AC
—
1.2
Fail
4.5
AA
6.2
AA
10.6
AAA
1.2
Fail
—
3.9
AA Large
5.3
AA
9.1
AAA
4.5
AA
3.9
AA Large
—
1.4
Fail
2.3
Fail
6.2
AA
5.3
AA
1.4
Fail
—
1.7
Fail
10.6
AAA
9.1
AAA
2.3
Fail
1.7
Fail
—
White BG
18.5AAA
15.8AAA
4.1AA Large
3.0Fail
1.7Fail
Black BG
1.1Fail
1.3Fail
5.2AA
7.1AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

16160E
272719
949435
A8A85E
CCCCB1

Deuteranopia

16160F
27281A
989D3A
ABAF62
CDCFB3

Tritanopia

181010
2B1B1C
AE4447
BB6A6C
D3B6B6

Achromatopsia

141414
232323
7A7A7A
949494
C5C5C5

Shades & Tints Shades & Tints

#18130D

Dark
Light

#2B2117

Dark
Light

#B16F23

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18130d;
  --color-2: #2b2117;
  --color-3: #b16f23;
  --color-4: #bd8d4f;
  --color-5: #d4c2ac;
}

SCSS

$color-1: #18130d;
$color-2: #2b2117;
$color-3: #b16f23;
$color-4: #bd8d4f;
$color-5: #d4c2ac;

TAILWIND

colors: {
  'brand-1': '#18130d',
  'brand-2': '#2b2117',
  'brand-3': '#b16f23',
  'brand-4': '#bd8d4f',
  'brand-5': '#d4c2ac',
}

RGB Array

[24, 19, 13], [43, 33, 23], [177, 111, 35], [189, 141, 79], [212, 194, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #18130D, #2B2117, #B16F23, #BD8D4F, #D4C2AC 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: #18130d; --color-2: #2b2117; --color-3: #b16f23; --color-4: #bd8d4f; --color-5: #d4c2ac. 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 cool-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