#533F0C + #4A3F16 + #433F1E + #3C3F26 + #353F2C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#533F0C

Ochre · DarkOliveGreen · Amber Gold

HEX

#533F0C

RGB

rgb(83, 63, 12)

HSL

hsl(43, 75%, 19%)

HSB

hsb(43, 86%, 33%)

CMYK

cmyk(0%, 24%, 86%, 67%)

Oklch

oklch(38.0% 0.071 85.8)

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

#4A3F16

Ochre · DarkOliveGreen · Amber Gold

HEX

#4A3F16

RGB

rgb(74, 63, 22)

HSL

hsl(47, 54%, 19%)

HSB

hsb(47, 70%, 29%)

CMYK

cmyk(0%, 15%, 70%, 71%)

Oklch

oklch(37.0% 0.060 94.2)

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

#433F1E

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#433F1E

RGB

rgb(67, 63, 30)

HSL

hsl(54, 38%, 19%)

HSB

hsb(54, 55%, 26%)

CMYK

cmyk(0%, 6%, 55%, 74%)

Oklch

oklch(36.3% 0.050 102.4)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#3C3F26

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#3C3F26

RGB

rgb(60, 63, 38)

HSL

hsl(67, 25%, 20%)

HSB

hsb(67, 40%, 25%)

CMYK

cmyk(5%, 0%, 40%, 75%)

Oklch

oklch(35.8% 0.040 114.0)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#353F2C

Celadon · DarkSlateGray · Forest Green

HEX

#353F2C

RGB

rgb(53, 63, 44)

HSL

hsl(92, 18%, 21%)

HSB

hsb(92, 30%, 25%)

CMYK

cmyk(16%, 0%, 30%, 75%)

Oklch

oklch(35.3% 0.034 130.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

533F0C

0C2155

Analogous

551C0C

533F0C

45550C

Triadic

533F0C

0C5540

400C55

Split-Comp.

533F0C

0C4555

1C0C55

Tetradic

533F0C

0C551C

0C2155

550C45

Contrast Matrix WCAG 2.1 Contrast

533F0C	4A3F16	433F1E	3C3F26	353F2C
—	1.0 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

10.1AAA

10.4AAA

10.7AAA

10.9AAA

11.1AAA

Black BG

2.1Fail

2.0Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A18

454520

414126

3D3D2C

393931

Deuteranopia

4C4D1B

464722

424228

3D3D2E

393832

Tritanopia

522224

492829

432C2E

3C3132

353435

Achromatopsia

3F3F3F

3E3E3E

3C3C3C

3B3B3B

3A3A3A

Shades & Tints Shades & Tints

#533F0C

Dark

Light

#4A3F16

Dark

Light

#433F1E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #533f0c;
  --color-2: #4a3f16;
  --color-3: #433f1e;
  --color-4: #3c3f26;
  --color-5: #353f2c;
}

SCSS

$color-1: #533f0c;
$color-2: #4a3f16;
$color-3: #433f1e;
$color-4: #3c3f26;
$color-5: #353f2c;

TAILWIND

colors: {
  'brand-1': '#533f0c',
  'brand-2': '#4a3f16',
  'brand-3': '#433f1e',
  'brand-4': '#3c3f26',
  'brand-5': '#353f2c',
}

RGB Array

[83, 63, 12], [74, 63, 22], [67, 63, 30], [60, 63, 38], [53, 63, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #533F0C, #4A3F16, #433F1E, #3C3F26, #353F2C 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: #533f0c; --color-2: #4a3f16; --color-3: #433f1e; --color-4: #3c3f26; --color-5: #353f2c. 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 nature-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