← Back to Editor

#684A24 · #826227 · #51533D · #333E38 · #25302C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#684A24

Ochre · DarkOliveGreen · Amber Brown

HEX
#684A24
RGB
rgb(104, 74, 36)
HSL
hsl(34, 49%, 27%)
HSB
hsb(34, 65%, 41%)
CMYK
cmyk(0%, 29%, 65%, 59%)
Oklch
oklch(43.3% 0.067 70.9)

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

#826227

Ochre · Sienna · Amber Brown

HEX
#826227
RGB
rgb(130, 98, 39)
HSL
hsl(39, 54%, 33%)
HSB
hsb(39, 70%, 51%)
CMYK
cmyk(0%, 25%, 70%, 49%)
Oklch
oklch(51.7% 0.086 80.0)

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

#51533D

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#51533D
RGB
rgb(81, 83, 61)
HSL
hsl(65, 15%, 28%)
HSB
hsb(65, 27%, 33%)
CMYK
cmyk(2%, 0%, 27%, 67%)
Oklch
oklch(43.4% 0.035 112.1)

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

#333E38

Celadon · DarkSlateGray · Forest Green

HEX
#333E38
RGB
rgb(51, 62, 56)
HSL
hsl(147, 10%, 22%)
HSB
hsb(147, 18%, 24%)
CMYK
cmyk(18%, 0%, 10%, 76%)
Oklch
oklch(35.2% 0.018 161.5)

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

#25302C

Mineral Blue · DarkSlateGray · Dark Green

HEX
#25302C
RGB
rgb(37, 48, 44)
HSL
hsl(158, 13%, 17%)
HSB
hsb(158, 23%, 19%)
CMYK
cmyk(23%, 0%, 8%, 81%)
Oklch
oklch(29.7% 0.017 171.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

684A24
234067

Analogous

672823
684A24
626723

Triadic

684A24
236749
492367

Split-Comp.

684A24
236267
282367

Tetradic

684A24
236728
234067
672362

Contrast Matrix WCAG 2.1 Contrast

684A24
826227
51533D
333E38
25302C
—
1.4
Fail
1.0
Fail
1.4
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
2.4
Fail
1.0
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
1.4
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
2.4
Fail
1.7
Fail
1.2
Fail
—
White BG
8.1AAA
5.6AA
7.9AAA
11.1AAA
13.7AAA
Black BG
2.6Fail
3.7AA Large
2.7Fail
1.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B2D
747435
525242
383839
2A2A2D

Deuteranopia

5D5F2F
767839
525244
37363A
29282D

Tritanopia

673436
804143
514747
343B3B
262E2E

Achromatopsia

4F4F4F
656565
505050
3A3A3A
2C2C2C

Shades & Tints Shades & Tints

#684A24

Dark
Light

#826227

Dark
Light

#51533D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #684a24;
  --color-2: #826227;
  --color-3: #51533d;
  --color-4: #333e38;
  --color-5: #25302c;
}

SCSS

$color-1: #684a24;
$color-2: #826227;
$color-3: #51533d;
$color-4: #333e38;
$color-5: #25302c;

TAILWIND

colors: {
  'brand-1': '#684a24',
  'brand-2': '#826227',
  'brand-3': '#51533d',
  'brand-4': '#333e38',
  'brand-5': '#25302c',
}

RGB Array

[104, 74, 36], [130, 98, 39], [81, 83, 61], [51, 62, 56], [37, 48, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #684A24, #826227, #51533D, #333E38, #25302C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #684a24; --color-2: #826227; --color-3: #51533d; --color-4: #333e38; --color-5: #25302c. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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