← Back to Editor

#707E64 · #CEA259 · #918356 · #A4A764 · #CFAF66

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

#707E64

Celadon · DimGray · Olive Green

HEX
#707E64
RGB
rgb(112, 126, 100)
HSL
hsl(92, 12%, 44%)
HSB
hsb(92, 21%, 49%)
CMYK
cmyk(11%, 0%, 21%, 51%)
Oklch
oklch(57.4% 0.042 130.7)

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

#CEA259

Ginger · SandyBrown · Warm Sun

HEX
#CEA259
RGB
rgb(206, 162, 89)
HSL
hsl(37, 54%, 58%)
HSB
hsb(37, 57%, 81%)
CMYK
cmyk(0%, 21%, 57%, 19%)
Oklch
oklch(73.8% 0.105 78.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#918356

Ochre · Gray · Honey Gold

HEX
#918356
RGB
rgb(145, 131, 86)
HSL
hsl(46, 26%, 45%)
HSB
hsb(46, 41%, 57%)
CMYK
cmyk(0%, 10%, 41%, 43%)
Oklch
oklch(61.2% 0.065 92.8)

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

#A4A764

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4A764
RGB
rgb(164, 167, 100)
HSL
hsl(63, 28%, 52%)
HSB
hsb(63, 40%, 65%)
CMYK
cmyk(2%, 0%, 40%, 35%)
Oklch
oklch(71.0% 0.089 110.7)

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

#CFAF66

Ginger · BurlyWood · Sunflower

HEX
#CFAF66
RGB
rgb(207, 175, 102)
HSL
hsl(42, 52%, 61%)
HSB
hsb(42, 51%, 81%)
CMYK
cmyk(0%, 15%, 51%, 19%)
Oklch
oklch(76.7% 0.099 86.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

707E64
71637E

Analogous

7D7E63
707E64
637E64

Triadic

707E64
636F7E
7E636F

Split-Comp.

707E64
64637E
7E637D

Tetradic

707E64
637D7E
71637E
7E6463

Contrast Matrix WCAG 2.1 Contrast

707E64
CEA259
918356
A4A764
CFAF66
—
1.8
Fail
1.1
Fail
1.7
Fail
2.1
Fail
1.8
Fail
—
1.6
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.6
Fail
—
1.5
Fail
1.8
Fail
1.7
Fail
1.1
Fail
1.5
Fail
—
1.2
Fail
2.1
Fail
1.1
Fail
1.8
Fail
1.2
Fail
—
White BG
4.3AA Large
2.3Fail
3.8AA Large
2.5Fail
2.1Fail
Black BG
4.9AA
8.9AAA
5.6AA
8.3AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76766A
BBBB6B
8B8B61
A5A574
C1C178

Deuteranopia

75746C
BEC16F
8C8D64
A5A578
C3C57C

Tritanopia

716F70
CC797C
90696B
A48184
CD8689

Achromatopsia

777777
A7A7A7
828282
9E9E9E
B0B0B0

Shades & Tints Shades & Tints

#707E64

Dark
Light

#CEA259

Dark
Light

#918356

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #707e64;
  --color-2: #cea259;
  --color-3: #918356;
  --color-4: #a4a764;
  --color-5: #cfaf66;
}

SCSS

$color-1: #707e64;
$color-2: #cea259;
$color-3: #918356;
$color-4: #a4a764;
$color-5: #cfaf66;

TAILWIND

colors: {
  'brand-1': '#707e64',
  'brand-2': '#cea259',
  'brand-3': '#918356',
  'brand-4': '#a4a764',
  'brand-5': '#cfaf66',
}

RGB Array

[112, 126, 100], [206, 162, 89], [145, 131, 86], [164, 167, 100], [207, 175, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #707E64, #CEA259, #918356, #A4A764, #CFAF66 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: #707e64; --color-2: #cea259; --color-3: #918356; --color-4: #a4a764; --color-5: #cfaf66. 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