← Back to Editor

#FFD4D4 · #9DB4AB · #303030 · #E29E95 · #FD6784

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFD4D4

Peach Pink · Pink · Cherry Blossom

HEX
#FFD4D4
RGB
rgb(255, 212, 212)
HSL
hsl(0, 100%, 92%)
HSB
hsb(0, 17%, 100%)
CMYK
cmyk(0%, 17%, 17%, 0%)
Oklch
oklch(90.7% 0.048 18.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#9DB4AB

Jade · DarkGray · Apple Green

HEX
#9DB4AB
RGB
rgb(157, 180, 171)
HSL
hsl(157, 13%, 66%)
HSB
hsb(157, 13%, 71%)
CMYK
cmyk(13%, 0%, 5%, 29%)
Oklch
oklch(75.0% 0.028 170.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#303030

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#303030
RGB
rgb(48, 48, 48)
HSL
hsl(0, 0%, 19%)
HSB
hsb(0, 0%, 19%)
CMYK
cmyk(0%, 0%, 0%, 81%)
Oklch
oklch(30.9% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#E29E95

Peach Pink · Tan · Coral Red

HEX
#E29E95
RGB
rgb(226, 158, 149)
HSL
hsl(7, 57%, 74%)
HSB
hsb(7, 34%, 89%)
CMYK
cmyk(0%, 30%, 34%, 11%)
Oklch
oklch(76.3% 0.083 27.6)

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

#FD6784

Peach Pink · LightCoral · Coral Red

HEX
#FD6784
RGB
rgb(253, 103, 132)
HSL
hsl(348, 97%, 70%)
HSB
hsb(348, 59%, 99%)
CMYK
cmyk(0%, 59%, 48%, 1%)
Oklch
oklch(70.9% 0.184 11.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD4D4
D6FFFF

Analogous

FFD6EB
FFD4D4
FFEBD6

Triadic

FFD4D4
D6FFD6
D6D6FF

Split-Comp.

FFD4D4
D6FFEB
D6EBFF

Tetradic

FFD4D4
EBFFD6
D6FFFF
EBD6FF

Contrast Matrix WCAG 2.1 Contrast

FFD4D4
9DB4AB
303030
E29E95
FD6784
—
1.6
Fail
9.8
AAA
1.6
Fail
2.1
Fail
1.6
Fail
—
6.0
AA
1.0
Fail
1.3
Fail
9.8
AAA
6.0
AA
—
6.0
AA
4.7
AA
1.6
Fail
1.0
Fail
6.0
AA
—
1.3
Fail
2.1
Fail
1.3
Fail
4.7
AA
1.3
Fail
—
White BG
1.3Fail
2.2Fail
13.2AAA
2.2Fail
2.8Fail
Black BG
15.6AAA
9.6AAA
1.6Fail
9.6AAA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECD4
A7A7AD
303030
C5C497
BCBB7D

Deuteranopia

EFF2D4
A6A4AE
303030
C9CE98
C5D07B

Tritanopia

FDD4D4
9EAFAF
303030
DF9999
F67776

Achromatopsia

E1E1E1
ACACAC
303030
B1B1B1
979797

Shades & Tints Shades & Tints

#FFD4D4

Dark
Light

#9DB4AB

Dark
Light

#303030

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd4d4;
  --color-2: #9db4ab;
  --color-3: #303030;
  --color-4: #e29e95;
  --color-5: #fd6784;
}

SCSS

$color-1: #ffd4d4;
$color-2: #9db4ab;
$color-3: #303030;
$color-4: #e29e95;
$color-5: #fd6784;

TAILWIND

colors: {
  'brand-1': '#ffd4d4',
  'brand-2': '#9db4ab',
  'brand-3': '#303030',
  'brand-4': '#e29e95',
  'brand-5': '#fd6784',
}

RGB Array

[255, 212, 212], [157, 180, 171], [48, 48, 48], [226, 158, 149], [253, 103, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD4D4, #9DB4AB, #303030, #E29E95, #FD6784 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ffd4d4; --color-2: #9db4ab; --color-3: #303030; --color-4: #e29e95; --color-5: #fd6784. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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