#486C8B + #A9708B + #C59386 + #CBBF9B + #C9D0A1 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#486C8B

Slate Blue · SlateGray · Navy Blue

HEX

#486C8B

RGB

rgb(72, 108, 139)

HSL

hsl(208, 32%, 41%)

HSB

hsb(208, 48%, 55%)

CMYK

cmyk(48%, 22%, 0%, 45%)

Oklch

oklch(51.7% 0.064 245.5)

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

#A9708B

Dark Violet · Gray · Rose Pink

HEX

#A9708B

RGB

rgb(169, 112, 139)

HSL

hsl(332, 25%, 55%)

HSB

hsb(332, 34%, 66%)

CMYK

cmyk(0%, 34%, 18%, 34%)

Oklch

oklch(61.3% 0.080 349.8)

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

#C59386

Peach Pink · Tan · Coral Red

HEX

#C59386

RGB

rgb(197, 147, 134)

HSL

hsl(12, 35%, 65%)

HSB

hsb(12, 32%, 77%)

CMYK

cmyk(0%, 25%, 32%, 23%)

Oklch

oklch(70.8% 0.064 35.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CBBF9B

Ginger · Tan · Sunflower

HEX

#CBBF9B

RGB

rgb(203, 191, 155)

HSL

hsl(45, 32%, 70%)

HSB

hsb(45, 24%, 80%)

CMYK

cmyk(0%, 6%, 24%, 20%)

Oklch

oklch(80.5% 0.050 91.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C9D0A1

Fresh Green · Silver · Sunflower

HEX

#C9D0A1

RGB

rgb(201, 208, 161)

HSL

hsl(69, 33%, 72%)

HSB

hsb(69, 23%, 82%)

CMYK

cmyk(3%, 0%, 23%, 18%)

Oklch

oklch(84.0% 0.063 114.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

486C8B

8A6647

Analogous

478A88

486C8B

47498A

Triadic

486C8B

8A476B

6B8A47

Split-Comp.

486C8B

8A4749

8A8847

Tetradic

486C8B

88478A

8A6647

498A47

Contrast Matrix WCAG 2.1 Contrast

486C8B	A9708B	C59386	CBBF9B	C9D0A1
—	1.4 Fail	2.1 Fail	3.0 AA Large	3.4 AA Large
1.4 Fail	—	1.5 Fail	2.1 Fail	2.4 Fail
2.1 Fail	1.5 Fail	—	1.5 Fail	1.6 Fail
3.0 AA Large	2.1 Fail	1.5 Fail	—	1.1 Fail
3.4 AA Large	2.4 Fail	1.6 Fail	1.1 Fail	—

White BG

5.5AA

3.9AA Large

2.7Fail

1.8Fail

1.6Fail

Black BG

3.8AA Large

5.4AA

7.9AAA

11.5AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

585883

909084

AFAF89

C6C6A4

CCCCAC

Deuteranopia

565382

949883

B2B68A

C7C7A6

CCCBAF

Tritanopia

4A7E7C

A67F7E

C28C8C

CAABAC

C9B5B7

Achromatopsia

656565

848484

A0A0A0

BEBEBE

C9C9C9

Shades & Tints Shades & Tints

#486C8B

Dark

Light

#A9708B

Dark

Light

#C59386

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #486c8b;
  --color-2: #a9708b;
  --color-3: #c59386;
  --color-4: #cbbf9b;
  --color-5: #c9d0a1;
}

SCSS

$color-1: #486c8b;
$color-2: #a9708b;
$color-3: #c59386;
$color-4: #cbbf9b;
$color-5: #c9d0a1;

TAILWIND

colors: {
  'brand-1': '#486c8b',
  'brand-2': '#a9708b',
  'brand-3': '#c59386',
  'brand-4': '#cbbf9b',
  'brand-5': '#c9d0a1',
}

RGB Array

[72, 108, 139], [169, 112, 139], [197, 147, 134], [203, 191, 155], [201, 208, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #486C8B, #A9708B, #C59386, #CBBF9B, #C9D0A1 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: #486c8b; --color-2: #a9708b; --color-3: #c59386; --color-4: #cbbf9b; --color-5: #c9d0a1. 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 pastel-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