← Back to Editor

#006666 · #14825D · #B5F291 · #556482 · #663366

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 AppData Visualization

Color Details Color Details

#006666

Lake Blue · Teal · Peacock Green

HEX
#006666
RGB
rgb(0, 102, 102)
HSL
hsl(180, 100%, 20%)
HSB
hsb(180, 100%, 40%)
CMYK
cmyk(100%, 0%, 0%, 60%)
Oklch
oklch(46.2% 0.079 194.8)

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

#14825D

Mineral Blue · SeaGreen · Mint Ice

HEX
#14825D
RGB
rgb(20, 130, 93)
HSL
hsl(160, 73%, 29%)
HSB
hsb(160, 85%, 51%)
CMYK
cmyk(85%, 0%, 28%, 49%)
Oklch
oklch(54.0% 0.110 163.9)

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

#B5F291

Emerald · LightGreen · Apple Green

HEX
#B5F291
RGB
rgb(181, 242, 145)
HSL
hsl(98, 79%, 76%)
HSB
hsb(98, 40%, 95%)
CMYK
cmyk(25%, 0%, 40%, 5%)
Oklch
oklch(89.7% 0.141 134.6)

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

#556482

Indigo · DimGray · Navy Blue

HEX
#556482
RGB
rgb(85, 100, 130)
HSL
hsl(220, 21%, 42%)
HSB
hsb(220, 35%, 51%)
CMYK
cmyk(35%, 23%, 0%, 49%)
Oklch
oklch(50.3% 0.052 263.9)

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

#663366

Rose Purple · DarkSlateBlue · Eggplant

HEX
#663366
RGB
rgb(102, 51, 102)
HSL
hsl(300, 33%, 30%)
HSB
hsb(300, 50%, 40%)
CMYK
cmyk(0%, 50%, 0%, 60%)
Oklch
oklch(40.8% 0.102 327.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

006666
660000

Analogous

006633
006666
003366

Triadic

006666
660066
666600

Split-Comp.

006666
660033
663300

Tetradic

006666
330066
660000
336600

Contrast Matrix WCAG 2.1 Contrast

006666
14825D
B5F291
556482
663366
—
1.4
Fail
5.2
AA
1.1
Fail
1.4
Fail
1.4
Fail
—
3.7
AA Large
1.2
Fail
2.0
Fail
5.2
AA
3.7
AA Large
—
4.6
AA
7.2
AAA
1.1
Fail
1.2
Fail
4.6
AA
—
1.6
Fail
1.4
Fail
2.0
Fail
7.2
AAA
1.6
Fail
—
White BG
6.8AA
4.8AA
1.3Fail
5.9AA
9.4AAA
Black BG
3.1AA Large
4.4AA Large
16.1AAA
3.5AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2D66
444566
CFD0A8
5B5C7B
504F5A

Deuteranopia

261F66
3D3568
CCC7AE
5B5A79
535757

Tritanopia

056666
1A6D6F
B8BBBF
567574
63504E

Achromatopsia

484848
5D5D5D
D5D5D5
636363
484848

Shades & Tints Shades & Tints

#006666

Dark
Light

#14825D

Dark
Light

#B5F291

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #006666;
  --color-2: #14825d;
  --color-3: #b5f291;
  --color-4: #556482;
  --color-5: #663366;
}

SCSS

$color-1: #006666;
$color-2: #14825d;
$color-3: #b5f291;
$color-4: #556482;
$color-5: #663366;

TAILWIND

colors: {
  'brand-1': '#006666',
  'brand-2': '#14825d',
  'brand-3': '#b5f291',
  'brand-4': '#556482',
  'brand-5': '#663366',
}

RGB Array

[0, 102, 102], [20, 130, 93], [181, 242, 145], [85, 100, 130], [102, 51, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #006666, #14825D, #B5F291, #556482, #663366 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #006666; --color-2: #14825d; --color-3: #b5f291; --color-4: #556482; --color-5: #663366. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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