← Back to Editor

#666699 · #997799 · #CC8899 · #FF9999 · #FFF7D1

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#666699

Deep Indigo · SlateGray · Navy Blue

HEX
#666699
RGB
rgb(102, 102, 153)
HSL
hsl(240, 20%, 50%)
HSB
hsb(240, 33%, 60%)
CMYK
cmyk(33%, 33%, 0%, 40%)
Oklch
oklch(53.2% 0.079 283.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#997799

Rose Purple · Gray · Violet

HEX
#997799
RGB
rgb(153, 119, 153)
HSL
hsl(300, 14%, 53%)
HSB
hsb(300, 22%, 60%)
CMYK
cmyk(0%, 22%, 0%, 40%)
Oklch
oklch(61.4% 0.064 326.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#CC8899

Peach Pink · LightCoral · Coral Red

HEX
#CC8899
RGB
rgb(204, 136, 153)
HSL
hsl(345, 40%, 67%)
HSB
hsb(345, 33%, 80%)
CMYK
cmyk(0%, 33%, 25%, 20%)
Oklch
oklch(70.0% 0.086 3.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FF9999

Peach Pink · LightSalmon · Coral Red

HEX
#FF9999
RGB
rgb(255, 153, 153)
HSL
hsl(0, 100%, 80%)
HSB
hsb(0, 40%, 100%)
CMYK
cmyk(0%, 40%, 40%, 0%)
Oklch
oklch(78.8% 0.123 20.2)

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

#FFF7D1

Fresh Green · Beige · Lemon Cream

HEX
#FFF7D1
RGB
rgb(255, 247, 209)
HSL
hsl(50, 100%, 91%)
HSB
hsb(50, 18%, 100%)
CMYK
cmyk(0%, 3%, 18%, 0%)
Oklch
oklch(97.3% 0.050 97.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

666699
999966

Analogous

668099
666699
806699

Triadic

666699
996666
669966

Split-Comp.

666699
998066
809966

Tetradic

666699
996680
999966
669980

Contrast Matrix WCAG 2.1 Contrast

666699
997799
CC8899
FF9999
FFF7D1
—
1.4
Fail
1.9
Fail
2.6
Fail
5.0
AA
1.4
Fail
—
1.4
Fail
1.9
Fail
3.6
AA Large
1.9
Fail
1.4
Fail
—
1.4
Fail
2.6
Fail
2.6
Fail
1.9
Fail
1.4
Fail
—
1.9
Fail
5.0
AA
3.6
AA Large
2.6
Fail
1.9
Fail
—
White BG
5.3AA
3.9AA Large
2.8Fail
2.0Fail
1.1Fail
Black BG
3.9AA Large
5.5AA
7.5AAA
10.3AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66668D
8A8A91
AFAE95
D3D299
FCFBDA

Deuteranopia

66668A
8C8F8F
B3B894
D9E099
FCFDDC

Tritanopia

668381
978A89
C99291
FA9999
FFE1E3

Achromatopsia

6C6C6C
858585
9E9E9E
B7B7B7
F5F5F5

Shades & Tints Shades & Tints

#666699

Dark
Light

#997799

Dark
Light

#CC8899

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #666699;
  --color-2: #997799;
  --color-3: #cc8899;
  --color-4: #ff9999;
  --color-5: #fff7d1;
}

SCSS

$color-1: #666699;
$color-2: #997799;
$color-3: #cc8899;
$color-4: #ff9999;
$color-5: #fff7d1;

TAILWIND

colors: {
  'brand-1': '#666699',
  'brand-2': '#997799',
  'brand-3': '#cc8899',
  'brand-4': '#ff9999',
  'brand-5': '#fff7d1',
}

RGB Array

[102, 102, 153], [153, 119, 153], [204, 136, 153], [255, 153, 153], [255, 247, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #666699, #997799, #CC8899, #FF9999, #FFF7D1 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #666699; --color-2: #997799; --color-3: #cc8899; --color-4: #ff9999; --color-5: #fff7d1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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