#D2256B + #65688A + #4ABA98 + #ADDC60 + #AFB7B3 · 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

#D2256B

Dark Violet · MediumVioletRed · Camellia

HEX

#D2256B

RGB

rgb(210, 37, 107)

HSL

hsl(336, 70%, 48%)

HSB

hsb(336, 82%, 82%)

CMYK

cmyk(0%, 82%, 49%, 18%)

Oklch

oklch(57.1% 0.209 3.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#65688A

Indigo · SlateGray · Navy Blue

HEX

#65688A

RGB

rgb(101, 104, 138)

HSL

hsl(235, 15%, 47%)

HSB

hsb(235, 27%, 54%)

CMYK

cmyk(27%, 25%, 0%, 46%)

Oklch

oklch(52.8% 0.053 280.5)

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

#4ABA98

Mineral Blue · CadetBlue · Lake Green

HEX

#4ABA98

RGB

rgb(74, 186, 152)

HSL

hsl(162, 45%, 51%)

HSB

hsb(162, 60%, 73%)

CMYK

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

Oklch

oklch(71.5% 0.114 169.9)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#ADDC60

Willow Green · LightGreen · Apple Green

HEX

#ADDC60

RGB

rgb(173, 220, 96)

HSL

hsl(83, 64%, 62%)

HSB

hsb(83, 56%, 86%)

CMYK

cmyk(21%, 0%, 56%, 14%)

Oklch

oklch(83.6% 0.161 127.0)

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

#AFB7B3

Ash · DarkGray · Silver Sand

HEX

#AFB7B3

RGB

rgb(175, 183, 179)

HSL

hsl(150, 5%, 70%)

HSB

hsb(150, 4%, 72%)

CMYK

cmyk(4%, 0%, 2%, 28%)

Oklch

oklch(77.2% 0.011 164.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2256B

25D08C

Analogous

D025BF

D2256B

D03625

Triadic

D2256B

69D025

2569D0

Split-Comp.

D2256B

25D036

25BFD0

Tetradic

D2256B

BFD025

25D08C

3625D0

Contrast Matrix WCAG 2.1 Contrast

D2256B	65688A	4ABA98	ADDC60	AFB7B3
—	1.1 Fail	2.1 Fail	3.1 AA Large	2.4 Fail
1.1 Fail	—	2.2 Fail	3.4 AA Large	2.6 Fail
2.1 Fail	2.2 Fail	—	1.5 Fail	1.2 Fail
3.1 AA Large	3.4 AA Large	1.5 Fail	—	1.3 Fail
2.4 Fail	2.6 Fail	1.2 Fail	1.3 Fail	—

White BG

5.0AA

5.4AA

2.4Fail

1.6Fail

2.0Fail

Black BG

4.2AA Large

3.9AA Large

8.8AAA

13.2AAA

10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

87865A

666682

7A7CA0

C1C27E

B2B3B4

Deuteranopia

919E56

666680

746CA2

BFBB85

B2B1B4

Tritanopia

C94D4A

657B7A

50A7A8

AF969B

AFB5B5

Achromatopsia

616161

6B6B6B

959595

C0C0C0

B4B4B4

Shades & Tints Shades & Tints

#D2256B

Dark

Light

#65688A

Dark

Light

#4ABA98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2256b;
  --color-2: #65688a;
  --color-3: #4aba98;
  --color-4: #addc60;
  --color-5: #afb7b3;
}

SCSS

$color-1: #d2256b;
$color-2: #65688a;
$color-3: #4aba98;
$color-4: #addc60;
$color-5: #afb7b3;

TAILWIND

colors: {
  'brand-1': '#d2256b',
  'brand-2': '#65688a',
  'brand-3': '#4aba98',
  'brand-4': '#addc60',
  'brand-5': '#afb7b3',
}

RGB Array

[210, 37, 107], [101, 104, 138], [74, 186, 152], [173, 220, 96], [175, 183, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #D2256B, #65688A, #4ABA98, #ADDC60, #AFB7B3 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: #d2256b; --color-2: #65688a; --color-3: #4aba98; --color-4: #addc60; --color-5: #afb7b3. 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