← Back to Editor

#61A49D · #C5AC8E · #DDD4C3 · #BC3D58 · #CD5F3A

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 Library

Color Details Color Details

#61A49D

Mineral Blue · CadetBlue · Lake Green

HEX
#61A49D
RGB
rgb(97, 164, 157)
HSL
hsl(174, 27%, 51%)
HSB
hsb(174, 41%, 64%)
CMYK
cmyk(41%, 0%, 4%, 36%)
Oklch
oklch(67.2% 0.069 187.1)

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

#C5AC8E

Ginger · Tan · Warm Sun

HEX
#C5AC8E
RGB
rgb(197, 172, 142)
HSL
hsl(33, 32%, 66%)
HSB
hsb(33, 28%, 77%)
CMYK
cmyk(0%, 13%, 28%, 23%)
Oklch
oklch(75.8% 0.050 72.0)

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

#DDD4C3

Goose Yellow · LightGray · Peach Orange

HEX
#DDD4C3
RGB
rgb(221, 212, 195)
HSL
hsl(39, 28%, 82%)
HSB
hsb(39, 12%, 87%)
CMYK
cmyk(0%, 4%, 12%, 13%)
Oklch
oklch(87.3% 0.025 83.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BC3D58

Crimson · Brown · Passion Red

HEX
#BC3D58
RGB
rgb(188, 61, 88)
HSL
hsl(347, 51%, 49%)
HSB
hsb(347, 68%, 74%)
CMYK
cmyk(0%, 68%, 53%, 26%)
Oklch
oklch(54.9% 0.163 11.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#CD5F3A

Tangerine · Chocolate · Warm Sun

HEX
#CD5F3A
RGB
rgb(205, 95, 58)
HSL
hsl(15, 60%, 52%)
HSB
hsb(15, 72%, 80%)
CMYK
cmyk(0%, 54%, 72%, 20%)
Oklch
oklch(61.4% 0.149 38.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61A49D
A46067

Analogous

60A47B
61A49D
6089A4

Triadic

61A49D
9D60A4
A49D60

Split-Comp.

61A49D
A46089
A47B60

Tetradic

61A49D
7B60A4
A46067
89A460

Contrast Matrix WCAG 2.1 Contrast

61A49D
C5AC8E
DDD4C3
BC3D58
CD5F3A
—
1.3
Fail
2.0
Fail
1.9
Fail
1.4
Fail
1.3
Fail
—
1.5
Fail
2.4
Fail
1.8
Fail
2.0
Fail
1.5
Fail
—
3.6
AA Large
2.7
Fail
1.9
Fail
2.4
Fail
3.6
AA Large
—
1.3
Fail
1.4
Fail
1.8
Fail
2.7
Fail
1.3
Fail
—
White BG
2.9Fail
2.2Fail
1.5Fail
5.3AA
4.0AA Large
Black BG
7.3AAA
9.7AAA
14.3AAA
3.9AA Large
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7F9F
BABA95
D9D9C7
858451
9D9C43

Deuteranopia

7A759F
BCBD97
DADAC8
8C9650
A4AC45

Tritanopia

64A0A0
C49B9C
DDCACB
B64C4B
C84A4C

Achromatopsia

8F8F8F
B0B0B0
D5D5D5
666666
7C7C7C

Shades & Tints Shades & Tints

#61A49D

Dark
Light

#C5AC8E

Dark
Light

#DDD4C3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61a49d;
  --color-2: #c5ac8e;
  --color-3: #ddd4c3;
  --color-4: #bc3d58;
  --color-5: #cd5f3a;
}

SCSS

$color-1: #61a49d;
$color-2: #c5ac8e;
$color-3: #ddd4c3;
$color-4: #bc3d58;
$color-5: #cd5f3a;

TAILWIND

colors: {
  'brand-1': '#61a49d',
  'brand-2': '#c5ac8e',
  'brand-3': '#ddd4c3',
  'brand-4': '#bc3d58',
  'brand-5': '#cd5f3a',
}

RGB Array

[97, 164, 157], [197, 172, 142], [221, 212, 195], [188, 61, 88], [205, 95, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61A49D, #C5AC8E, #DDD4C3, #BC3D58, #CD5F3A 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: #61a49d; --color-2: #c5ac8e; --color-3: #ddd4c3; --color-4: #bc3d58; --color-5: #cd5f3a. 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