← Back to Editor

#22898D · #527C7C · #755E86 · #884C97 · #7C228D

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

#22898D

Lake Blue · Teal · Mint Ice

HEX
#22898D
RGB
rgb(34, 137, 141)
HSL
hsl(182, 61%, 34%)
HSB
hsb(182, 76%, 55%)
CMYK
cmyk(76%, 3%, 0%, 45%)
Oklch
oklch(57.6% 0.089 198.9)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#527C7C

Slate Blue · DimGray · Mint Ice

HEX
#527C7C
RGB
rgb(82, 124, 124)
HSL
hsl(180, 20%, 40%)
HSB
hsb(180, 34%, 49%)
CMYK
cmyk(34%, 0%, 0%, 51%)
Oklch
oklch(55.6% 0.047 195.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#755E86

Dark Plum · DimGray · Violet

HEX
#755E86
RGB
rgb(117, 94, 134)
HSL
hsl(274, 18%, 45%)
HSB
hsb(274, 30%, 53%)
CMYK
cmyk(13%, 30%, 0%, 47%)
Oklch
oklch(52.0% 0.067 310.3)

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

#884C97

Dark Plum · Gray · Violet

HEX
#884C97
RGB
rgb(136, 76, 151)
HSL
hsl(288, 33%, 45%)
HSB
hsb(288, 50%, 59%)
CMYK
cmyk(10%, 50%, 0%, 41%)
Oklch
oklch(51.8% 0.131 319.4)

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

#7C228D

Royal Purple · Purple · Eggplant

HEX
#7C228D
RGB
rgb(124, 34, 141)
HSL
hsl(290, 61%, 34%)
HSB
hsb(290, 76%, 55%)
CMYK
cmyk(12%, 76%, 0%, 45%)
Oklch
oklch(44.2% 0.177 320.7)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22898D
8C2522

Analogous

228C5A
22898D
22538C

Triadic

22898D
8C2288
888C22

Split-Comp.

22898D
8C2253
8C5A22

Tetradic

22898D
5A228C
8C2522
538C22

Contrast Matrix WCAG 2.1 Contrast

22898D
527C7C
755E86
884C97
7C228D
—
1.1
Fail
1.4
Fail
1.4
Fail
2.0
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.0
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.0
Fail
—
1.4
Fail
2.0
Fail
1.8
Fail
1.5
Fail
1.4
Fail
—
White BG
4.2AA Large
4.6AA
5.7AA
6.0AA
8.5AAA
Black BG
5.0AA
4.5AA
3.7AA Large
3.5AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F508C
64657C
6B6B7C
6E6D85
555473

Deuteranopia

49418C
625F7C
6C6E7A
727681
5A616D

Tritanopia

278B8B
547C7C
747573
857773
785F5A

Achromatopsia

6B6B6B
6F6F6F
696969
666666
494949

Shades & Tints Shades & Tints

#22898D

Dark
Light

#527C7C

Dark
Light

#755E86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22898d;
  --color-2: #527c7c;
  --color-3: #755e86;
  --color-4: #884c97;
  --color-5: #7c228d;
}

SCSS

$color-1: #22898d;
$color-2: #527c7c;
$color-3: #755e86;
$color-4: #884c97;
$color-5: #7c228d;

TAILWIND

colors: {
  'brand-1': '#22898d',
  'brand-2': '#527c7c',
  'brand-3': '#755e86',
  'brand-4': '#884c97',
  'brand-5': '#7c228d',
}

RGB Array

[34, 137, 141], [82, 124, 124], [117, 94, 134], [136, 76, 151], [124, 34, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22898D, #527C7C, #755E86, #884C97, #7C228D 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: #22898d; --color-2: #527c7c; --color-3: #755e86; --color-4: #884c97; --color-5: #7c228d. 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