← Back to Editor

#551BB3 · #268FBE · #2CB8B2 · #3DDB8F · #A9F04D

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#551BB3

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#551BB3
RGB
rgb(85, 27, 179)
HSL
hsl(263, 74%, 40%)
HSB
hsb(263, 85%, 70%)
CMYK
cmyk(53%, 85%, 0%, 30%)
Oklch
oklch(41.7% 0.212 291.2)

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

#268FBE

Lake Blue · SteelBlue · Mint Ice

HEX
#268FBE
RGB
rgb(38, 143, 190)
HSL
hsl(199, 67%, 45%)
HSB
hsb(199, 80%, 75%)
CMYK
cmyk(80%, 25%, 0%, 25%)
Oklch
oklch(61.4% 0.115 233.2)

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

#2CB8B2

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#2CB8B2
RGB
rgb(44, 184, 178)
HSL
hsl(177, 61%, 45%)
HSB
hsb(177, 76%, 72%)
CMYK
cmyk(76%, 0%, 3%, 28%)
Oklch
oklch(71.1% 0.113 190.5)

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

#3DDB8F

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#3DDB8F
RGB
rgb(61, 219, 143)
HSL
hsl(151, 69%, 55%)
HSB
hsb(151, 72%, 86%)
CMYK
cmyk(72%, 0%, 35%, 14%)
Oklch
oklch(79.3% 0.169 157.3)

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

#A9F04D

Willow Green · GreenYellow · Apple Green

HEX
#A9F04D
RGB
rgb(169, 240, 77)
HSL
hsl(86, 84%, 62%)
HSB
hsb(86, 68%, 94%)
CMYK
cmyk(30%, 0%, 68%, 6%)
Oklch
oklch(87.8% 0.203 130.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

551BB3
78B11B

Analogous

1B2CB1
551BB3
A01BB1

Triadic

551BB3
B1541B
1BB154

Split-Comp.

551BB3
B1A01B
2CB11B

Tetradic

551BB3
B11B2C
78B11B
1BB1A0

Contrast Matrix WCAG 2.1 Contrast

551BB3
268FBE
2CB8B2
3DDB8F
A9F04D
—
2.6
Fail
3.9
AA Large
5.3
AA
7.0
AA
2.6
Fail
—
1.5
Fail
2.0
Fail
2.7
Fail
3.9
AA Large
1.5
Fail
—
1.4
Fail
1.8
Fail
5.3
AA
2.0
Fail
1.4
Fail
—
1.3
Fail
7.0
AA
2.7
Fail
1.8
Fail
1.3
Fail
—
White BG
9.6AAA
3.6AA Large
2.4Fail
1.8Fail
1.4Fail
Black BG
2.2Fail
5.8AA
8.6AAA
11.7AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3B8E
5354B3
696AB3
8183A1
C8C874

Deuteranopia

3F4485
4D46B0
6156B4
786CA6
C4BE7E

Tritanopia

52716B
2BAAA8
33B5B5
45B0B3
AD949A

Achromatopsia

3E3E3E
757575
8D8D8D
A3A3A3
C8C8C8

Shades & Tints Shades & Tints

#551BB3

Dark
Light

#268FBE

Dark
Light

#2CB8B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #551bb3;
  --color-2: #268fbe;
  --color-3: #2cb8b2;
  --color-4: #3ddb8f;
  --color-5: #a9f04d;
}

SCSS

$color-1: #551bb3;
$color-2: #268fbe;
$color-3: #2cb8b2;
$color-4: #3ddb8f;
$color-5: #a9f04d;

TAILWIND

colors: {
  'brand-1': '#551bb3',
  'brand-2': '#268fbe',
  'brand-3': '#2cb8b2',
  'brand-4': '#3ddb8f',
  'brand-5': '#a9f04d',
}

RGB Array

[85, 27, 179], [38, 143, 190], [44, 184, 178], [61, 219, 143], [169, 240, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #551BB3, #268FBE, #2CB8B2, #3DDB8F, #A9F04D is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #551bb3; --color-2: #268fbe; --color-3: #2cb8b2; --color-4: #3ddb8f; --color-5: #a9f04d. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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