#CDDD6E + #9EC657 + #5D99A5 + #477192 + #60487F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CDDD6E

Fresh Green · Khaki · Sunflower

HEX

#CDDD6E

RGB

rgb(205, 221, 110)

HSL

hsl(69, 62%, 65%)

HSB

hsb(69, 50%, 87%)

CMYK

cmyk(7%, 0%, 50%, 13%)

Oklch

oklch(86.2% 0.137 116.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9EC657

Grass Green · DarkSeaGreen · Olive Green

HEX

#9EC657

RGB

rgb(158, 198, 87)

HSL

hsl(82, 49%, 56%)

HSB

hsb(82, 56%, 78%)

CMYK

cmyk(20%, 0%, 56%, 22%)

Oklch

oklch(77.4% 0.146 126.2)

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

#5D99A5

Slate Blue · CadetBlue · Lake Green

HEX

#5D99A5

RGB

rgb(93, 153, 165)

HSL

hsl(190, 29%, 51%)

HSB

hsb(190, 44%, 65%)

CMYK

cmyk(44%, 7%, 0%, 35%)

Oklch

oklch(64.7% 0.065 211.8)

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

#477192

Slate Blue · SteelBlue · Navy Blue

HEX

#477192

RGB

rgb(71, 113, 146)

HSL

hsl(206, 35%, 43%)

HSB

hsb(206, 51%, 57%)

CMYK

cmyk(51%, 23%, 0%, 43%)

Oklch

oklch(53.2% 0.070 243.3)

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

#60487F

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#60487F

RGB

rgb(96, 72, 127)

HSL

hsl(266, 28%, 39%)

HSB

hsb(266, 43%, 50%)

CMYK

cmyk(24%, 43%, 0%, 50%)

Oklch

oklch(45.1% 0.091 303.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDDD6E

7F6EDD

Analogous

DDB66E

CDDD6E

95DD6E

Triadic

CDDD6E

6ECCDD

DD6ECC

Split-Comp.

CDDD6E

6E95DD

B66EDD

Tetradic

CDDD6E

6EDDB6

7F6EDD

DD6E95

Contrast Matrix WCAG 2.1 Contrast

CDDD6E	9EC657	5D99A5	477192	60487F
—	1.3 Fail	2.2 Fail	3.5 AA Large	5.2 AA
1.3 Fail	—	1.6 Fail	2.6 Fail	3.9 AA Large
2.2 Fail	1.6 Fail	—	1.6 Fail	2.4 Fail
3.5 AA Large	2.6 Fail	1.6 Fail	—	1.5 Fail
5.2 AA	3.9 AA Large	2.4 Fail	1.5 Fail	—

White BG

1.5Fail

2.0Fail

3.2AA Large

5.2AA

7.7AAA

Black BG

14.2AAA

10.7AAA

6.6AA

4.0AA Large

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D489

AFB072

7778A2

595A8A

565572

Deuteranopia

D3D28F

ADAA78

746FA1

575488

57596E

Tritanopia

CE9EA3

A0878C

60A09F

498482

5F6765

Achromatopsia

CCCCCC

ADADAD

888888

686868

555555

Shades & Tints Shades & Tints

#CDDD6E

Dark

Light

#9EC657

Dark

Light

#5D99A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cddd6e;
  --color-2: #9ec657;
  --color-3: #5d99a5;
  --color-4: #477192;
  --color-5: #60487f;
}

SCSS

$color-1: #cddd6e;
$color-2: #9ec657;
$color-3: #5d99a5;
$color-4: #477192;
$color-5: #60487f;

TAILWIND

colors: {
  'brand-1': '#cddd6e',
  'brand-2': '#9ec657',
  'brand-3': '#5d99a5',
  'brand-4': '#477192',
  'brand-5': '#60487f',
}

RGB Array

[205, 221, 110], [158, 198, 87], [93, 153, 165], [71, 113, 146], [96, 72, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDDD6E, #9EC657, #5D99A5, #477192, #60487F is ideal for: corporate websites, product showcases, portfolios. 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: #cddd6e; --color-2: #9ec657; --color-3: #5d99a5; --color-4: #477192; --color-5: #60487f. 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 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