← Back to Editor

#71AB83 · #6AA195 · #6A92A6 · #717BAB · #7760A6

spring

A 5-color spring 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

#71AB83

Celadon · DarkSeaGreen · Olive Green

HEX
#71AB83
RGB
rgb(113, 171, 131)
HSL
hsl(139, 26%, 56%)
HSB
hsb(139, 34%, 67%)
CMYK
cmyk(34%, 0%, 23%, 33%)
Oklch
oklch(69.0% 0.085 153.6)

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

#6AA195

Mineral Blue · CadetBlue · Lake Green

HEX
#6AA195
RGB
rgb(106, 161, 149)
HSL
hsl(167, 23%, 52%)
HSB
hsb(167, 34%, 63%)
CMYK
cmyk(34%, 0%, 7%, 37%)
Oklch
oklch(66.7% 0.061 179.1)

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

#6A92A6

Slate Blue · CadetBlue · Navy Blue

HEX
#6A92A6
RGB
rgb(106, 146, 166)
HSL
hsl(200, 25%, 53%)
HSB
hsb(200, 36%, 65%)
CMYK
cmyk(36%, 12%, 0%, 35%)
Oklch
oklch(63.8% 0.053 230.3)

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

#717BAB

Azure · LightSlateGray · Navy Blue

HEX
#717BAB
RGB
rgb(113, 123, 171)
HSL
hsl(230, 26%, 56%)
HSB
hsb(230, 34%, 67%)
CMYK
cmyk(34%, 28%, 0%, 33%)
Oklch
oklch(59.4% 0.074 274.8)

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

#7760A6

Deep Indigo · SlateGray · Violet

HEX
#7760A6
RGB
rgb(119, 96, 166)
HSL
hsl(260, 28%, 51%)
HSB
hsb(260, 42%, 65%)
CMYK
cmyk(28%, 42%, 0%, 35%)
Oklch
oklch(54.2% 0.109 297.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71AB83
AC7299

Analogous

7CAC72
71AB83
72ACA1

Triadic

71AB83
8472AC
AC8472

Split-Comp.

71AB83
A172AC
AC727C

Tetradic

71AB83
727CAC
AC7299
ACA172

Contrast Matrix WCAG 2.1 Contrast

71AB83
6AA195
6A92A6
717BAB
7760A6
—
1.1
Fail
1.3
Fail
1.5
Fail
2.0
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
1.8
Fail
1.6
Fail
1.3
Fail
—
White BG
2.7Fail
2.9Fail
3.3AA Large
4.1AA Large
5.2AA
Black BG
7.9AAA
7.1AAA
6.3AA
5.1AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8B8D
828298
7B7CA1
75759F
6D6D95

Deuteranopia

87828F
7F7A99
7976A0
75749D
6E7091

Tritanopia

749496
6D9A9B
6C9D9D
729694
768885

Achromatopsia

959595
8F8F8F
888888
7D7D7D
6F6F6F

Shades & Tints Shades & Tints

#71AB83

Dark
Light

#6AA195

Dark
Light

#6A92A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71ab83;
  --color-2: #6aa195;
  --color-3: #6a92a6;
  --color-4: #717bab;
  --color-5: #7760a6;
}

SCSS

$color-1: #71ab83;
$color-2: #6aa195;
$color-3: #6a92a6;
$color-4: #717bab;
$color-5: #7760a6;

TAILWIND

colors: {
  'brand-1': '#71ab83',
  'brand-2': '#6aa195',
  'brand-3': '#6a92a6',
  'brand-4': '#717bab',
  'brand-5': '#7760a6',
}

RGB Array

[113, 171, 131], [106, 161, 149], [106, 146, 166], [113, 123, 171], [119, 96, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #71AB83, #6AA195, #6A92A6, #717BAB, #7760A6 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: #71ab83; --color-2: #6aa195; --color-3: #6a92a6; --color-4: #717bab; --color-5: #7760a6. 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 spring-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