← Back to Editor

#F2DFC9 · #99CCCC · #859AA8 · #653878 · #39114A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F2DFC9

Goose Yellow · Bisque · Peach Orange

HEX
#F2DFC9
RGB
rgb(242, 223, 201)
HSL
hsl(32, 61%, 87%)
HSB
hsb(32, 17%, 95%)
CMYK
cmyk(0%, 8%, 17%, 5%)
Oklch
oklch(91.3% 0.036 71.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#99CCCC

Sky Blue · LightSteelBlue · Lake Green

HEX
#99CCCC
RGB
rgb(153, 204, 204)
HSL
hsl(180, 33%, 70%)
HSB
hsb(180, 25%, 80%)
CMYK
cmyk(25%, 0%, 0%, 20%)
Oklch
oklch(81.0% 0.053 196.2)

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

#859AA8

Slate Blue · LightSlateGray · Navy Blue

HEX
#859AA8
RGB
rgb(133, 154, 168)
HSL
hsl(204, 17%, 59%)
HSB
hsb(204, 21%, 66%)
CMYK
cmyk(21%, 8%, 0%, 34%)
Oklch
oklch(67.5% 0.032 237.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#653878

Dark Plum · DarkSlateBlue · Eggplant

HEX
#653878
RGB
rgb(101, 56, 120)
HSL
hsl(282, 36%, 35%)
HSB
hsb(282, 53%, 47%)
CMYK
cmyk(16%, 53%, 0%, 53%)
Oklch
oklch(42.4% 0.113 315.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#39114A

Royal Purple · MidnightBlue · Dark Purple

HEX
#39114A
RGB
rgb(57, 17, 74)
HSL
hsl(282, 63%, 18%)
HSB
hsb(282, 77%, 29%)
CMYK
cmyk(23%, 77%, 0%, 71%)
Oklch
oklch(27.4% 0.104 313.9)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DFC9
CADDF2

Analogous

F2CBCA
F2DFC9
F1F2CA

Triadic

F2DFC9
CAF2DF
DFCAF2

Split-Comp.

F2DFC9
CAF1F2
CBCAF2

Tetradic

F2DFC9
CAF2CB
CADDF2
F2CAF1

Contrast Matrix WCAG 2.1 Contrast

F2DFC9
99CCCC
859AA8
653878
39114A
—
1.4
Fail
2.3
Fail
6.8
AA
12.0
AAA
1.4
Fail
—
1.7
Fail
5.0
AA
8.8
AAA
2.3
Fail
1.7
Fail
—
3.0
AA Large
5.3
AA
6.8
AA
5.0
AA
3.0
AA Large
—
1.8
Fail
12.0
AAA
8.8
AAA
5.3
AA
1.8
Fail
—
White BG
1.3Fail
1.8Fail
2.9Fail
8.8AAA
15.5AAA
Black BG
16.2AAA
11.9AAA
7.2AAA
2.4Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEACE
AFB0CC
8E8EA5
525169
28273C

Deuteranopia

EBECD0
ACA8CC
8D8BA4
545765
2A2D39

Tritanopia

F1D3D3
9CCCCC
86A2A1
635C5A
37312F

Achromatopsia

E2E2E2
BDBDBD
959595
4D4D4D
232323

Shades & Tints Shades & Tints

#F2DFC9

Dark
Light

#99CCCC

Dark
Light

#859AA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dfc9;
  --color-2: #99cccc;
  --color-3: #859aa8;
  --color-4: #653878;
  --color-5: #39114a;
}

SCSS

$color-1: #f2dfc9;
$color-2: #99cccc;
$color-3: #859aa8;
$color-4: #653878;
$color-5: #39114a;

TAILWIND

colors: {
  'brand-1': '#f2dfc9',
  'brand-2': '#99cccc',
  'brand-3': '#859aa8',
  'brand-4': '#653878',
  'brand-5': '#39114a',
}

RGB Array

[242, 223, 201], [153, 204, 204], [133, 154, 168], [101, 56, 120], [57, 17, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DFC9, #99CCCC, #859AA8, #653878, #39114A is ideal for: 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: #f2dfc9; --color-2: #99cccc; --color-3: #859aa8; --color-4: #653878; --color-5: #39114a. 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 general-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