← Back to Editor

#C1514D · #615056 · #E2D38E · #9CA179 · #68927A

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C1514D

Crimson · Sienna · Passion Red

HEX
#C1514D
RGB
rgb(193, 81, 77)
HSL
hsl(2, 48%, 53%)
HSB
hsb(2, 60%, 76%)
CMYK
cmyk(0%, 58%, 60%, 24%)
Oklch
oklch(57.9% 0.145 24.7)

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

#615056

Dark Violet · DimGray · Camellia

HEX
#615056
RGB
rgb(97, 80, 86)
HSL
hsl(339, 10%, 35%)
HSB
hsb(339, 18%, 38%)
CMYK
cmyk(0%, 18%, 11%, 62%)
Oklch
oklch(45.0% 0.024 354.9)

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

#E2D38E

Goose Yellow · Khaki · Sunflower

HEX
#E2D38E
RGB
rgb(226, 211, 142)
HSL
hsl(49, 59%, 72%)
HSB
hsb(49, 37%, 89%)
CMYK
cmyk(0%, 7%, 37%, 11%)
Oklch
oklch(86.3% 0.090 97.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#9CA179

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9CA179
RGB
rgb(156, 161, 121)
HSL
hsl(67, 18%, 55%)
HSB
hsb(67, 25%, 63%)
CMYK
cmyk(3%, 0%, 25%, 37%)
Oklch
oklch(69.4% 0.056 113.7)

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

#68927A

Celadon · SlateGray · Olive Green

HEX
#68927A
RGB
rgb(104, 146, 122)
HSL
hsl(146, 17%, 49%)
HSB
hsb(146, 29%, 57%)
CMYK
cmyk(29%, 0%, 16%, 43%)
Oklch
oklch(62.2% 0.059 159.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1514D
4EBDC1

Analogous

C14E83
C1514D
C18B4E

Triadic

C1514D
4EC151
514EC1

Split-Comp.

C1514D
4EC18B
4E83C1

Tetradic

C1514D
83C14E
4EBDC1
8B4EC1

Contrast Matrix WCAG 2.1 Contrast

C1514D
615056
E2D38E
9CA179
68927A
—
1.6
Fail
3.1
AA Large
1.7
Fail
1.3
Fail
1.6
Fail
—
5.0
AA
2.8
Fail
2.1
Fail
3.1
AA Large
5.0
AA
—
1.8
Fail
2.3
Fail
1.7
Fail
2.8
Fail
1.8
Fail
—
1.3
Fail
1.3
Fail
2.1
Fail
2.3
Fail
1.3
Fail
—
White BG
4.6AA
7.5AAA
1.5Fail
2.7Fail
3.5AA Large
Black BG
4.6AA
2.8Fail
13.9AAA
7.8AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

918F4E
5A5955
DCDB9F
9E9E83
7A7B80

Deuteranopia

979F4E
5B5C54
DCDEA3
9E9E85
787581

Tritanopia

BB4F4F
605353
E1ACAF
9C8A8C
6A8485

Achromatopsia

727272
565656
D0D0D0
9B9B9B
838383

Shades & Tints Shades & Tints

#C1514D

Dark
Light

#615056

Dark
Light

#E2D38E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1514d;
  --color-2: #615056;
  --color-3: #e2d38e;
  --color-4: #9ca179;
  --color-5: #68927a;
}

SCSS

$color-1: #c1514d;
$color-2: #615056;
$color-3: #e2d38e;
$color-4: #9ca179;
$color-5: #68927a;

TAILWIND

colors: {
  'brand-1': '#c1514d',
  'brand-2': '#615056',
  'brand-3': '#e2d38e',
  'brand-4': '#9ca179',
  'brand-5': '#68927a',
}

RGB Array

[193, 81, 77], [97, 80, 86], [226, 211, 142], [156, 161, 121], [104, 146, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C1514D, #615056, #E2D38E, #9CA179, #68927A 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: #c1514d; --color-2: #615056; --color-3: #e2d38e; --color-4: #9ca179; --color-5: #68927a. 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