#563C29 + #694C34 + #3E2B1D + #3D6C20 + #72B248 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#563C29

Tangerine · DarkOliveGreen · Cinnamon

HEX

#563C29

RGB

rgb(86, 60, 41)

HSL

hsl(25, 35%, 25%)

HSB

hsb(25, 52%, 34%)

CMYK

cmyk(0%, 30%, 52%, 66%)

Oklch

oklch(38.1% 0.048 56.9)

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

#694C34

Tangerine · DarkOliveGreen · Amber Brown

HEX

#694C34

RGB

rgb(105, 76, 52)

HSL

hsl(27, 34%, 31%)

HSB

hsb(27, 50%, 41%)

CMYK

cmyk(0%, 28%, 50%, 59%)

Oklch

oklch(44.2% 0.054 60.4)

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

#3E2B1D

Tangerine · DarkSlateGray · Cinnamon

HEX

#3E2B1D

RGB

rgb(62, 43, 29)

HSL

hsl(25, 36%, 18%)

HSB

hsb(25, 53%, 24%)

CMYK

cmyk(0%, 31%, 53%, 76%)

Oklch

oklch(30.8% 0.037 57.3)

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

#3D6C20

Pine Green · DarkOliveGreen · Forest Green

HEX

#3D6C20

RGB

rgb(61, 108, 32)

HSL

hsl(97, 54%, 27%)

HSB

hsb(97, 70%, 42%)

CMYK

cmyk(44%, 0%, 70%, 58%)

Oklch

oklch(48.1% 0.118 135.7)

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

#72B248

Celadon · MediumSeaGreen · Olive Green

HEX

#72B248

RGB

rgb(114, 178, 72)

HSL

hsl(96, 42%, 49%)

HSB

hsb(96, 60%, 70%)

CMYK

cmyk(36%, 0%, 60%, 30%)

Oklch

oklch(69.7% 0.154 134.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

563C29

294356

Analogous

56292D

563C29

565229

Triadic

563C29

29563C

3C2956

Split-Comp.

563C29

295652

292D56

Tetradic

563C29

2D5629

294356

522956

Contrast Matrix WCAG 2.1 Contrast

563C29	694C34	3E2B1D	3D6C20	72B248
—	1.3 Fail	1.3 Fail	1.6 Fail	3.9 AA Large
1.3 Fail	—	1.7 Fail	1.3 Fail	3.0 AA Large
1.3 Fail	1.7 Fail	—	2.1 Fail	5.2 AA
1.6 Fail	1.3 Fail	2.1 Fail	—	2.4 Fail
3.9 AA Large	3.0 AA Large	5.2 AA	2.4 Fail	—

White BG

10.1AAA

7.8AAA

13.4AAA

6.2AA

2.6Fail

Black BG

2.1Fail

2.7Fail

1.6Fail

3.4AA Large

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B2E

5C5C3A

363620

515232

8E8E62

Deuteranopia

4C4E2F

5E603B

373821

4F4B37

8A8568

Tritanopia

553132

683E3F

3D2324

3F4144

75767A

Achromatopsia

424242

525252

2F2F2F

555555

939393

Shades & Tints Shades & Tints

#563C29

Dark

Light

#694C34

Dark

Light

#3E2B1D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #563c29;
  --color-2: #694c34;
  --color-3: #3e2b1d;
  --color-4: #3d6c20;
  --color-5: #72b248;
}

SCSS

$color-1: #563c29;
$color-2: #694c34;
$color-3: #3e2b1d;
$color-4: #3d6c20;
$color-5: #72b248;

TAILWIND

colors: {
  'brand-1': '#563c29',
  'brand-2': '#694c34',
  'brand-3': '#3e2b1d',
  'brand-4': '#3d6c20',
  'brand-5': '#72b248',
}

RGB Array

[86, 60, 41], [105, 76, 52], [62, 43, 29], [61, 108, 32], [114, 178, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #563C29, #694C34, #3E2B1D, #3D6C20, #72B248 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: #563c29; --color-2: #694c34; --color-3: #3e2b1d; --color-4: #3d6c20; --color-5: #72b248. 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