#947D76 + #B46B54 + #DD4B1F + #DD1F73 + #AF567D · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#947D76

Crimson · Gray · Passion Red

HEX

#947D76

RGB

rgb(148, 125, 118)

HSL

hsl(14, 12%, 52%)

HSB

hsb(14, 20%, 58%)

CMYK

cmyk(0%, 16%, 20%, 42%)

Oklch

oklch(60.9% 0.030 37.6)

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

#B46B54

Crimson · Sienna · Passion Red

HEX

#B46B54

RGB

rgb(180, 107, 84)

HSL

hsl(14, 39%, 52%)

HSB

hsb(14, 53%, 71%)

CMYK

cmyk(0%, 41%, 53%, 29%)

Oklch

oklch(60.3% 0.100 38.2)

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

#DD4B1F

Vermilion · Chocolate · Passion Red

HEX

#DD4B1F

RGB

rgb(221, 75, 31)

HSL

hsl(14, 75%, 49%)

HSB

hsb(14, 86%, 87%)

CMYK

cmyk(0%, 66%, 86%, 13%)

Oklch

oklch(61.1% 0.190 36.3)

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

#DD1F73

Dark Violet · MediumVioletRed · Camellia

HEX

#DD1F73

RGB

rgb(221, 31, 115)

HSL

hsl(333, 75%, 49%)

HSB

hsb(333, 86%, 87%)

CMYK

cmyk(0%, 86%, 48%, 13%)

Oklch

oklch(59.0% 0.224 1.9)

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

#AF567D

Dark Violet · Gray · Rose Pink

HEX

#AF567D

RGB

rgb(175, 86, 125)

HSL

hsl(334, 36%, 51%)

HSB

hsb(334, 51%, 69%)

CMYK

cmyk(0%, 51%, 29%, 31%)

Oklch

oklch(57.3% 0.124 354.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

947D76

768C93

Analogous

93767E

947D76

938B76

Triadic

947D76

76937D

7D7693

Split-Comp.

947D76

76938B

767E93

Tetradic

947D76

7E9376

768C93

8B7693

Contrast Matrix WCAG 2.1 Contrast

947D76	B46B54	DD4B1F	DD1F73	AF567D
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

3.9AA Large

4.1AA Large

4.6AA

4.7AA

Black BG

5.5AA

5.2AA

5.1AA

4.5AA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A78

94945A

9E9C2A

8B895F

888874

Deuteranopia

8B8D78

999E5B

A6B12C

96A45A

8E9471

Tritanopia

937979

B05E5F

D63234

D44F4B

AB6C6A

Achromatopsia

838383

7E7E7E

727272

616161

757575

Shades & Tints Shades & Tints

#947D76

Dark

Light

#B46B54

Dark

Light

#DD4B1F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #947d76;
  --color-2: #b46b54;
  --color-3: #dd4b1f;
  --color-4: #dd1f73;
  --color-5: #af567d;
}

SCSS

$color-1: #947d76;
$color-2: #b46b54;
$color-3: #dd4b1f;
$color-4: #dd1f73;
$color-5: #af567d;

TAILWIND

colors: {
  'brand-1': '#947d76',
  'brand-2': '#b46b54',
  'brand-3': '#dd4b1f',
  'brand-4': '#dd1f73',
  'brand-5': '#af567d',
}

RGB Array

[148, 125, 118], [180, 107, 84], [221, 75, 31], [221, 31, 115], [175, 86, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #947D76, #B46B54, #DD4B1F, #DD1F73, #AF567D 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: #947d76; --color-2: #b46b54; --color-3: #dd4b1f; --color-4: #dd1f73; --color-5: #af567d. 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 warm-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