← Back to Editor

#F66A91 · #3377A3 · #24A5A7 · #AACCC3 · #CCC9D0

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 Library

Color Details Color Details

#F66A91

Rouge · LightCoral · Rose Pink

HEX
#F66A91
RGB
rgb(246, 106, 145)
HSL
hsl(343, 89%, 69%)
HSB
hsb(343, 57%, 96%)
CMYK
cmyk(0%, 57%, 41%, 4%)
Oklch
oklch(70.6% 0.175 5.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#3377A3

Lake Blue · SteelBlue · Navy Blue

HEX
#3377A3
RGB
rgb(51, 119, 163)
HSL
hsl(204, 52%, 42%)
HSB
hsb(204, 69%, 64%)
CMYK
cmyk(69%, 27%, 0%, 36%)
Oklch
oklch(54.6% 0.097 240.3)

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

#24A5A7

Lake Blue · LightSeaGreen · Mint Ice

HEX
#24A5A7
RGB
rgb(36, 165, 167)
HSL
hsl(181, 65%, 40%)
HSB
hsb(181, 78%, 65%)
CMYK
cmyk(78%, 1%, 0%, 35%)
Oklch
oklch(65.8% 0.105 196.5)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#AACCC3

Jade · Silver · Lake Green

HEX
#AACCC3
RGB
rgb(170, 204, 195)
HSL
hsl(164, 25%, 73%)
HSB
hsb(164, 17%, 80%)
CMYK
cmyk(17%, 0%, 4%, 20%)
Oklch
oklch(81.8% 0.038 177.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#CCC9D0

Silver Gray · LightGray · Pearl Gray

HEX
#CCC9D0
RGB
rgb(204, 201, 208)
HSL
hsl(266, 7%, 80%)
HSB
hsb(266, 3%, 82%)
CMYK
cmyk(2%, 3%, 0%, 18%)
Oklch
oklch(84.0% 0.010 305.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F66A91
6AF6CE

Analogous

F66AD8
F66A91
F6886A

Triadic

F66A91
91F66A
6A91F6

Split-Comp.

F66A91
6AF688
6AD8F6

Tetradic

F66A91
D8F66A
6AF6CE
886AF6

Contrast Matrix WCAG 2.1 Contrast

F66A91
3377A3
24A5A7
AACCC3
CCC9D0
—
1.7
Fail
1.1
Fail
1.6
Fail
1.7
Fail
1.7
Fail
—
1.6
Fail
2.8
Fail
3.0
Fail
1.1
Fail
1.6
Fail
—
1.7
Fail
1.8
Fail
1.6
Fail
2.8
Fail
1.7
Fail
—
1.1
Fail
1.7
Fail
3.0
Fail
1.8
Fail
1.1
Fail
—
White BG
2.8Fail
4.9AA
3.0Fail
1.7Fail
1.6Fail
Black BG
7.4AAA
4.3AA Large
7.0AAA
12.1AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B888
505198
5C5DA7
B9B9C5
CBCBCE

Deuteranopia

C2CC85
4D4796
544BA6
B7B4C6
CBCBCE

Tritanopia

EF807E
36908E
2AA6A6
ACC7C7
CCCDCD

Achromatopsia

989898
686868
7F7F7F
C1C1C1
CBCBCB

Shades & Tints Shades & Tints

#F66A91

Dark
Light

#3377A3

Dark
Light

#24A5A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f66a91;
  --color-2: #3377a3;
  --color-3: #24a5a7;
  --color-4: #aaccc3;
  --color-5: #ccc9d0;
}

SCSS

$color-1: #f66a91;
$color-2: #3377a3;
$color-3: #24a5a7;
$color-4: #aaccc3;
$color-5: #ccc9d0;

TAILWIND

colors: {
  'brand-1': '#f66a91',
  'brand-2': '#3377a3',
  'brand-3': '#24a5a7',
  'brand-4': '#aaccc3',
  'brand-5': '#ccc9d0',
}

RGB Array

[246, 106, 145], [51, 119, 163], [36, 165, 167], [170, 204, 195], [204, 201, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F66A91, #3377A3, #24A5A7, #AACCC3, #CCC9D0 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: #f66a91; --color-2: #3377a3; --color-3: #24a5a7; --color-4: #aaccc3; --color-5: #ccc9d0. 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 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