← Back to Editor

#D3CECB · #C6A890 · #E76653 · #2B2C30

A 4-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

#D3CECB

Apricot · LightGray · Pearl Gray

HEX
#D3CECB
RGB
rgb(211, 206, 203)
HSL
hsl(23, 8%, 81%)
HSB
hsb(23, 4%, 83%)
CMYK
cmyk(0%, 2%, 4%, 17%)
Oklch
oklch(85.5% 0.007 53.4)

Traditional「Apricot」· Paint「Pearl Gray」· Creative Silver Lining

#C6A890

Apricot · Tan · Warm Sun

HEX
#C6A890
RGB
rgb(198, 168, 144)
HSL
hsl(27, 32%, 67%)
HSB
hsb(27, 27%, 78%)
CMYK
cmyk(0%, 15%, 27%, 22%)
Oklch
oklch(75.2% 0.048 60.6)

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

#E76653

Peach Pink · Tomato · Coral Red

HEX
#E76653
RGB
rgb(231, 102, 83)
HSL
hsl(8, 76%, 62%)
HSB
hsb(8, 64%, 91%)
CMYK
cmyk(0%, 56%, 64%, 9%)
Oklch
oklch(66.6% 0.164 30.4)

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

#2B2C30

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2B2C30
RGB
rgb(43, 44, 48)
HSL
hsl(228, 5%, 18%)
HSB
hsb(228, 10%, 19%)
CMYK
cmyk(10%, 8%, 0%, 81%)
Oklch
oklch(29.4% 0.007 274.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3CECB
CBCFD2

Analogous

D2CBCC
D3CECB
D2D2CB

Triadic

D3CECB
CBD2CE
CECBD2

Split-Comp.

D3CECB
CBD2D2
CBCCD2

Tetradic

D3CECB
CCD2CB
CBCFD2
D2CBD2

Contrast Matrix WCAG 2.1 Contrast

D3CECB
C6A890
E76653
2B2C30
—
1.4
Fail
2.1
Fail
8.9
AAA
1.4
Fail
—
1.5
Fail
6.2
AA
2.1
Fail
1.5
Fail
—
4.3
AA Large
8.9
AAA
6.2
AA
4.3
AA Large
—
White BG
1.6Fail
2.2Fail
3.3AA Large
13.9AAA
Black BG
13.5AAA
9.4AAA
6.4AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1CC
B9B996
AFAE58
2B2B2F

Deuteranopia

D1D2CC
BBBD97
B7C059
2B2B2F

Tritanopia

D3CCCC
C59A9B
E15B5C
2B2E2E

Achromatopsia

CFCFCF
AEAEAE
8A8A8A
2C2C2C

Shades & Tints Shades & Tints

#D3CECB

Dark
Light

#C6A890

Dark
Light

#E76653

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3cecb;
  --color-2: #c6a890;
  --color-3: #e76653;
  --color-4: #2b2c30;
}

SCSS

$color-1: #d3cecb;
$color-2: #c6a890;
$color-3: #e76653;
$color-4: #2b2c30;

TAILWIND

colors: {
  'brand-1': '#d3cecb',
  'brand-2': '#c6a890',
  'brand-3': '#e76653',
  'brand-4': '#2b2c30',
}

RGB Array

[211, 206, 203], [198, 168, 144], [231, 102, 83], [43, 44, 48]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #D3CECB, #C6A890, #E76653, #2B2C30 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d3cecb; --color-2: #c6a890; --color-3: #e76653; --color-4: #2b2c30. 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 4-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