← Back to Editor

#929F81 · #948C66 · #867037 · #C2AC3D · #F0BE62

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

#929F81

Grass Green · DarkSeaGreen · Olive Green

HEX
#929F81
RGB
rgb(146, 159, 129)
HSL
hsl(86, 14%, 56%)
HSB
hsb(86, 19%, 62%)
CMYK
cmyk(8%, 0%, 19%, 38%)
Oklch
oklch(68.4% 0.045 126.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#948C66

Autumn Sage · Gray · Honey Gold

HEX
#948C66
RGB
rgb(148, 140, 102)
HSL
hsl(50, 18%, 49%)
HSB
hsb(50, 31%, 58%)
CMYK
cmyk(0%, 5%, 31%, 42%)
Oklch
oklch(63.7% 0.054 97.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#867037

Ochre · Sienna · Honey Gold

HEX
#867037
RGB
rgb(134, 112, 55)
HSL
hsl(43, 42%, 37%)
HSB
hsb(43, 59%, 53%)
CMYK
cmyk(0%, 16%, 59%, 47%)
Oklch
oklch(55.4% 0.081 88.5)

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

#C2AC3D

Autumn Sage · GoldenRod · Honey Gold

HEX
#C2AC3D
RGB
rgb(194, 172, 61)
HSL
hsl(50, 52%, 50%)
HSB
hsb(50, 69%, 76%)
CMYK
cmyk(0%, 11%, 69%, 24%)
Oklch
oklch(74.3% 0.130 97.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F0BE62

Ginger · SandyBrown · Warm Sun

HEX
#F0BE62
RGB
rgb(240, 190, 98)
HSL
hsl(39, 83%, 66%)
HSB
hsb(39, 59%, 94%)
CMYK
cmyk(0%, 21%, 59%, 6%)
Oklch
oklch(82.8% 0.124 80.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

929F81
8D7F9F

Analogous

9F9C7F
929F81
819F7F

Triadic

929F81
7F919F
9F7F91

Split-Comp.

929F81
7F819F
9C7F9F

Tetradic

929F81
7F9F9C
8D7F9F
9F7F81

Contrast Matrix WCAG 2.1 Contrast

929F81
948C66
867037
C2AC3D
F0BE62
—
1.2
Fail
1.7
Fail
1.2
Fail
1.6
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
2.1
Fail
2.8
Fail
1.2
Fail
1.5
Fail
2.1
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
2.8
Fail
1.3
Fail
—
White BG
2.8Fail
3.4AA Large
4.8AA
2.3Fail
1.7Fail
Black BG
7.5AAA
6.2AA
4.4AA Large
9.3AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989888
91906F
7C7C45
B8B858
DADA78

Deuteranopia

97968A
919271
7E7F48
BABB5E
DDE17E

Tritanopia

938E8F
947678
855052
C16D72
EE8A8E

Achromatopsia

989898
8A8A8A
707070
A6A6A6
C2C2C2

Shades & Tints Shades & Tints

#929F81

Dark
Light

#948C66

Dark
Light

#867037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #929f81;
  --color-2: #948c66;
  --color-3: #867037;
  --color-4: #c2ac3d;
  --color-5: #f0be62;
}

SCSS

$color-1: #929f81;
$color-2: #948c66;
$color-3: #867037;
$color-4: #c2ac3d;
$color-5: #f0be62;

TAILWIND

colors: {
  'brand-1': '#929f81',
  'brand-2': '#948c66',
  'brand-3': '#867037',
  'brand-4': '#c2ac3d',
  'brand-5': '#f0be62',
}

RGB Array

[146, 159, 129], [148, 140, 102], [134, 112, 55], [194, 172, 61], [240, 190, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #929F81, #948C66, #867037, #C2AC3D, #F0BE62 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: #929f81; --color-2: #948c66; --color-3: #867037; --color-4: #c2ac3d; --color-5: #f0be62. 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