← Back to Editor

#623A3A · #C1B580 · #FA7445 · #2C374B · #CCA071

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#623A3A

Crimson · DarkOliveGreen · Wine Red

HEX
#623A3A
RGB
rgb(98, 58, 58)
HSL
hsl(0, 26%, 31%)
HSB
hsb(0, 41%, 38%)
CMYK
cmyk(0%, 41%, 41%, 62%)
Oklch
oklch(39.7% 0.057 19.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#C1B580

Ginger · Tan · Sunflower

HEX
#C1B580
RGB
rgb(193, 181, 128)
HSL
hsl(49, 34%, 63%)
HSB
hsb(49, 34%, 76%)
CMYK
cmyk(0%, 6%, 34%, 24%)
Oklch
oklch(77.0% 0.072 96.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FA7445

Apricot · Coral · Warm Sun

HEX
#FA7445
RGB
rgb(250, 116, 69)
HSL
hsl(16, 95%, 63%)
HSB
hsb(16, 72%, 98%)
CMYK
cmyk(0%, 54%, 72%, 2%)
Oklch
oklch(71.1% 0.176 39.3)

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

#2C374B

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C374B
RGB
rgb(44, 55, 75)
HSL
hsl(219, 26%, 23%)
HSB
hsb(219, 41%, 29%)
CMYK
cmyk(41%, 27%, 0%, 71%)
Oklch
oklch(33.6% 0.038 262.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#CCA071

Ginger · DarkSalmon · Warm Sun

HEX
#CCA071
RGB
rgb(204, 160, 113)
HSL
hsl(31, 47%, 62%)
HSB
hsb(31, 45%, 80%)
CMYK
cmyk(0%, 22%, 45%, 20%)
Oklch
oklch(73.6% 0.082 67.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

623A3A
3A6464

Analogous

643A4F
623A3A
644F3A

Triadic

623A3A
3A643A
3A3A64

Split-Comp.

623A3A
3A644F
3A4F64

Tetradic

623A3A
4F643A
3A6464
4F3A64

Contrast Matrix WCAG 2.1 Contrast

623A3A
C1B580
FA7445
2C374B
CCA071
—
4.7
AA
3.5
AA Large
1.2
Fail
4.0
AA Large
4.7
AA
—
1.3
Fail
5.8
AA
1.2
Fail
3.5
AA Large
1.3
Fail
—
4.4
AA Large
1.2
Fail
1.2
Fail
5.8
AA
4.4
AA Large
—
5.0
AA
4.0
AA Large
1.2
Fail
1.2
Fail
5.0
AA
—
White BG
9.6AAA
2.1Fail
2.7Fail
12.0AAA
2.4Fail
Black BG
2.2Fail
10.2AAA
7.6AAA
1.8Fail
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51503A
BCBC8D
C0BF50
313146
B9B97C

Deuteranopia

53563A
BDBD90
C8D253
302F45
BCBF7F

Tritanopia

603A3A
C09799
F3595B
2D4242
CA8587

Achromatopsia

464646
B3B3B3
979797
363636
A8A8A8

Shades & Tints Shades & Tints

#623A3A

Dark
Light

#C1B580

Dark
Light

#FA7445

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #623a3a;
  --color-2: #c1b580;
  --color-3: #fa7445;
  --color-4: #2c374b;
  --color-5: #cca071;
}

SCSS

$color-1: #623a3a;
$color-2: #c1b580;
$color-3: #fa7445;
$color-4: #2c374b;
$color-5: #cca071;

TAILWIND

colors: {
  'brand-1': '#623a3a',
  'brand-2': '#c1b580',
  'brand-3': '#fa7445',
  'brand-4': '#2c374b',
  'brand-5': '#cca071',
}

RGB Array

[98, 58, 58], [193, 181, 128], [250, 116, 69], [44, 55, 75], [204, 160, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #623A3A, #C1B580, #FA7445, #2C374B, #CCA071 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: #623a3a; --color-2: #c1b580; --color-3: #fa7445; --color-4: #2c374b; --color-5: #cca071. 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