#80A8CB + #A9A5C0 + #C9AE9A + #CDC683 + #BBDD5A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#80A8CB

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#80A8CB

RGB

rgb(128, 168, 203)

HSL

hsl(208, 42%, 65%)

HSB

hsb(208, 37%, 80%)

CMYK

cmyk(37%, 17%, 0%, 20%)

Oklch

oklch(71.5% 0.067 245.3)

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

#A9A5C0

Wisteria · DarkGray · Cobalt Blue

HEX

#A9A5C0

RGB

rgb(169, 165, 192)

HSL

hsl(249, 18%, 70%)

HSB

hsb(249, 14%, 75%)

CMYK

cmyk(12%, 14%, 0%, 25%)

Oklch

oklch(73.4% 0.039 292.2)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#C9AE9A

Apricot · Tan · Warm Sun

HEX

#C9AE9A

RGB

rgb(201, 174, 154)

HSL

hsl(26, 30%, 70%)

HSB

hsb(26, 23%, 79%)

CMYK

cmyk(0%, 13%, 23%, 21%)

Oklch

oklch(76.9% 0.042 58.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CDC683

Fresh Green · Tan · Sunflower

HEX

#CDC683

RGB

rgb(205, 198, 131)

HSL

hsl(54, 43%, 66%)

HSB

hsb(54, 36%, 80%)

CMYK

cmyk(0%, 3%, 36%, 20%)

Oklch

oklch(81.7% 0.087 103.0)

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

#BBDD5A

Willow Green · GreenYellow · Apple Green

HEX

#BBDD5A

RGB

rgb(187, 221, 90)

HSL

hsl(76, 66%, 61%)

HSB

hsb(76, 59%, 87%)

CMYK

cmyk(15%, 0%, 59%, 13%)

Oklch

oklch(84.7% 0.161 122.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

80A8CB

CBA380

Analogous

80CBC9

80A8CB

8083CB

Triadic

80A8CB

CB80A8

A8CB80

Split-Comp.

80A8CB

CB8083

CBC980

Tetradic

80A8CB

C980CB

CBA380

83CB80

Contrast Matrix WCAG 2.1 Contrast

80A8CB	A9A5C0	C9AE9A	CDC683	BBDD5A
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.4 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.5 Fail	1.4 Fail	1.1 Fail	—

White BG

2.5Fail

2.4Fail

2.1Fail

1.7Fail

1.5Fail

Black BG

8.4AAA

8.8AAA

10.0AAA

12.0AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9192C3

A7A7B9

BDBD9F

CACA93

CACA7A

Deuteranopia

8F8CC1

A8A8B8

BFC1A0

CACB97

C8C581

Tritanopia

82BCBA

A9B4B3

C8A3A4

CDA0A3

BD9398

Achromatopsia

A0A0A0

A9A9A9

B4B4B4

C0C0C0

C4C4C4

Shades & Tints Shades & Tints

#80A8CB

Dark

Light

#A9A5C0

Dark

Light

#C9AE9A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #80a8cb;
  --color-2: #a9a5c0;
  --color-3: #c9ae9a;
  --color-4: #cdc683;
  --color-5: #bbdd5a;
}

SCSS

$color-1: #80a8cb;
$color-2: #a9a5c0;
$color-3: #c9ae9a;
$color-4: #cdc683;
$color-5: #bbdd5a;

TAILWIND

colors: {
  'brand-1': '#80a8cb',
  'brand-2': '#a9a5c0',
  'brand-3': '#c9ae9a',
  'brand-4': '#cdc683',
  'brand-5': '#bbdd5a',
}

RGB Array

[128, 168, 203], [169, 165, 192], [201, 174, 154], [205, 198, 131], [187, 221, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #80A8CB, #A9A5C0, #C9AE9A, #CDC683, #BBDD5A 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: #80a8cb; --color-2: #a9a5c0; --color-3: #c9ae9a; --color-4: #cdc683; --color-5: #bbdd5a. 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