#0F4535 + #786C37 + #695D29 + #594E1C + #453B0F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0F4535

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#0F4535

RGB

rgb(15, 69, 53)

HSL

hsl(162, 64%, 16%)

HSB

hsb(162, 78%, 27%)

CMYK

cmyk(78%, 0%, 23%, 73%)

Oklch

oklch(35.1% 0.062 168.9)

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

#786C37

Ochre · DarkOliveGreen · Honey Gold

HEX

#786C37

RGB

rgb(120, 108, 55)

HSL

hsl(49, 37%, 34%)

HSB

hsb(49, 54%, 47%)

CMYK

cmyk(0%, 10%, 54%, 53%)

Oklch

oklch(53.0% 0.074 96.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#695D29

Ochre · DarkOliveGreen · Honey Gold

HEX

#695D29

RGB

rgb(105, 93, 41)

HSL

hsl(49, 44%, 29%)

HSB

hsb(49, 61%, 41%)

CMYK

cmyk(0%, 11%, 61%, 59%)

Oklch

oklch(47.8% 0.073 96.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#594E1C

Ochre · DarkOliveGreen · Amber Gold

HEX

#594E1C

RGB

rgb(89, 78, 28)

HSL

hsl(49, 52%, 23%)

HSB

hsb(49, 69%, 35%)

CMYK

cmyk(0%, 12%, 69%, 65%)

Oklch

oklch(42.4% 0.070 96.9)

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

#453B0F

Ochre · DarkOliveGreen · Amber Gold

HEX

#453B0F

RGB

rgb(69, 59, 15)

HSL

hsl(49, 64%, 16%)

HSB

hsb(49, 78%, 27%)

CMYK

cmyk(0%, 14%, 78%, 73%)

Oklch

oklch(35.3% 0.062 96.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F4535

430F1E

Analogous

0F4319

0F4535

0F3843

Triadic

0F4535

330F43

43330F

Split-Comp.

0F4535

430F38

43190F

Tetradic

0F4535

190F43

430F1E

38430F

Contrast Matrix WCAG 2.1 Contrast

0F4535	786C37	695D29	594E1C	453B0F
—	2.1 Fail	1.7 Fail	1.3 Fail	1.0 Fail
2.1 Fail	—	1.3 Fail	1.6 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
1.3 Fail	1.6 Fail	1.3 Fail	—	1.3 Fail
1.0 Fail	2.1 Fail	1.7 Fail	1.3 Fail	—

White BG

10.9AAA

5.3AA

6.6AA

8.3AAA

11.1AAA

Black BG

1.9Fail

4.0AA Large

3.2AA Large

2.5Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

262739

737344

646436

545428

41411A

Deuteranopia

231F3A

747447

656539

55562B

41421C

Tritanopia

123C3D

774E50

684042

583234

452224

Achromatopsia

333333

6A6A6A

5B5B5B

4C4C4C

393939

Shades & Tints Shades & Tints

#0F4535

Dark

Light

#786C37

Dark

Light

#695D29

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f4535;
  --color-2: #786c37;
  --color-3: #695d29;
  --color-4: #594e1c;
  --color-5: #453b0f;
}

SCSS

$color-1: #0f4535;
$color-2: #786c37;
$color-3: #695d29;
$color-4: #594e1c;
$color-5: #453b0f;

TAILWIND

colors: {
  'brand-1': '#0f4535',
  'brand-2': '#786c37',
  'brand-3': '#695d29',
  'brand-4': '#594e1c',
  'brand-5': '#453b0f',
}

RGB Array

[15, 69, 53], [120, 108, 55], [105, 93, 41], [89, 78, 28], [69, 59, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F4535, #786C37, #695D29, #594E1C, #453B0F 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: #0f4535; --color-2: #786c37; --color-3: #695d29; --color-4: #594e1c; --color-5: #453b0f. 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