#ECB46A + #B97560 + #863757 + #9B7F93 + #B0C8CF · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ECB46A

Ginger · SandyBrown · Warm Sun

HEX

#ECB46A

RGB

rgb(236, 180, 106)

HSL

hsl(34, 77%, 67%)

HSB

hsb(34, 55%, 93%)

CMYK

cmyk(0%, 24%, 55%, 7%)

Oklch

oklch(80.6% 0.112 72.8)

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

#B97560

Crimson · DarkSalmon · Passion Red

HEX

#B97560

RGB

rgb(185, 117, 96)

HSL

hsl(14, 39%, 55%)

HSB

hsb(14, 48%, 73%)

CMYK

cmyk(0%, 37%, 48%, 27%)

Oklch

oklch(63.0% 0.092 37.9)

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

#863757

Dark Violet · Brown · Camellia

HEX

#863757

RGB

rgb(134, 55, 87)

HSL

hsl(336, 42%, 37%)

HSB

hsb(336, 59%, 53%)

CMYK

cmyk(0%, 59%, 35%, 47%)

Oklch

oklch(45.4% 0.114 357.3)

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

#9B7F93

Rose Purple · Gray · Violet

HEX

#9B7F93

RGB

rgb(155, 127, 147)

HSL

hsl(317, 12%, 55%)

HSB

hsb(317, 18%, 61%)

CMYK

cmyk(0%, 18%, 5%, 39%)

Oklch

oklch(62.9% 0.044 336.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#B0C8CF

Sky Blue · LightSteelBlue · Lake Green

HEX

#B0C8CF

RGB

rgb(176, 200, 207)

HSL

hsl(194, 24%, 75%)

HSB

hsb(194, 15%, 81%)

CMYK

cmyk(15%, 3%, 0%, 19%)

Oklch

oklch(81.7% 0.028 217.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECB46A

6AA2EC

Analogous

EC736A

ECB46A

E3EC6A

Triadic

ECB46A

6AECB3

B36AEC

Split-Comp.

ECB46A

6AE3EC

736AEC

Tetradic

ECB46A

6AEC73

6AA2EC

EC6AE3

Contrast Matrix WCAG 2.1 Contrast

ECB46A	B97560	863757	9B7F93	B0C8CF
—	2.0 Fail	4.2 AA Large	1.9 Fail	1.1 Fail
2.0 Fail	—	2.1 Fail	1.0 Fail	2.1 Fail
4.2 AA Large	2.1 Fail	—	2.2 Fail	4.5 AA Large
1.9 Fail	1.0 Fail	2.2 Fail	—	2.1 Fail
1.1 Fail	2.1 Fail	4.5 AA Large	2.1 Fail	—

White BG

1.9Fail

3.6AA Large

7.8AAA

3.6AA Large

1.7Fail

Black BG

11.3AAA

5.8AA

2.7Fail

5.9AA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D37C

9C9B65

64634F

8F8F8E

BABBCD

Deuteranopia

D7DB80

A0A566

686E4D

91938D

B9B7CD

Tritanopia

E98A8D

B6696A

824948

9A8A8A

B1CCCC

Achromatopsia

BCBCBC

878787

525252

8A8A8A

C2C2C2

Shades & Tints Shades & Tints

#ECB46A

Dark

Light

#B97560

Dark

Light

#863757

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecb46a;
  --color-2: #b97560;
  --color-3: #863757;
  --color-4: #9b7f93;
  --color-5: #b0c8cf;
}

SCSS

$color-1: #ecb46a;
$color-2: #b97560;
$color-3: #863757;
$color-4: #9b7f93;
$color-5: #b0c8cf;

TAILWIND

colors: {
  'brand-1': '#ecb46a',
  'brand-2': '#b97560',
  'brand-3': '#863757',
  'brand-4': '#9b7f93',
  'brand-5': '#b0c8cf',
}

RGB Array

[236, 180, 106], [185, 117, 96], [134, 55, 87], [155, 127, 147], [176, 200, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #ECB46A, #B97560, #863757, #9B7F93, #B0C8CF 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: #ecb46a; --color-2: #b97560; --color-3: #863757; --color-4: #9b7f93; --color-5: #b0c8cf. 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