← Back to Editor

#60A672 · #FCE5B8 · #EFA010 · #CF541F · #8F2E58

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#60A672

Celadon · MediumSeaGreen · Olive Green

HEX
#60A672
RGB
rgb(96, 166, 114)
HSL
hsl(135, 28%, 51%)
HSB
hsb(135, 42%, 65%)
CMYK
cmyk(42%, 0%, 31%, 35%)
Oklch
oklch(66.5% 0.105 151.0)

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

#FCE5B8

Goose Yellow · Wheat · Lemon Cream

HEX
#FCE5B8
RGB
rgb(252, 229, 184)
HSL
hsl(40, 92%, 85%)
HSB
hsb(40, 27%, 99%)
CMYK
cmyk(0%, 9%, 27%, 1%)
Oklch
oklch(93.0% 0.063 84.0)

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

#EFA010

Ochre · Orange · Amber Brown

HEX
#EFA010
RGB
rgb(239, 160, 16)
HSL
hsl(39, 87%, 50%)
HSB
hsb(39, 93%, 94%)
CMYK
cmyk(0%, 33%, 93%, 6%)
Oklch
oklch(76.5% 0.160 73.2)

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

#CF541F

Tangerine · Chocolate · Amber Brown

HEX
#CF541F
RGB
rgb(207, 84, 31)
HSL
hsl(18, 74%, 47%)
HSB
hsb(18, 85%, 81%)
CMYK
cmyk(0%, 59%, 85%, 19%)
Oklch
oklch(59.9% 0.168 40.9)

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

#8F2E58

Dark Violet · Brown · Camellia

HEX
#8F2E58
RGB
rgb(143, 46, 88)
HSL
hsl(334, 51%, 37%)
HSB
hsb(334, 68%, 56%)
CMYK
cmyk(0%, 68%, 38%, 44%)
Oklch
oklch(45.8% 0.137 357.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

60A672
A55F94

Analogous

71A55F
60A672
5FA594

Triadic

60A672
715FA5
A5715F

Split-Comp.

60A672
945FA5
A55F71

Tetradic

60A672
5F71A5
A55F94
A5945F

Contrast Matrix WCAG 2.1 Contrast

60A672
FCE5B8
EFA010
CF541F
8F2E58
—
2.4
Fail
1.3
Fail
1.5
Fail
2.7
Fail
2.4
Fail
—
1.8
Fail
3.4
AA Large
6.3
AA
1.3
Fail
1.8
Fail
—
2.0
Fail
3.6
AA Large
1.5
Fail
3.4
AA Large
2.0
Fail
—
1.8
Fail
2.7
Fail
6.3
AA
3.6
AA Large
1.8
Fail
—
White BG
2.9Fail
1.2Fail
2.2Fail
4.3AA Large
7.8AAA
Black BG
7.2AAA
17.0AAA
9.7AAA
4.9AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7F7F
F2F2C3
CDCC33
9A992C
65644E

Deuteranopia

7A7582
F3F5C6
D1D73B
A1AA2F
6B724B

Tritanopia

63898B
FBCBCD
EB4E54
C93638
8A4644

Achromatopsia

8B8B8B
E7E7E7
A7A7A7
737373
505050

Shades & Tints Shades & Tints

#60A672

Dark
Light

#FCE5B8

Dark
Light

#EFA010

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #60a672;
  --color-2: #fce5b8;
  --color-3: #efa010;
  --color-4: #cf541f;
  --color-5: #8f2e58;
}

SCSS

$color-1: #60a672;
$color-2: #fce5b8;
$color-3: #efa010;
$color-4: #cf541f;
$color-5: #8f2e58;

TAILWIND

colors: {
  'brand-1': '#60a672',
  'brand-2': '#fce5b8',
  'brand-3': '#efa010',
  'brand-4': '#cf541f',
  'brand-5': '#8f2e58',
}

RGB Array

[96, 166, 114], [252, 229, 184], [239, 160, 16], [207, 84, 31], [143, 46, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #60A672, #FCE5B8, #EFA010, #CF541F, #8F2E58 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #60a672; --color-2: #fce5b8; --color-3: #efa010; --color-4: #cf541f; --color-5: #8f2e58. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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