← Back to Editor

#C67838 · #96572B · #F2AE59 · #C99C59 · #AE9459

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C67838

Tangerine · Chocolate · Amber Brown

HEX
#C67838
RGB
rgb(198, 120, 56)
HSL
hsl(27, 56%, 50%)
HSB
hsb(27, 72%, 78%)
CMYK
cmyk(0%, 39%, 72%, 22%)
Oklch
oklch(64.5% 0.125 57.1)

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

#96572B

Tangerine · Sienna · Amber Brown

HEX
#96572B
RGB
rgb(150, 87, 43)
HSL
hsl(25, 55%, 38%)
HSB
hsb(25, 71%, 59%)
CMYK
cmyk(0%, 42%, 71%, 41%)
Oklch
oklch(52.1% 0.102 53.3)

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

#F2AE59

Ginger · SandyBrown · Warm Sun

HEX
#F2AE59
RGB
rgb(242, 174, 89)
HSL
hsl(33, 85%, 65%)
HSB
hsb(33, 63%, 95%)
CMYK
cmyk(0%, 28%, 63%, 5%)
Oklch
oklch(79.9% 0.129 70.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C99C59

Ginger · SandyBrown · Warm Sun

HEX
#C99C59
RGB
rgb(201, 156, 89)
HSL
hsl(36, 51%, 57%)
HSB
hsb(36, 56%, 79%)
CMYK
cmyk(0%, 22%, 56%, 21%)
Oklch
oklch(72.1% 0.100 76.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#AE9459

Ginger · Gray · Sunflower

HEX
#AE9459
RGB
rgb(174, 148, 89)
HSL
hsl(42, 34%, 52%)
HSB
hsb(42, 49%, 68%)
CMYK
cmyk(0%, 15%, 49%, 32%)
Oklch
oklch(67.7% 0.084 86.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C67838
3887C7

Analogous

C7383F
C67838
C7C038

Triadic

C67838
38C778
7838C7

Split-Comp.

C67838
38C7C0
383FC7

Tetradic

C67838
3FC738
3887C7
C038C7

Contrast Matrix WCAG 2.1 Contrast

C67838
96572B
F2AE59
C99C59
AE9459
—
1.7
Fail
1.8
Fail
1.4
Fail
1.2
Fail
1.7
Fail
—
3.0
Fail
2.3
Fail
1.9
Fail
1.8
Fail
3.0
Fail
—
1.3
Fail
1.5
Fail
1.4
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
1.2
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
3.4AA Large
5.7AA
1.9Fail
2.5Fail
2.9Fail
Black BG
6.1AA
3.7AA Large
11.0AAA
8.4AAA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A447
7B7A36
D5D46E
B6B569
A3A367

Deuteranopia

A9AF4B
7E8338
D9DE73
B8BC6D
A4A66B

Tritanopia

C25456
933E40
EF7E81
C77679
AD7375

Achromatopsia

888888
656565
B9B9B9
A2A2A2
959595

Shades & Tints Shades & Tints

#C67838

Dark
Light

#96572B

Dark
Light

#F2AE59

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c67838;
  --color-2: #96572b;
  --color-3: #f2ae59;
  --color-4: #c99c59;
  --color-5: #ae9459;
}

SCSS

$color-1: #c67838;
$color-2: #96572b;
$color-3: #f2ae59;
$color-4: #c99c59;
$color-5: #ae9459;

TAILWIND

colors: {
  'brand-1': '#c67838',
  'brand-2': '#96572b',
  'brand-3': '#f2ae59',
  'brand-4': '#c99c59',
  'brand-5': '#ae9459',
}

RGB Array

[198, 120, 56], [150, 87, 43], [242, 174, 89], [201, 156, 89], [174, 148, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C67838, #96572B, #F2AE59, #C99C59, #AE9459 is ideal for: corporate websites, product showcases, portfolios. 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: #c67838; --color-2: #96572b; --color-3: #f2ae59; --color-4: #c99c59; --color-5: #ae9459. 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. 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