← Back to Editor

#66364B · #CB9A45 · #D7C932 · #C3BA58 · #72AB97

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#66364B

Dark Violet · DimGray · Camellia

HEX
#66364B
RGB
rgb(102, 54, 75)
HSL
hsl(334, 31%, 31%)
HSB
hsb(334, 47%, 40%)
CMYK
cmyk(0%, 47%, 26%, 60%)
Oklch
oklch(40.0% 0.074 353.3)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#CB9A45

Ginger · GoldenRod · Warm Sun

HEX
#CB9A45
RGB
rgb(203, 154, 69)
HSL
hsl(38, 56%, 53%)
HSB
hsb(38, 66%, 80%)
CMYK
cmyk(0%, 24%, 66%, 20%)
Oklch
oklch(71.6% 0.117 78.6)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#D7C932

Autumn Sage · GoldenRod · Sunflower

HEX
#D7C932
RGB
rgb(215, 201, 50)
HSL
hsl(55, 67%, 52%)
HSB
hsb(55, 77%, 84%)
CMYK
cmyk(0%, 7%, 77%, 16%)
Oklch
oklch(82.3% 0.160 103.8)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#C3BA58

Autumn Sage · BurlyWood · Sunflower

HEX
#C3BA58
RGB
rgb(195, 186, 88)
HSL
hsl(55, 47%, 55%)
HSB
hsb(55, 55%, 76%)
CMYK
cmyk(0%, 5%, 55%, 24%)
Oklch
oklch(77.7% 0.120 104.0)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#72AB97

Mineral Blue · CadetBlue · Olive Green

HEX
#72AB97
RGB
rgb(114, 171, 151)
HSL
hsl(159, 25%, 56%)
HSB
hsb(159, 33%, 67%)
CMYK
cmyk(33%, 0%, 12%, 33%)
Oklch
oklch(69.6% 0.067 170.3)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

66364B
376852

Analogous

683764
66364B
683A37

Triadic

66364B
4C6837
374C68

Split-Comp.

66364B
37683A
376468

Tetradic

66364B
646837
376852
3A3768

Contrast Matrix WCAG 2.1 Contrast

66364B
CB9A45
D7C932
C3BA58
72AB97
3.8
AA Large
5.6
AA
4.8
AA
3.6
AA Large
3.8
AA Large
1.5
Fail
1.3
Fail
1.0
Fail
5.6
AA
1.5
Fail
1.2
Fail
1.5
Fail
4.8
AA
1.3
Fail
1.2
Fail
1.3
Fail
3.6
AA Large
1.0
Fail
1.5
Fail
1.3
Fail
White BG
9.6AAA
2.5Fail
1.7Fail
2.0Fail
2.6Fail
Black BG
2.2Fail
8.2AAA
12.3AAA
10.5AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

515146
B6B55A
D1D157
BFBF70
8B8B9C

Deuteranopia

545845
B9BC5F
D2D35F
C0C075
87839D

Tritanopia

644241
C96A6D
D6737A
C38287
75A0A1

Achromatopsia

474747
9F9F9F
BCBCBC
B2B2B2
989898

Shades & Tints Shades & Tints

#66364B

Dark
Light

#CB9A45

Dark
Light

#D7C932

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #66364b;
  --color-2: #cb9a45;
  --color-3: #d7c932;
  --color-4: #c3ba58;
  --color-5: #72ab97;
}

SCSS

$color-1: #66364b;
$color-2: #cb9a45;
$color-3: #d7c932;
$color-4: #c3ba58;
$color-5: #72ab97;

TAILWIND

colors: {
  'brand-1': '#66364b',
  'brand-2': '#cb9a45',
  'brand-3': '#d7c932',
  'brand-4': '#c3ba58',
  'brand-5': '#72ab97',
}

RGB Array

[102, 54, 75], [203, 154, 69], [215, 201, 50], [195, 186, 88], [114, 171, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #66364B, #CB9A45, #D7C932, #C3BA58, #72AB97 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: #66364b; --color-2: #cb9a45; --color-3: #d7c932; --color-4: #c3ba58; --color-5: #72ab97. 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