← Back to Editor

#BF8726 · #693F3C · #574B4D · #66997B · #CDD0A1

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

#BF8726

Ochre · DarkGoldenRod · Amber Brown

HEX
#BF8726
RGB
rgb(191, 135, 38)
HSL
hsl(38, 67%, 45%)
HSB
hsb(38, 80%, 75%)
CMYK
cmyk(0%, 29%, 80%, 25%)
Oklch
oklch(66.3% 0.127 76.0)

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

#693F3C

Crimson · DarkOliveGreen · Wine Red

HEX
#693F3C
RGB
rgb(105, 63, 60)
HSL
hsl(4, 27%, 32%)
HSB
hsb(4, 43%, 41%)
CMYK
cmyk(0%, 40%, 43%, 59%)
Oklch
oklch(41.7% 0.059 24.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#574B4D

Ink Gray · DarkSlateGray · Charcoal

HEX
#574B4D
RGB
rgb(87, 75, 77)
HSL
hsl(350, 7%, 32%)
HSB
hsb(350, 14%, 34%)
CMYK
cmyk(0%, 14%, 11%, 66%)
Oklch
oklch(42.6% 0.016 6.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#66997B

Celadon · SlateGray · Olive Green

HEX
#66997B
RGB
rgb(102, 153, 123)
HSL
hsl(145, 20%, 50%)
HSB
hsb(145, 33%, 60%)
CMYK
cmyk(33%, 0%, 20%, 40%)
Oklch
oklch(63.8% 0.071 157.8)

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

#CDD0A1

Fresh Green · Tan · Sunflower

HEX
#CDD0A1
RGB
rgb(205, 208, 161)
HSL
hsl(64, 33%, 72%)
HSB
hsb(64, 23%, 82%)
CMYK
cmyk(1%, 0%, 23%, 18%)
Oklch
oklch(84.3% 0.063 110.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF8726
265EC0

Analogous

C03A26
BF8726
ABC026

Triadic

BF8726
26C087
8726C0

Split-Comp.

BF8726
26ABC0
3A26C0

Tetradic

BF8726
26C03A
265EC0
C026AB

Contrast Matrix WCAG 2.1 Contrast

BF8726
693F3C
574B4D
66997B
CDD0A1
—
2.8
Fail
2.7
Fail
1.0
Fail
2.0
Fail
2.8
Fail
—
1.1
Fail
2.7
Fail
5.5
AA
2.7
Fail
1.1
Fail
—
2.5
Fail
5.2
AA
1.0
Fail
2.7
Fail
2.5
Fail
—
2.0
Fail
2.0
Fail
5.5
AA
5.2
AA
2.0
Fail
—
White BG
3.1AA Large
8.8AAA
8.3AAA
3.3AA Large
1.6Fail
Black BG
6.7AA
2.4Fail
2.5Fail
6.4AA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A63D
57563D
52524D
7C7D82
CECEAC

Deuteranopia

AAAE43
595C3D
53534C
797584
CECEAF

Tritanopia

BC5054
673D3D
564C4C
698889
CDB5B7

Achromatopsia

8D8D8D
4B4B4B
4F4F4F
868686
CACACA

Shades & Tints Shades & Tints

#BF8726

Dark
Light

#693F3C

Dark
Light

#574B4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf8726;
  --color-2: #693f3c;
  --color-3: #574b4d;
  --color-4: #66997b;
  --color-5: #cdd0a1;
}

SCSS

$color-1: #bf8726;
$color-2: #693f3c;
$color-3: #574b4d;
$color-4: #66997b;
$color-5: #cdd0a1;

TAILWIND

colors: {
  'brand-1': '#bf8726',
  'brand-2': '#693f3c',
  'brand-3': '#574b4d',
  'brand-4': '#66997b',
  'brand-5': '#cdd0a1',
}

RGB Array

[191, 135, 38], [105, 63, 60], [87, 75, 77], [102, 153, 123], [205, 208, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF8726, #693F3C, #574B4D, #66997B, #CDD0A1 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: #bf8726; --color-2: #693f3c; --color-3: #574b4d; --color-4: #66997b; --color-5: #cdd0a1. 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