#BA988A + #AA9BCA + #98AAE7 + #7ABBE7 + #76D6D6 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BA988A

Apricot · Tan · Warm Sun

HEX

#BA988A

RGB

rgb(186, 152, 138)

HSL

hsl(18, 26%, 64%)

HSB

hsb(18, 26%, 73%)

CMYK

cmyk(0%, 18%, 26%, 27%)

Oklch

oklch(70.7% 0.046 43.6)

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

#AA9BCA

Wisteria · DarkGray · Cobalt Blue

HEX

#AA9BCA

RGB

rgb(170, 155, 202)

HSL

hsl(259, 31%, 70%)

HSB

hsb(259, 23%, 79%)

CMYK

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

Oklch

oklch(71.9% 0.069 299.3)

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

#98AAE7

Azure · LightSteelBlue · Cobalt Blue

HEX

#98AAE7

RGB

rgb(152, 170, 231)

HSL

hsl(226, 62%, 75%)

HSB

hsb(226, 34%, 91%)

CMYK

cmyk(34%, 26%, 0%, 9%)

Oklch

oklch(74.7% 0.091 271.4)

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

#7ABBE7

Sky Blue · SkyBlue · Cobalt Blue

HEX

#7ABBE7

RGB

rgb(122, 187, 231)

HSL

hsl(204, 69%, 69%)

HSB

hsb(204, 47%, 91%)

CMYK

cmyk(47%, 19%, 0%, 9%)

Oklch

oklch(76.5% 0.092 239.2)

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

#76D6D6

Sky Blue · SkyBlue · Lake Green

HEX

#76D6D6

RGB

rgb(118, 214, 214)

HSL

hsl(180, 54%, 65%)

HSB

hsb(180, 45%, 84%)

CMYK

cmyk(45%, 0%, 0%, 16%)

Oklch

oklch(81.8% 0.091 195.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA988A

8BADBB

Analogous

BB8B95

BA988A

BBB28B

Triadic

BA988A

8BBB9A

9A8BBB

Split-Comp.

BA988A

8BBBB2

8B95BB

Tetradic

BA988A

95BB8B

8BADBB

B28BBB

Contrast Matrix WCAG 2.1 Contrast

BA988A	AA9BCA	98AAE7	7ABBE7	76D6D6
—	1.0 Fail	1.2 Fail	1.3 Fail	1.6 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

2.6Fail

2.5Fail

2.3Fail

2.1Fail

1.7Fail

Black BG

7.9AAA

8.3AAA

9.2AAA

10.1AAA

12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAB8D

A4A3BF

A0A0D8

9697DC

A0A0D6

Deuteranopia

ADB08E

A4A6BC

9F9DD5

928EDA

9A93D6

Tritanopia

B89091

A9B6B4

99CDCA

7DD4D2

7BD6D6

Achromatopsia

A1A1A1

A5A5A5

ACACAC

ADADAD

B9B9B9

Shades & Tints Shades & Tints

#BA988A

Dark

Light

#AA9BCA

Dark

Light

#98AAE7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba988a;
  --color-2: #aa9bca;
  --color-3: #98aae7;
  --color-4: #7abbe7;
  --color-5: #76d6d6;
}

SCSS

$color-1: #ba988a;
$color-2: #aa9bca;
$color-3: #98aae7;
$color-4: #7abbe7;
$color-5: #76d6d6;

TAILWIND

colors: {
  'brand-1': '#ba988a',
  'brand-2': '#aa9bca',
  'brand-3': '#98aae7',
  'brand-4': '#7abbe7',
  'brand-5': '#76d6d6',
}

RGB Array

[186, 152, 138], [170, 155, 202], [152, 170, 231], [122, 187, 231], [118, 214, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #BA988A, #AA9BCA, #98AAE7, #7ABBE7, #76D6D6 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: #ba988a; --color-2: #aa9bca; --color-3: #98aae7; --color-4: #7abbe7; --color-5: #76d6d6. 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 space-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