#666699 + #665973 + #664D4D + #664026 + #663300 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#666699

Deep Indigo · SlateGray · Navy Blue

HEX

#666699

RGB

rgb(102, 102, 153)

HSL

hsl(240, 20%, 50%)

HSB

hsb(240, 33%, 60%)

CMYK

cmyk(33%, 33%, 0%, 40%)

Oklch

oklch(53.2% 0.079 283.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#665973

Dark Plum · DimGray · Eggplant

HEX

#665973

RGB

rgb(102, 89, 115)

HSL

hsl(270, 13%, 40%)

HSB

hsb(270, 23%, 45%)

CMYK

cmyk(11%, 23%, 0%, 55%)

Oklch

oklch(48.6% 0.044 307.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#664D4D

Crimson · DimGray · Wine Red

HEX

#664D4D

RGB

rgb(102, 77, 77)

HSL

hsl(0, 14%, 35%)

HSB

hsb(0, 25%, 40%)

CMYK

cmyk(0%, 25%, 25%, 60%)

Oklch

oklch(44.7% 0.034 18.5)

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

#664026

Tangerine · DarkOliveGreen · Amber Brown

HEX

#664026

RGB

rgb(102, 64, 38)

HSL

hsl(24, 46%, 27%)

HSB

hsb(24, 63%, 40%)

CMYK

cmyk(0%, 37%, 63%, 60%)

Oklch

oklch(41.0% 0.066 54.2)

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

#663300

Ochre · Maroon · Cinnamon

HEX

#663300

RGB

rgb(102, 51, 0)

HSL

hsl(30, 100%, 20%)

HSB

hsb(30, 100%, 40%)

CMYK

cmyk(0%, 50%, 100%, 60%)

Oklch

oklch(38.0% 0.092 56.8)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

666699

999966

Analogous

668099

666699

806699

Triadic

666699

996666

669966

Split-Comp.

666699

998066

809966

Tetradic

666699

996680

999966

669980

Contrast Matrix WCAG 2.1 Contrast

666699	665973	664D4D	664026	663300
—	1.2 Fail	1.4 Fail	1.7 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
1.9 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

5.3AA

6.5AA

7.7AAA

9.0AAA

10.3AAA

Black BG

3.9AA Large

3.2AA Large

2.7Fail

2.3Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

66668D

60606D

5B5B4D

56552C

504F0C

Deuteranopia

66668A

61626B

5D5E4D

585B2E

53570F

Tritanopia

668381

656867

654D4D

643132

631618

Achromatopsia

6C6C6C

606060

545454

484848

3C3C3C

Shades & Tints Shades & Tints

#666699

Dark

Light

#665973

Dark

Light

#664D4D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #666699;
  --color-2: #665973;
  --color-3: #664d4d;
  --color-4: #664026;
  --color-5: #663300;
}

SCSS

$color-1: #666699;
$color-2: #665973;
$color-3: #664d4d;
$color-4: #664026;
$color-5: #663300;

TAILWIND

colors: {
  'brand-1': '#666699',
  'brand-2': '#665973',
  'brand-3': '#664d4d',
  'brand-4': '#664026',
  'brand-5': '#663300',
}

RGB Array

[102, 102, 153], [102, 89, 115], [102, 77, 77], [102, 64, 38], [102, 51, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #666699, #665973, #664D4D, #664026, #663300 is ideal for: tech websites, dark mode UIs, game UIs. 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: #666699; --color-2: #665973; --color-3: #664d4d; --color-4: #664026; --color-5: #663300. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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