← Back to Editor

#9FB1A5 · #6F4A5C · #944A62 · #AF8C16 · #BFB24C

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

#9FB1A5

Celadon · DarkGray · Apple Green

HEX
#9FB1A5
RGB
rgb(159, 177, 165)
HSL
hsl(140, 10%, 66%)
HSB
hsb(140, 10%, 69%)
CMYK
cmyk(10%, 0%, 7%, 31%)
Oklch
oklch(74.3% 0.026 156.5)

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

#6F4A5C

Dark Violet · DimGray · Camellia

HEX
#6F4A5C
RGB
rgb(111, 74, 92)
HSL
hsl(331, 20%, 36%)
HSB
hsb(331, 33%, 44%)
CMYK
cmyk(0%, 33%, 17%, 56%)
Oklch
oklch(45.6% 0.056 348.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#944A62

Dark Violet · DimGray · Camellia

HEX
#944A62
RGB
rgb(148, 74, 98)
HSL
hsl(341, 33%, 44%)
HSB
hsb(341, 50%, 58%)
CMYK
cmyk(0%, 50%, 34%, 42%)
Oklch
oklch(50.8% 0.103 0.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#AF8C16

Ochre · DarkGoldenRod · Honey Gold

HEX
#AF8C16
RGB
rgb(175, 140, 22)
HSL
hsl(46, 78%, 39%)
HSB
hsb(46, 87%, 69%)
CMYK
cmyk(0%, 20%, 87%, 31%)
Oklch
oklch(65.5% 0.128 90.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BFB24C

Autumn Sage · GoldenRod · Sunflower

HEX
#BFB24C
RGB
rgb(191, 178, 76)
HSL
hsl(53, 47%, 52%)
HSB
hsb(53, 60%, 75%)
CMYK
cmyk(0%, 7%, 60%, 25%)
Oklch
oklch(75.5% 0.124 102.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FB1A5
B1A0AB

Analogous

A3B1A0
9FB1A5
A0B1AE

Triadic

9FB1A5
A5A0B1
B1A5A0

Split-Comp.

9FB1A5
AEA0B1
B1A0A3

Tetradic

9FB1A5
A0A3B1
B1A0AB
B1AEA0

Contrast Matrix WCAG 2.1 Contrast

9FB1A5
6F4A5C
944A62
AF8C16
BFB24C
—
3.3
AA Large
2.7
Fail
1.4
Fail
1.0
Fail
3.3
AA Large
—
1.2
Fail
2.3
Fail
3.4
AA Large
2.7
Fail
1.2
Fail
—
1.9
Fail
2.8
Fail
1.4
Fail
2.3
Fail
1.9
Fail
—
1.5
Fail
1.0
Fail
3.4
AA Large
2.8
Fail
1.5
Fail
—
White BG
2.3Fail
7.5AAA
6.1AA
3.2AA Large
2.2Fail
Black BG
9.3AAA
2.8Fail
3.4AA Large
6.6AA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A7A8
5F5F58
74735C
A0A033
B9B965

Deuteranopia

A6A4A9
616457
787E5B
A2A539
BABB6B

Tritanopia

A0AAAB
6D5453
905857
AD494E
BE787C

Achromatopsia

AAAAAA
575757
636363
898989
AAAAAA

Shades & Tints Shades & Tints

#9FB1A5

Dark
Light

#6F4A5C

Dark
Light

#944A62

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fb1a5;
  --color-2: #6f4a5c;
  --color-3: #944a62;
  --color-4: #af8c16;
  --color-5: #bfb24c;
}

SCSS

$color-1: #9fb1a5;
$color-2: #6f4a5c;
$color-3: #944a62;
$color-4: #af8c16;
$color-5: #bfb24c;

TAILWIND

colors: {
  'brand-1': '#9fb1a5',
  'brand-2': '#6f4a5c',
  'brand-3': '#944a62',
  'brand-4': '#af8c16',
  'brand-5': '#bfb24c',
}

RGB Array

[159, 177, 165], [111, 74, 92], [148, 74, 98], [175, 140, 22], [191, 178, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FB1A5, #6F4A5C, #944A62, #AF8C16, #BFB24C 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: #9fb1a5; --color-2: #6f4a5c; --color-3: #944a62; --color-4: #af8c16; --color-5: #bfb24c. 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