← Back to Editor

#6957B2 · #697292 · #698E80 · #69A770 · #69C34A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6957B2

Deep Indigo · SlateBlue · Navy Blue

HEX
#6957B2
RGB
rgb(105, 87, 178)
HSL
hsl(252, 37%, 52%)
HSB
hsb(252, 51%, 70%)
CMYK
cmyk(41%, 51%, 0%, 30%)
Oklch
oklch(51.9% 0.139 289.8)

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

#697292

Indigo · SlateGray · Navy Blue

HEX
#697292
RGB
rgb(105, 114, 146)
HSL
hsl(227, 16%, 49%)
HSB
hsb(227, 28%, 57%)
CMYK
cmyk(28%, 22%, 0%, 43%)
Oklch
oklch(55.7% 0.051 272.4)

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

#698E80

Mineral Blue · SlateGray · Olive Green

HEX
#698E80
RGB
rgb(105, 142, 128)
HSL
hsl(157, 15%, 48%)
HSB
hsb(157, 26%, 56%)
CMYK
cmyk(26%, 0%, 10%, 44%)
Oklch
oklch(61.5% 0.046 169.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#69A770

Celadon · MediumSeaGreen · Olive Green

HEX
#69A770
RGB
rgb(105, 167, 112)
HSL
hsl(127, 26%, 53%)
HSB
hsb(127, 37%, 65%)
CMYK
cmyk(37%, 0%, 33%, 35%)
Oklch
oklch(67.2% 0.103 147.0)

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

#69C34A

Celadon · LimeGreen · Olive Green

HEX
#69C34A
RGB
rgb(105, 195, 74)
HSL
hsl(105, 50%, 53%)
HSB
hsb(105, 62%, 76%)
CMYK
cmyk(46%, 0%, 62%, 24%)
Oklch
oklch(73.6% 0.180 138.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6957B2
A0B257

Analogous

5772B2
6957B2
9757B2

Triadic

6957B2
B26957
57B269

Split-Comp.

6957B2
B29757
72B257

Tetradic

6957B2
B25772
A0B257
57B297

Contrast Matrix WCAG 2.1 Contrast

6957B2
697292
698E80
69A770
69C34A
—
1.2
Fail
1.6
Fail
2.0
Fail
2.6
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.6
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
White BG
5.8AA
4.7AA
3.6AA Large
2.9Fail
2.2Fail
Black BG
3.6AA Large
4.4AA Large
5.8AA
7.4AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

61619C
6D6D8A
797983
84847D
909167

Deuteranopia

626497
6C6C88
777484
807C81
8B846E

Tritanopia

688B87
698483
6B8687
6C888A
6E7E83

Achromatopsia

676767
737373
818181
8E8E8E
9A9A9A

Shades & Tints Shades & Tints

#6957B2

Dark
Light

#697292

Dark
Light

#698E80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6957b2;
  --color-2: #697292;
  --color-3: #698e80;
  --color-4: #69a770;
  --color-5: #69c34a;
}

SCSS

$color-1: #6957b2;
$color-2: #697292;
$color-3: #698e80;
$color-4: #69a770;
$color-5: #69c34a;

TAILWIND

colors: {
  'brand-1': '#6957b2',
  'brand-2': '#697292',
  'brand-3': '#698e80',
  'brand-4': '#69a770',
  'brand-5': '#69c34a',
}

RGB Array

[105, 87, 178], [105, 114, 146], [105, 142, 128], [105, 167, 112], [105, 195, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6957B2, #697292, #698E80, #69A770, #69C34A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #6957b2; --color-2: #697292; --color-3: #698e80; --color-4: #69a770; --color-5: #69c34a. 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. Restrained colors convey professionalism and trust. 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