← Back to Editor

#87A9B1 · #FAFDC7 · #A64C10 · #642C02 · #3B1E10

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#87A9B1

Sky Blue · DarkGray · Lake Green

HEX
#87A9B1
RGB
rgb(135, 169, 177)
HSL
hsl(191, 21%, 61%)
HSB
hsb(191, 24%, 69%)
CMYK
cmyk(24%, 5%, 0%, 31%)
Oklch
oklch(71.2% 0.039 213.6)

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

#FAFDC7

Fresh Green · Beige · Lemon Cream

HEX
#FAFDC7
RGB
rgb(250, 253, 199)
HSL
hsl(63, 93%, 89%)
HSB
hsb(63, 21%, 99%)
CMYK
cmyk(1%, 0%, 21%, 1%)
Oklch
oklch(97.9% 0.069 110.2)

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

#A64C10

Tangerine · Sienna · Amber Brown

HEX
#A64C10
RGB
rgb(166, 76, 16)
HSL
hsl(24, 82%, 36%)
HSB
hsb(24, 90%, 65%)
CMYK
cmyk(0%, 54%, 90%, 35%)
Oklch
oklch(52.3% 0.136 47.8)

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

#642C02

Tangerine · Maroon · Cinnamon

HEX
#642C02
RGB
rgb(100, 44, 2)
HSL
hsl(26, 96%, 20%)
HSB
hsb(26, 98%, 39%)
CMYK
cmyk(0%, 56%, 98%, 61%)
Oklch
oklch(36.5% 0.094 50.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#3B1E10

Tangerine · Black · Cinnamon

HEX
#3B1E10
RGB
rgb(59, 30, 16)
HSL
hsl(20, 57%, 15%)
HSB
hsb(20, 73%, 23%)
CMYK
cmyk(0%, 49%, 73%, 77%)
Oklch
oklch(27.1% 0.051 45.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87A9B1
B08E87

Analogous

87B0A3
87A9B1
8794B0

Triadic

87A9B1
B087A9
A9B087

Split-Comp.

87A9B1
B08794
B0A387

Tetradic

87A9B1
A387B0
B08E87
94B087

Contrast Matrix WCAG 2.1 Contrast

87A9B1
FAFDC7
A64C10
642C02
3B1E10
—
2.4
Fail
2.3
Fail
4.4
AA Large
6.0
AA
2.4
Fail
—
5.4
AA
10.5
AAA
14.5
AAA
2.3
Fail
5.4
AA
—
1.9
Fail
2.7
Fail
4.4
AA Large
10.5
AAA
1.9
Fail
—
1.4
Fail
6.0
AA
14.5
AAA
2.7
Fail
1.4
Fail
—
White BG
2.5Fail
1.1Fail
5.7AA
11.0AAA
15.2AAA
Black BG
8.3AAA
19.9AAA
3.7AA Large
1.9Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9696AF
FBFBD4
7F7E1F
4C4B0C
2E2E13

Deuteranopia

9491AF
FBFBD7
848B22
4F530F
303214

Tritanopia

89AEAD
FADEE1
A22A2D
611416
3A1617

Achromatopsia

A0A0A0
F6F6F6
606060
383838
252525

Shades & Tints Shades & Tints

#87A9B1

Dark
Light

#FAFDC7

Dark
Light

#A64C10

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87a9b1;
  --color-2: #fafdc7;
  --color-3: #a64c10;
  --color-4: #642c02;
  --color-5: #3b1e10;
}

SCSS

$color-1: #87a9b1;
$color-2: #fafdc7;
$color-3: #a64c10;
$color-4: #642c02;
$color-5: #3b1e10;

TAILWIND

colors: {
  'brand-1': '#87a9b1',
  'brand-2': '#fafdc7',
  'brand-3': '#a64c10',
  'brand-4': '#642c02',
  'brand-5': '#3b1e10',
}

RGB Array

[135, 169, 177], [250, 253, 199], [166, 76, 16], [100, 44, 2], [59, 30, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #87A9B1, #FAFDC7, #A64C10, #642C02, #3B1E10 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: #87a9b1; --color-2: #fafdc7; --color-3: #a64c10; --color-4: #642c02; --color-5: #3b1e10. 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