← Back to Editor

#4A6B6B · #91331C · #977357 · #D4D09F · #999969

warm

A 5-color warm 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

#4A6B6B

Slate Blue · DimGray · Mint Ice

HEX
#4A6B6B
RGB
rgb(74, 107, 107)
HSL
hsl(180, 18%, 35%)
HSB
hsb(180, 31%, 42%)
CMYK
cmyk(31%, 0%, 0%, 58%)
Oklch
oklch(50.3% 0.038 196.0)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#91331C

Vermilion · Brown · Wine Red

HEX
#91331C
RGB
rgb(145, 51, 28)
HSL
hsl(12, 68%, 34%)
HSB
hsb(12, 81%, 57%)
CMYK
cmyk(0%, 65%, 81%, 43%)
Oklch
oklch(45.4% 0.132 34.9)

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

#977357

Tangerine · Gray · Amber Brown

HEX
#977357
RGB
rgb(151, 115, 87)
HSL
hsl(26, 27%, 47%)
HSB
hsb(26, 42%, 59%)
CMYK
cmyk(0%, 24%, 42%, 41%)
Oklch
oklch(58.4% 0.061 59.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D4D09F

Fresh Green · Tan · Sunflower

HEX
#D4D09F
RGB
rgb(212, 208, 159)
HSL
hsl(55, 38%, 73%)
HSB
hsb(55, 25%, 83%)
CMYK
cmyk(0%, 2%, 25%, 17%)
Oklch
oklch(84.9% 0.065 103.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#999969

Autumn Sage · Gray · Sunflower

HEX
#999969
RGB
rgb(153, 153, 105)
HSL
hsl(60, 19%, 51%)
HSB
hsb(60, 31%, 60%)
CMYK
cmyk(0%, 0%, 31%, 40%)
Oklch
oklch(67.1% 0.066 108.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A6B6B
694949

Analogous

496959
4A6B6B
495969

Triadic

4A6B6B
694969
696949

Split-Comp.

4A6B6B
694959
695949

Tetradic

4A6B6B
594969
694949
596949

Contrast Matrix WCAG 2.1 Contrast

4A6B6B
91331C
977357
D4D09F
999969
—
1.3
Fail
1.4
Fail
3.7
AA Large
2.0
Fail
1.3
Fail
—
1.8
Fail
4.9
AA
2.6
Fail
1.4
Fail
1.8
Fail
—
2.7
Fail
1.5
Fail
3.7
AA Large
4.9
AA
2.7
Fail
—
1.9
Fail
2.0
Fail
2.6
Fail
1.5
Fail
1.9
Fail
—
White BG
5.8AA
7.8AAA
4.3AA Large
1.6Fail
3.0Fail
Black BG
3.6AA Large
2.7Fail
4.9AA
13.3AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58596B
686722
87875E
D2D2AB
999975

Deuteranopia

56546B
6E7523
8A8C5F
D3D3AE
999977

Tritanopia

4C6B6B
8C2627
956364
D4B4B6
997E80

Achromatopsia

616161
4C4C4C
7B7B7B
CCCCCC
949494

Shades & Tints Shades & Tints

#4A6B6B

Dark
Light

#91331C

Dark
Light

#977357

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a6b6b;
  --color-2: #91331c;
  --color-3: #977357;
  --color-4: #d4d09f;
  --color-5: #999969;
}

SCSS

$color-1: #4a6b6b;
$color-2: #91331c;
$color-3: #977357;
$color-4: #d4d09f;
$color-5: #999969;

TAILWIND

colors: {
  'brand-1': '#4a6b6b',
  'brand-2': '#91331c',
  'brand-3': '#977357',
  'brand-4': '#d4d09f',
  'brand-5': '#999969',
}

RGB Array

[74, 107, 107], [145, 51, 28], [151, 115, 87], [212, 208, 159], [153, 153, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #4A6B6B, #91331C, #977357, #D4D09F, #999969 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: #4a6b6b; --color-2: #91331c; --color-3: #977357; --color-4: #d4d09f; --color-5: #999969. 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