#71AFCC + #A0C6C2 + #D0DEB9 + #E2ED73 + #F5FD2D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#71AFCC

Sky Blue · CornflowerBlue · Lake Green

HEX

#71AFCC

RGB

rgb(113, 175, 204)

HSL

hsl(199, 47%, 62%)

HSB

hsb(199, 45%, 80%)

CMYK

cmyk(45%, 14%, 0%, 20%)

Oklch

oklch(72.3% 0.076 229.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A0C6C2

Jade · LightSteelBlue · Lake Green

HEX

#A0C6C2

RGB

rgb(160, 198, 194)

HSL

hsl(174, 25%, 70%)

HSB

hsb(174, 19%, 78%)

CMYK

cmyk(19%, 0%, 2%, 22%)

Oklch

oklch(79.8% 0.041 188.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D0DEB9

Willow Green · LightGray · Apple Green

HEX

#D0DEB9

RGB

rgb(208, 222, 185)

HSL

hsl(83, 36%, 80%)

HSB

hsb(83, 17%, 87%)

CMYK

cmyk(6%, 0%, 17%, 13%)

Oklch

oklch(88.0% 0.052 124.3)

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

#E2ED73

Fresh Green · Khaki · Sunflower

HEX

#E2ED73

RGB

rgb(226, 237, 115)

HSL

hsl(65, 77%, 69%)

HSB

hsb(65, 51%, 93%)

CMYK

cmyk(5%, 0%, 51%, 7%)

Oklch

oklch(91.3% 0.147 113.6)

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

#F5FD2D

Autumn Sage · Yellow · Sunflower

HEX

#F5FD2D

RGB

rgb(245, 253, 45)

HSL

hsl(62, 98%, 58%)

HSB

hsb(62, 82%, 99%)

CMYK

cmyk(3%, 0%, 82%, 1%)

Oklch

oklch(95.7% 0.203 112.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71AFCC

CC8D71

Analogous

71CCBB

71AFCC

7181CC

Triadic

71AFCC

CC71AF

AFCC71

Split-Comp.

71AFCC

CC7181

CCBB71

Tetradic

71AFCC

BB71CC

CC8D71

81CC71

Contrast Matrix WCAG 2.1 Contrast

71AFCC	A0C6C2	D0DEB9	E2ED73	F5FD2D
—	1.3 Fail	1.7 Fail	1.9 Fail	2.2 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.1 Fail
2.2 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

2.4Fail

1.8Fail

1.4Fail

1.3Fail

1.1Fail

Black BG

8.7AAA

11.4AAA

14.8AAA

16.6AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8CC5

B0B1C3

D6D6C2

E7E791

F8F95F

Deuteranopia

8884C3

AEABC3

D5D4C4

E6E598

F8F76B

Tritanopia

74BFBE

A2C4C4

D1C9CB

E3A8AD

F58790

Achromatopsia

A0A0A0

BABABA

D6D6D6

DCDCDC

E3E3E3

Shades & Tints Shades & Tints

#71AFCC

Dark

Light

#A0C6C2

Dark

Light

#D0DEB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71afcc;
  --color-2: #a0c6c2;
  --color-3: #d0deb9;
  --color-4: #e2ed73;
  --color-5: #f5fd2d;
}

SCSS

$color-1: #71afcc;
$color-2: #a0c6c2;
$color-3: #d0deb9;
$color-4: #e2ed73;
$color-5: #f5fd2d;

TAILWIND

colors: {
  'brand-1': '#71afcc',
  'brand-2': '#a0c6c2',
  'brand-3': '#d0deb9',
  'brand-4': '#e2ed73',
  'brand-5': '#f5fd2d',
}

RGB Array

[113, 175, 204], [160, 198, 194], [208, 222, 185], [226, 237, 115], [245, 253, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71AFCC, #A0C6C2, #D0DEB9, #E2ED73, #F5FD2D 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: #71afcc; --color-2: #a0c6c2; --color-3: #d0deb9; --color-4: #e2ed73; --color-5: #f5fd2d. 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 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