#554C61 + #864D5C + #C76645 + #F0833E + #AACE16 · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#554C61

Deep Indigo · DimGray · Eggplant

HEX

#554C61

RGB

rgb(85, 76, 97)

HSL

hsl(266, 12%, 34%)

HSB

hsb(266, 22%, 38%)

CMYK

cmyk(12%, 22%, 0%, 62%)

Oklch

oklch(43.3% 0.036 304.4)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#864D5C

Dark Violet · DimGray · Camellia

HEX

#864D5C

RGB

rgb(134, 77, 92)

HSL

hsl(344, 27%, 41%)

HSB

hsb(344, 43%, 53%)

CMYK

cmyk(0%, 43%, 31%, 47%)

Oklch

oklch(49.1% 0.079 3.4)

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

#C76645

Tangerine · Chocolate · Warm Sun

HEX

#C76645

RGB

rgb(199, 102, 69)

HSL

hsl(15, 54%, 53%)

HSB

hsb(15, 65%, 78%)

CMYK

cmyk(0%, 49%, 65%, 22%)

Oklch

oklch(61.8% 0.132 39.3)

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

#F0833E

Tangerine · Coral · Warm Sun

HEX

#F0833E

RGB

rgb(240, 131, 62)

HSL

hsl(23, 86%, 59%)

HSB

hsb(23, 74%, 94%)

CMYK

cmyk(0%, 45%, 74%, 6%)

Oklch

oklch(71.9% 0.156 50.1)

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

#AACE16

Grass Green · GreenYellow · Olive Green

HEX

#AACE16

RGB

rgb(170, 206, 22)

HSL

hsl(72, 81%, 45%)

HSB

hsb(72, 89%, 81%)

CMYK

cmyk(17%, 0%, 89%, 19%)

Oklch

oklch(79.7% 0.188 121.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

554C61

58614C

Analogous

4C4E61

554C61

604C61

Triadic

554C61

61554C

4C6155

Split-Comp.

554C61

61604C

4E614C

Tetradic

554C61

614C4E

58614C

4C6160

Contrast Matrix WCAG 2.1 Contrast

554C61	864D5C	C76645	F0833E	AACE16
—	1.2 Fail	2.1 Fail	3.1 AA Large	4.5 AA Large
1.2 Fail	—	1.7 Fail	2.5 Fail	3.6 AA Large
2.1 Fail	1.7 Fail	—	1.5 Fail	2.1 Fail
3.1 AA Large	2.5 Fail	1.5 Fail	—	1.4 Fail
4.5 AA Large	3.6 AA Large	2.1 Fail	1.4 Fail	—

White BG

8.1AAA

6.5AA

3.9AA Large

2.6Fail

1.8Fail

Black BG

2.6Fail

3.2AA Large

5.4AA

8.0AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51515C

6D6D58

9D9C4D

C1C04F

BABA43

Deuteranopia

52525B

717557

A3AA4F

C7CF53

B8B54D

Tritanopia

555857

835655

C25355

EB5C5F

AC666D

Achromatopsia

515151

606060

7F7F7F

9C9C9C

AEAEAE

Shades & Tints Shades & Tints

#554C61

Dark

Light

#864D5C

Dark

Light

#C76645

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #554c61;
  --color-2: #864d5c;
  --color-3: #c76645;
  --color-4: #f0833e;
  --color-5: #aace16;
}

SCSS

$color-1: #554c61;
$color-2: #864d5c;
$color-3: #c76645;
$color-4: #f0833e;
$color-5: #aace16;

TAILWIND

colors: {
  'brand-1': '#554c61',
  'brand-2': '#864d5c',
  'brand-3': '#c76645',
  'brand-4': '#f0833e',
  'brand-5': '#aace16',
}

RGB Array

[85, 76, 97], [134, 77, 92], [199, 102, 69], [240, 131, 62], [170, 206, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #554C61, #864D5C, #C76645, #F0833E, #AACE16 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: #554c61; --color-2: #864d5c; --color-3: #c76645; --color-4: #f0833e; --color-5: #aace16. 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 muted-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