← Back to Editor

#684328 · #C3481F · #DDAC4D · #868E5F · #FED67F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#684328

Tangerine · DarkOliveGreen · Amber Brown

HEX
#684328
RGB
rgb(104, 67, 40)
HSL
hsl(25, 44%, 28%)
HSB
hsb(25, 62%, 41%)
CMYK
cmyk(0%, 36%, 62%, 59%)
Oklch
oklch(41.9% 0.065 56.0)

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

#C3481F

Tangerine · Chocolate · Amber Brown

HEX
#C3481F
RGB
rgb(195, 72, 31)
HSL
hsl(15, 73%, 44%)
HSB
hsb(15, 84%, 76%)
CMYK
cmyk(0%, 63%, 84%, 24%)
Oklch
oklch(56.5% 0.166 37.7)

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

#DDAC4D

Ginger · SandyBrown · Sunflower

HEX
#DDAC4D
RGB
rgb(221, 172, 77)
HSL
hsl(40, 68%, 58%)
HSB
hsb(40, 65%, 87%)
CMYK
cmyk(0%, 22%, 65%, 13%)
Oklch
oklch(77.2% 0.125 81.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#868E5F

Grass Green · Gray · Olive Green

HEX
#868E5F
RGB
rgb(134, 142, 95)
HSL
hsl(70, 20%, 46%)
HSB
hsb(70, 33%, 56%)
CMYK
cmyk(6%, 0%, 33%, 44%)
Oklch
oklch(62.8% 0.067 116.2)

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

#FED67F

Goose Yellow · Khaki · Sunflower

HEX
#FED67F
RGB
rgb(254, 214, 127)
HSL
hsl(41, 98%, 75%)
HSB
hsb(41, 50%, 100%)
CMYK
cmyk(0%, 16%, 50%, 0%)
Oklch
oklch(89.2% 0.115 85.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

684328
284D67

Analogous

67282D
684328
676228

Triadic

684328
286742
422867

Split-Comp.

684328
286762
282D67

Tetradic

684328
2D6728
284D67
622867

Contrast Matrix WCAG 2.1 Contrast

684328
C3481F
DDAC4D
868E5F
FED67F
—
1.8
Fail
4.2
AA Large
2.5
Fail
6.3
AA
1.8
Fail
—
2.4
Fail
1.4
Fail
3.5
AA Large
4.2
AA Large
2.4
Fail
—
1.7
Fail
1.5
Fail
2.5
Fail
1.4
Fail
1.7
Fail
—
2.5
Fail
6.3
AA
3.5
AA Large
1.5
Fail
2.5
Fail
—
White BG
8.7AAA
4.9AA
2.1Fail
3.5AA Large
1.4Fail
Black BG
2.4Fail
4.3AA Large
10.1AAA
6.0AA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58582F
8E8D29
C8C764
898A6A
EDEC94

Deuteranopia

5A5D30
959E2B
CBCE6A
89886D
EFF299

Tritanopia

663435
BD3132
DB767A
867375
FCA5A8

Achromatopsia

4B4B4B
686868
B0B0B0
868686
D8D8D8

Shades & Tints Shades & Tints

#684328

Dark
Light

#C3481F

Dark
Light

#DDAC4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #684328;
  --color-2: #c3481f;
  --color-3: #ddac4d;
  --color-4: #868e5f;
  --color-5: #fed67f;
}

SCSS

$color-1: #684328;
$color-2: #c3481f;
$color-3: #ddac4d;
$color-4: #868e5f;
$color-5: #fed67f;

TAILWIND

colors: {
  'brand-1': '#684328',
  'brand-2': '#c3481f',
  'brand-3': '#ddac4d',
  'brand-4': '#868e5f',
  'brand-5': '#fed67f',
}

RGB Array

[104, 67, 40], [195, 72, 31], [221, 172, 77], [134, 142, 95], [254, 214, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #684328, #C3481F, #DDAC4D, #868E5F, #FED67F is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #684328; --color-2: #c3481f; --color-3: #ddac4d; --color-4: #868e5f; --color-5: #fed67f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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