← Back to Editor

#A1B7A4 · #C4BA8F · #D9AA77 · #FF9B61 · #6B4C40

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

#A1B7A4

Celadon · DarkGray · Apple Green

HEX
#A1B7A4
RGB
rgb(161, 183, 164)
HSL
hsl(128, 13%, 67%)
HSB
hsb(128, 12%, 72%)
CMYK
cmyk(12%, 0%, 10%, 28%)
Oklch
oklch(75.7% 0.036 149.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C4BA8F

Ginger · Tan · Sunflower

HEX
#C4BA8F
RGB
rgb(196, 186, 143)
HSL
hsl(49, 31%, 66%)
HSB
hsb(49, 27%, 77%)
CMYK
cmyk(0%, 5%, 27%, 23%)
Oklch
oklch(78.6% 0.059 96.5)

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

#D9AA77

Ginger · BurlyWood · Warm Sun

HEX
#D9AA77
RGB
rgb(217, 170, 119)
HSL
hsl(31, 56%, 66%)
HSB
hsb(31, 45%, 85%)
CMYK
cmyk(0%, 22%, 45%, 15%)
Oklch
oklch(76.9% 0.087 68.2)

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

#FF9B61

Apricot · SandyBrown · Warm Sun

HEX
#FF9B61
RGB
rgb(255, 155, 97)
HSL
hsl(22, 100%, 69%)
HSB
hsb(22, 62%, 100%)
CMYK
cmyk(0%, 39%, 62%, 0%)
Oklch
oklch(78.2% 0.141 49.7)

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

#6B4C40

Tangerine · DarkOliveGreen · Amber Brown

HEX
#6B4C40
RGB
rgb(107, 76, 64)
HSL
hsl(17, 25%, 34%)
HSB
hsb(17, 40%, 42%)
CMYK
cmyk(0%, 29%, 40%, 58%)
Oklch
oklch(44.7% 0.047 42.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1B7A4
B6A0B3

Analogous

A8B6A0
A1B7A4
A0B6AE

Triadic

A1B7A4
A3A0B6
B6A3A0

Split-Comp.

A1B7A4
AEA0B6
B6A0A8

Tetradic

A1B7A4
A0A8B6
B6A0B3
B6AEA0

Contrast Matrix WCAG 2.1 Contrast

A1B7A4
C4BA8F
D9AA77
FF9B61
6B4C40
—
1.1
Fail
1.0
Fail
1.0
Fail
3.6
AA Large
1.1
Fail
—
1.1
Fail
1.1
Fail
3.9
AA Large
1.0
Fail
1.1
Fail
—
1.0
Fail
3.6
AA Large
1.0
Fail
1.1
Fail
1.0
Fail
—
3.7
AA Large
3.6
AA Large
3.9
AA Large
3.6
AA Large
3.7
AA Large
—
White BG
2.1Fail
2.0Fail
2.1Fail
2.1Fail
7.7AAA
Black BG
9.8AAA
10.8AAA
10.0AAA
10.1AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABABA9
C0C099
C5C483
D4D36F
5E5D43

Deuteranopia

A9A8AA
C0C19C
C7CB86
DAE172
5F6244

Tritanopia

A2ACAD
C4A2A3
D78D8F
FA7A7D
694546

Achromatopsia

AEAEAE
B8B8B8
B2B2B2
B2B2B2
545454

Shades & Tints Shades & Tints

#A1B7A4

Dark
Light

#C4BA8F

Dark
Light

#D9AA77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1b7a4;
  --color-2: #c4ba8f;
  --color-3: #d9aa77;
  --color-4: #ff9b61;
  --color-5: #6b4c40;
}

SCSS

$color-1: #a1b7a4;
$color-2: #c4ba8f;
$color-3: #d9aa77;
$color-4: #ff9b61;
$color-5: #6b4c40;

TAILWIND

colors: {
  'brand-1': '#a1b7a4',
  'brand-2': '#c4ba8f',
  'brand-3': '#d9aa77',
  'brand-4': '#ff9b61',
  'brand-5': '#6b4c40',
}

RGB Array

[161, 183, 164], [196, 186, 143], [217, 170, 119], [255, 155, 97], [107, 76, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A1B7A4, #C4BA8F, #D9AA77, #FF9B61, #6B4C40 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: #a1b7a4; --color-2: #c4ba8f; --color-3: #d9aa77; --color-4: #ff9b61; --color-5: #6b4c40. 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