← Back to Editor

#CDB798 · #53484F · #B85D80 · #DE567B · #FD566F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CDB798

Ginger · Tan · Warm Sun

HEX
#CDB798
RGB
rgb(205, 183, 152)
HSL
hsl(35, 35%, 70%)
HSB
hsb(35, 26%, 80%)
CMYK
cmyk(0%, 11%, 26%, 20%)
Oklch
oklch(79.0% 0.049 76.3)

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

#53484F

Dark Cyan · DarkSlateGray · Charcoal

HEX
#53484F
RGB
rgb(83, 72, 79)
HSL
hsl(322, 7%, 30%)
HSB
hsb(322, 13%, 33%)
CMYK
cmyk(0%, 13%, 5%, 67%)
Oklch
oklch(41.5% 0.019 339.5)

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

#B85D80

Dark Violet · Gray · Rose Pink

HEX
#B85D80
RGB
rgb(184, 93, 128)
HSL
hsl(337, 39%, 54%)
HSB
hsb(337, 49%, 72%)
CMYK
cmyk(0%, 49%, 30%, 28%)
Oklch
oklch(59.7% 0.123 357.2)

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

#DE567B

Dark Violet · LightCoral · Rose Pink

HEX
#DE567B
RGB
rgb(222, 86, 123)
HSL
hsl(344, 67%, 60%)
HSB
hsb(344, 61%, 87%)
CMYK
cmyk(0%, 61%, 45%, 13%)
Oklch
oklch(64.0% 0.172 6.6)

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

#FD566F

Peach Pink · Tomato · Coral Red

HEX
#FD566F
RGB
rgb(253, 86, 111)
HSL
hsl(351, 98%, 66%)
HSB
hsb(351, 66%, 99%)
CMYK
cmyk(0%, 66%, 56%, 1%)
Oklch
oklch(68.5% 0.202 15.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDB798
98AECD

Analogous

CD9C98
CDB798
C9CD98

Triadic

CDB798
98CDB7
B798CD

Split-Comp.

CDB798
98C9CD
9C98CD

Tetradic

CDB798
98CD9C
98AECD
CD98C9

Contrast Matrix WCAG 2.1 Contrast

CDB798
53484F
B85D80
DE567B
FD566F
—
4.5
AA Large
2.2
Fail
1.9
Fail
1.6
Fail
4.5
AA Large
—
2.0
Fail
2.4
Fail
2.8
Fail
2.2
Fail
2.0
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
2.4
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.8
Fail
1.4
Fail
1.2
Fail
—
White BG
1.9Fail
8.7AAA
4.3AA Large
3.7AA Large
3.1AA Large
Black BG
10.8AAA
2.4Fail
4.9AA
5.7AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3A0
4E4E4D
919078
A3A272
B5B369

Deuteranopia

C5C6A1
4F504D
969D76
ABB570
BECB67

Tritanopia

CCA5A7
524C4C
B3716F
D76B69
F56463

Achromatopsia

BABABA
4C4C4C
7C7C7C
838383
8B8B8B

Shades & Tints Shades & Tints

#CDB798

Dark
Light

#53484F

Dark
Light

#B85D80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdb798;
  --color-2: #53484f;
  --color-3: #b85d80;
  --color-4: #de567b;
  --color-5: #fd566f;
}

SCSS

$color-1: #cdb798;
$color-2: #53484f;
$color-3: #b85d80;
$color-4: #de567b;
$color-5: #fd566f;

TAILWIND

colors: {
  'brand-1': '#cdb798',
  'brand-2': '#53484f',
  'brand-3': '#b85d80',
  'brand-4': '#de567b',
  'brand-5': '#fd566f',
}

RGB Array

[205, 183, 152], [83, 72, 79], [184, 93, 128], [222, 86, 123], [253, 86, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDB798, #53484F, #B85D80, #DE567B, #FD566F 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: #cdb798; --color-2: #53484f; --color-3: #b85d80; --color-4: #de567b; --color-5: #fd566f. 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 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