← Back to Editor

#694F3D · #8C3BFF · #5900D6 · #21354E · #15121A

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 LibraryData Visualization

Color Details Color Details

#694F3D

Tangerine · DarkOliveGreen · Amber Brown

HEX
#694F3D
RGB
rgb(105, 79, 61)
HSL
hsl(25, 27%, 33%)
HSB
hsb(25, 42%, 41%)
CMYK
cmyk(0%, 25%, 42%, 59%)
Oklch
oklch(45.0% 0.045 56.0)

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

#8C3BFF

Wisteria · MediumSlateBlue · Lilac Purple

HEX
#8C3BFF
RGB
rgb(140, 59, 255)
HSL
hsl(265, 100%, 62%)
HSB
hsb(265, 77%, 100%)
CMYK
cmyk(45%, 77%, 0%, 0%)
Oklch
oklch(57.4% 0.265 295.4)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#5900D6

Deep Indigo · DarkViolet · Violet

HEX
#5900D6
RGB
rgb(89, 0, 214)
HSL
hsl(265, 100%, 42%)
HSB
hsb(265, 100%, 84%)
CMYK
cmyk(58%, 100%, 0%, 16%)
Oklch
oklch(44.6% 0.257 287.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#21354E

Indigo · DarkSlateGray · Prussian Blue

HEX
#21354E
RGB
rgb(33, 53, 78)
HSL
hsl(213, 41%, 22%)
HSB
hsb(213, 58%, 31%)
CMYK
cmyk(58%, 32%, 0%, 69%)
Oklch
oklch(32.4% 0.052 254.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#15121A

Deep Indigo · Black · Dark Purple

HEX
#15121A
RGB
rgb(21, 18, 26)
HSL
hsl(263, 18%, 9%)
HSB
hsb(263, 31%, 10%)
CMYK
cmyk(19%, 31%, 0%, 90%)
Oklch
oklch(19.0% 0.017 302.0)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

694F3D
3D586B

Analogous

6B3D41
694F3D
6B673D

Triadic

694F3D
3D6B50
503D6B

Split-Comp.

694F3D
3D6B67
3D416B

Tetradic

694F3D
416B3D
3D586B
673D6B

Contrast Matrix WCAG 2.1 Contrast

694F3D
8C3BFF
5900D6
21354E
15121A
—
1.5
Fail
1.2
Fail
1.7
Fail
2.5
Fail
1.5
Fail
—
1.7
Fail
2.5
Fail
3.7
AA Large
1.2
Fail
1.7
Fail
—
1.4
Fail
2.1
Fail
1.7
Fail
2.5
Fail
1.4
Fail
—
1.5
Fail
2.5
Fail
3.7
AA Large
2.1
Fail
1.5
Fail
—
White BG
7.5AAA
5.0AA
8.8AAA
12.5AAA
18.5AAA
Black BG
2.8Fail
4.2AA Large
2.4Fail
1.7Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E41
6968D0
3232A2
2A2A48
141418

Deuteranopia

5F6142
6E74C4
383E96
292747
141418

Tritanopia

684546
88AAA2
557970
224342
151716

Achromatopsia

555555
6A6A6A
333333
323232
141414

Shades & Tints Shades & Tints

#694F3D

Dark
Light

#8C3BFF

Dark
Light

#5900D6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #694f3d;
  --color-2: #8c3bff;
  --color-3: #5900d6;
  --color-4: #21354e;
  --color-5: #15121a;
}

SCSS

$color-1: #694f3d;
$color-2: #8c3bff;
$color-3: #5900d6;
$color-4: #21354e;
$color-5: #15121a;

TAILWIND

colors: {
  'brand-1': '#694f3d',
  'brand-2': '#8c3bff',
  'brand-3': '#5900d6',
  'brand-4': '#21354e',
  'brand-5': '#15121a',
}

RGB Array

[105, 79, 61], [140, 59, 255], [89, 0, 214], [33, 53, 78], [21, 18, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #694F3D, #8C3BFF, #5900D6, #21354E, #15121A is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #694f3d; --color-2: #8c3bff; --color-3: #5900d6; --color-4: #21354e; --color-5: #15121a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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