← Back to Editor

#666764 · #BA7A74 · #F38780 · #F6A27F · #FCCC7F

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

#666764

Ink Gray · DimGray · Charcoal

HEX
#666764
RGB
rgb(102, 103, 100)
HSL
hsl(80, 1%, 40%)
HSB
hsb(80, 3%, 40%)
CMYK
cmyk(1%, 0%, 3%, 60%)
Oklch
oklch(51.2% 0.005 121.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#BA7A74

Crimson · DarkSalmon · Passion Red

HEX
#BA7A74
RGB
rgb(186, 122, 116)
HSL
hsl(5, 34%, 59%)
HSB
hsb(5, 38%, 73%)
CMYK
cmyk(0%, 34%, 38%, 27%)
Oklch
oklch(64.4% 0.081 25.4)

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

#F38780

Peach Pink · LightCoral · Coral Red

HEX
#F38780
RGB
rgb(243, 135, 128)
HSL
hsl(4, 83%, 73%)
HSB
hsb(4, 47%, 95%)
CMYK
cmyk(0%, 44%, 47%, 5%)
Oklch
oklch(73.9% 0.133 24.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F6A27F

Apricot · LightSalmon · Warm Sun

HEX
#F6A27F
RGB
rgb(246, 162, 127)
HSL
hsl(18, 87%, 73%)
HSB
hsb(18, 48%, 96%)
CMYK
cmyk(0%, 34%, 48%, 4%)
Oklch
oklch(78.8% 0.111 43.3)

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

#FCCC7F

Goose Yellow · Khaki · Warm Sun

HEX
#FCCC7F
RGB
rgb(252, 204, 127)
HSL
hsl(37, 95%, 74%)
HSB
hsb(37, 50%, 99%)
CMYK
cmyk(0%, 19%, 50%, 1%)
Oklch
oklch(87.1% 0.110 78.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

666764
666567

Analogous

676765
666764
656765

Triadic

666764
656667
676566

Split-Comp.

666764
656567
676567

Tetradic

666764
656767
666567
676565

Contrast Matrix WCAG 2.1 Contrast

666764
BA7A74
F38780
F6A27F
FCCC7F
—
1.7
Fail
2.3
Fail
2.8
Fail
3.8
AA Large
1.7
Fail
—
1.4
Fail
1.7
Fail
2.3
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
1.6
Fail
2.8
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
3.8
AA Large
2.3
Fail
1.6
Fail
1.4
Fail
—
White BG
5.7AA
3.4AA Large
2.4Fail
2.0Fail
1.5Fail
Black BG
3.7AA Large
6.1AA
8.6AAA
10.4AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666665
9E9E75
C4C382
D2D187
E7E792

Deuteranopia

666665
A2A776
CBD382
D7DD8A
EAEE96

Tritanopia

666565
B77777
EE8383
F28E90
FAA0A4

Achromatopsia

666666
8C8C8C
A6A6A6
B7B7B7
D2D2D2

Shades & Tints Shades & Tints

#666764

Dark
Light

#BA7A74

Dark
Light

#F38780

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #666764;
  --color-2: #ba7a74;
  --color-3: #f38780;
  --color-4: #f6a27f;
  --color-5: #fccc7f;
}

SCSS

$color-1: #666764;
$color-2: #ba7a74;
$color-3: #f38780;
$color-4: #f6a27f;
$color-5: #fccc7f;

TAILWIND

colors: {
  'brand-1': '#666764',
  'brand-2': '#ba7a74',
  'brand-3': '#f38780',
  'brand-4': '#f6a27f',
  'brand-5': '#fccc7f',
}

RGB Array

[102, 103, 100], [186, 122, 116], [243, 135, 128], [246, 162, 127], [252, 204, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #666764, #BA7A74, #F38780, #F6A27F, #FCCC7F 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: #666764; --color-2: #ba7a74; --color-3: #f38780; --color-4: #f6a27f; --color-5: #fccc7f. 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