#539FA2 + #72B1A4 + #ABCCB1 + #C4DBB4 + #D4E2B6 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#539FA2

Slate Blue · CadetBlue · Mint Ice

HEX

#539FA2

RGB

rgb(83, 159, 162)

HSL

hsl(182, 32%, 48%)

HSB

hsb(182, 49%, 64%)

CMYK

cmyk(49%, 2%, 0%, 36%)

Oklch

oklch(65.5% 0.075 198.9)

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

#72B1A4

Mineral Blue · CadetBlue · Lake Green

HEX

#72B1A4

RGB

rgb(114, 177, 164)

HSL

hsl(168, 29%, 57%)

HSB

hsb(168, 36%, 69%)

CMYK

cmyk(36%, 0%, 7%, 31%)

Oklch

oklch(71.4% 0.068 179.8)

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

#ABCCB1

Celadon · Silver · Apple Green

HEX

#ABCCB1

RGB

rgb(171, 204, 177)

HSL

hsl(131, 24%, 74%)

HSB

hsb(131, 16%, 80%)

CMYK

cmyk(16%, 0%, 13%, 20%)

Oklch

oklch(81.3% 0.052 150.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C4DBB4

Celadon · Silver · Apple Green

HEX

#C4DBB4

RGB

rgb(196, 219, 180)

HSL

hsl(95, 35%, 78%)

HSB

hsb(95, 18%, 86%)

CMYK

cmyk(11%, 0%, 18%, 14%)

Oklch

oklch(86.4% 0.058 132.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D4E2B6

Willow Green · LightGray · Apple Green

HEX

#D4E2B6

RGB

rgb(212, 226, 182)

HSL

hsl(79, 43%, 80%)

HSB

hsb(79, 19%, 89%)

CMYK

cmyk(6%, 0%, 19%, 11%)

Oklch

oklch(89.1% 0.060 122.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

539FA2

A25653

Analogous

53A27D

539FA2

5378A2

Triadic

539FA2

A2539F

9FA253

Split-Comp.

539FA2

A25378

A27D53

Tetradic

539FA2

7D53A2

A25653

78A253

Contrast Matrix WCAG 2.1 Contrast

539FA2	72B1A4	ABCCB1	C4DBB4	D4E2B6
—	1.2 Fail	1.8 Fail	2.1 Fail	2.2 Fail
1.2 Fail	—	1.4 Fail	1.7 Fail	1.8 Fail
1.8 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.1 Fail
2.2 Fail	1.8 Fail	1.3 Fail	1.1 Fail	—

White BG

3.1AA Large

2.5Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

6.8AA

8.5AAA

12.0AAA

14.1AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475A1

8D8EA7

B9BAB8

CECEBD

DADAC1

Deuteranopia

706AA1

8A85A8

B7B5B9

CDCBC0

D9D8C3

Tritanopia

57A1A1

75AAAA

ADBDBE

C5C5C7

D5C9CB

Achromatopsia

898989

9D9D9D

BFBFBF

D0D0D0

D9D9D9

Shades & Tints Shades & Tints

#539FA2

Dark

Light

#72B1A4

Dark

Light

#ABCCB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #539fa2;
  --color-2: #72b1a4;
  --color-3: #abccb1;
  --color-4: #c4dbb4;
  --color-5: #d4e2b6;
}

SCSS

$color-1: #539fa2;
$color-2: #72b1a4;
$color-3: #abccb1;
$color-4: #c4dbb4;
$color-5: #d4e2b6;

TAILWIND

colors: {
  'brand-1': '#539fa2',
  'brand-2': '#72b1a4',
  'brand-3': '#abccb1',
  'brand-4': '#c4dbb4',
  'brand-5': '#d4e2b6',
}

RGB Array

[83, 159, 162], [114, 177, 164], [171, 204, 177], [196, 219, 180], [212, 226, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #539FA2, #72B1A4, #ABCCB1, #C4DBB4, #D4E2B6 is ideal for: health products, baby brands, fresh-style blogs. 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: #539fa2; --color-2: #72b1a4; --color-3: #abccb1; --color-4: #c4dbb4; --color-5: #d4e2b6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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