← Back to Editor

#48676A · #D1AB6D · #C9956D · #C08162 · #C06B66

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

#48676A

Slate Blue · DimGray · Mint Ice

HEX
#48676A
RGB
rgb(72, 103, 106)
HSL
hsl(185, 19%, 35%)
HSB
hsb(185, 32%, 42%)
CMYK
cmyk(32%, 3%, 0%, 58%)
Oklch
oklch(49.1% 0.036 203.6)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#D1AB6D

Ginger · BurlyWood · Warm Sun

HEX
#D1AB6D
RGB
rgb(209, 171, 109)
HSL
hsl(37, 52%, 62%)
HSB
hsb(37, 48%, 82%)
CMYK
cmyk(0%, 18%, 48%, 18%)
Oklch
oklch(76.2% 0.091 79.0)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#C9956D

Apricot · DarkSalmon · Warm Sun

HEX
#C9956D
RGB
rgb(201, 149, 109)
HSL
hsl(26, 46%, 61%)
HSB
hsb(26, 46%, 79%)
CMYK
cmyk(0%, 26%, 46%, 21%)
Oklch
oklch(71.0% 0.083 58.5)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#C08162

Tangerine · DarkSalmon · Warm Sun

HEX
#C08162
RGB
rgb(192, 129, 98)
HSL
hsl(20, 43%, 57%)
HSB
hsb(20, 49%, 75%)
CMYK
cmyk(0%, 33%, 49%, 25%)
Oklch
oklch(66.0% 0.090 46.9)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#C06B66

Crimson · LightCoral · Passion Red

HEX
#C06B66
RGB
rgb(192, 107, 102)
HSL
hsl(3, 42%, 58%)
HSB
hsb(3, 47%, 75%)
CMYK
cmyk(0%, 44%, 47%, 25%)
Oklch
oklch(62.3% 0.109 24.2)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

48676A
6A4B48

Analogous

486A5C
48676A
48566A

Triadic

48676A
6A4867
676A48

Split-Comp.

48676A
6A4856
6A5C48

Tetradic

48676A
5C486A
6A4B48
566A48

Contrast Matrix WCAG 2.1 Contrast

48676A
D1AB6D
C9956D
C08162
C06B66
2.8
Fail
2.3
Fail
1.9
Fail
1.6
Fail
2.8
Fail
1.2
Fail
1.5
Fail
1.8
Fail
2.3
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
1.2
Fail
1.6
Fail
1.8
Fail
1.4
Fail
1.2
Fail
White BG
6.1AA
2.2Fail
2.6Fail
3.2AA Large
3.8AA Large
Black BG
3.4AA Large
9.8AAA
8.0AAA
6.6AA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

555669
C1C07C
B2B277
A5A46A
9B9A67

Deuteranopia

545169
C3C680
B6B979
A8AD6B
A0A668

Tritanopia

4A6969
CF888A
C67E80
BD6F71
BC6868

Achromatopsia

5E5E5E
AFAFAF
A0A0A0
909090
848484

Shades & Tints Shades & Tints

#48676A

Dark
Light

#D1AB6D

Dark
Light

#C9956D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #48676a;
  --color-2: #d1ab6d;
  --color-3: #c9956d;
  --color-4: #c08162;
  --color-5: #c06b66;
}

SCSS

$color-1: #48676a;
$color-2: #d1ab6d;
$color-3: #c9956d;
$color-4: #c08162;
$color-5: #c06b66;

TAILWIND

colors: {
  'brand-1': '#48676a',
  'brand-2': '#d1ab6d',
  'brand-3': '#c9956d',
  'brand-4': '#c08162',
  'brand-5': '#c06b66',
}

RGB Array

[72, 103, 106], [209, 171, 109], [201, 149, 109], [192, 129, 98], [192, 107, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #48676A, #D1AB6D, #C9956D, #C08162, #C06B66 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: #48676a; --color-2: #d1ab6d; --color-3: #c9956d; --color-4: #c08162; --color-5: #c06b66. 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