← Back to Editor

#9DC551 · #85AD3C · #3C81E4 · #AEDEFB · #FFFFFF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#9DC551

Grass Green · DarkSeaGreen · Olive Green

HEX
#9DC551
RGB
rgb(157, 197, 81)
HSL
hsl(81, 50%, 55%)
HSB
hsb(81, 59%, 77%)
CMYK
cmyk(20%, 0%, 59%, 23%)
Oklch
oklch(77.1% 0.151 125.8)

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

#85AD3C

Grass Green · Olive · Olive Green

HEX
#85AD3C
RGB
rgb(133, 173, 60)
HSL
hsl(81, 48%, 46%)
HSB
hsb(81, 65%, 68%)
CMYK
cmyk(23%, 0%, 65%, 32%)
Oklch
oklch(69.6% 0.147 126.6)

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

#3C81E4

Azure · DodgerBlue · Navy Blue

HEX
#3C81E4
RGB
rgb(60, 129, 228)
HSL
hsl(215, 76%, 56%)
HSB
hsb(215, 74%, 89%)
CMYK
cmyk(74%, 43%, 0%, 11%)
Oklch
oklch(60.9% 0.166 257.9)

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

#AEDEFB

Sky Blue · LightBlue · Sky Blue

HEX
#AEDEFB
RGB
rgb(174, 222, 251)
HSL
hsl(203, 91%, 83%)
HSB
hsb(203, 31%, 98%)
CMYK
cmyk(31%, 12%, 0%, 2%)
Oklch
oklch(87.7% 0.064 235.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DC551
7B53C6

Analogous

C6B453
9DC551
64C653

Triadic

9DC551
539DC6
C6539D

Split-Comp.

9DC551
5364C6
B453C6

Tetradic

9DC551
53C6B4
7B53C6
C65364

Contrast Matrix WCAG 2.1 Contrast

9DC551
85AD3C
3C81E4
AEDEFB
FFFFFF
—
1.3
Fail
1.9
Fail
1.4
Fail
2.0
Fail
1.3
Fail
—
1.5
Fail
1.8
Fail
2.6
Fail
1.9
Fail
1.5
Fail
—
2.7
Fail
3.9
AA Large
1.4
Fail
1.8
Fail
2.7
Fail
—
1.4
Fail
2.0
Fail
2.6
Fail
3.9
AA Large
1.4
Fail
—
White BG
2.0Fail
2.6Fail
3.9AA Large
1.4Fail
1.0Fail
Black BG
10.5AAA
8.0AAA
5.5AA
14.6AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAF6D
969757
5A5ACC
C3C3F4
FFFFFF

Deuteranopia

ACA974
94915E
5651C6
C0BCF2
FFFFFF

Tritanopia

9F8388
876D72
3FB9B5
B0EEED
FFFFFF

Achromatopsia

ACACAC
949494
787878
D3D3D3
FFFFFF

Shades & Tints Shades & Tints

#9DC551

Dark
Light

#85AD3C

Dark
Light

#3C81E4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dc551;
  --color-2: #85ad3c;
  --color-3: #3c81e4;
  --color-4: #aedefb;
  --color-5: #ffffff;
}

SCSS

$color-1: #9dc551;
$color-2: #85ad3c;
$color-3: #3c81e4;
$color-4: #aedefb;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#9dc551',
  'brand-2': '#85ad3c',
  'brand-3': '#3c81e4',
  'brand-4': '#aedefb',
  'brand-5': '#ffffff',
}

RGB Array

[157, 197, 81], [133, 173, 60], [60, 129, 228], [174, 222, 251], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DC551, #85AD3C, #3C81E4, #AEDEFB, #FFFFFF is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9dc551; --color-2: #85ad3c; --color-3: #3c81e4; --color-4: #aedefb; --color-5: #ffffff. 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. 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 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