#7B6B96 + #BA758F + #F2AC72 + #D4CE9F + #93D5ED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7B6B96

Deep Indigo · SlateGray · Violet

HEX

#7B6B96

RGB

rgb(123, 107, 150)

HSL

hsl(262, 17%, 50%)

HSB

hsb(262, 29%, 59%)

CMYK

cmyk(18%, 29%, 0%, 41%)

Oklch

oklch(55.9% 0.068 301.3)

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

#BA758F

Dark Violet · LightCoral · Rose Pink

HEX

#BA758F

RGB

rgb(186, 117, 143)

HSL

hsl(337, 33%, 59%)

HSB

hsb(337, 37%, 73%)

CMYK

cmyk(0%, 37%, 23%, 27%)

Oklch

oklch(64.3% 0.092 355.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F2AC72

Apricot · LightSalmon · Warm Sun

HEX

#F2AC72

RGB

rgb(242, 172, 114)

HSL

hsl(27, 83%, 70%)

HSB

hsb(27, 53%, 95%)

CMYK

cmyk(0%, 29%, 53%, 5%)

Oklch

oklch(79.9% 0.111 59.9)

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

#D4CE9F

Fresh Green · Tan · Sunflower

HEX

#D4CE9F

RGB

rgb(212, 206, 159)

HSL

hsl(53, 38%, 73%)

HSB

hsb(53, 25%, 83%)

CMYK

cmyk(0%, 3%, 25%, 17%)

Oklch

oklch(84.5% 0.063 101.5)

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

#93D5ED

Sky Blue · SkyBlue · Lake Green

HEX

#93D5ED

RGB

rgb(147, 213, 237)

HSL

hsl(196, 71%, 75%)

HSB

hsb(196, 38%, 93%)

CMYK

cmyk(38%, 10%, 0%, 7%)

Oklch

oklch(83.7% 0.074 222.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B6B96

85956A

Analogous

6A7095

7B6B96

8F6A95

Triadic

7B6B96

957A6A

6A957A

Split-Comp.

7B6B96

958F6A

70956A

Tetradic

7B6B96

956A70

85956A

6A958F

Contrast Matrix WCAG 2.1 Contrast

7B6B96	BA758F	F2AC72	D4CE9F	93D5ED
—	1.4 Fail	2.5 Fail	3.0 Fail	3.0 Fail
1.4 Fail	—	1.8 Fail	2.2 Fail	2.2 Fail
2.5 Fail	1.8 Fail	—	1.2 Fail	1.2 Fail
3.0 Fail	2.2 Fail	1.2 Fail	—	1.0 Fail
3.0 Fail	2.2 Fail	1.2 Fail	1.0 Fail	—

White BG

4.8AA

3.5AA Large

1.9Fail

1.6Fail

Black BG

4.4AA Large

6.0AA

10.9AAA

13.1AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74748C

9C9C89

D4D380

D1D1AA

B0B0E7

Deuteranopia

757689

A0A587

D8DD83

D2D2AD

ACA7E6

Tritanopia

7A8382

B78483

EE8B8E

D4B3B5

96E3E2

Achromatopsia

757575

8D8D8D

BABABA

CACACA

C4C4C4

Shades & Tints Shades & Tints

#7B6B96

Dark

Light

#BA758F

Dark

Light

#F2AC72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b6b96;
  --color-2: #ba758f;
  --color-3: #f2ac72;
  --color-4: #d4ce9f;
  --color-5: #93d5ed;
}

SCSS

$color-1: #7b6b96;
$color-2: #ba758f;
$color-3: #f2ac72;
$color-4: #d4ce9f;
$color-5: #93d5ed;

TAILWIND

colors: {
  'brand-1': '#7b6b96',
  'brand-2': '#ba758f',
  'brand-3': '#f2ac72',
  'brand-4': '#d4ce9f',
  'brand-5': '#93d5ed',
}

RGB Array

[123, 107, 150], [186, 117, 143], [242, 172, 114], [212, 206, 159], [147, 213, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B6B96, #BA758F, #F2AC72, #D4CE9F, #93D5ED 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: #7b6b96; --color-2: #ba758f; --color-3: #f2ac72; --color-4: #d4ce9f; --color-5: #93d5ed. 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