← Back to Editor

#6699DD · #DD6540 · #92E1FE · #D14D4D · #64354A

A 5-color palette 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

#6699DD

Azure · CornflowerBlue · Cobalt Blue

HEX
#6699DD
RGB
rgb(102, 153, 221)
HSL
hsl(214, 64%, 63%)
HSB
hsb(214, 54%, 87%)
CMYK
cmyk(54%, 31%, 0%, 13%)
Oklch
oklch(67.6% 0.115 256.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#DD6540

Vermilion · Tomato · Passion Red

HEX
#DD6540
RGB
rgb(221, 101, 64)
HSL
hsl(14, 70%, 56%)
HSB
hsb(14, 71%, 87%)
CMYK
cmyk(0%, 54%, 71%, 13%)
Oklch
oklch(64.7% 0.159 37.7)

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

#92E1FE

Sky Blue · LightSkyBlue · Glacier Blue

HEX
#92E1FE
RGB
rgb(146, 225, 254)
HSL
hsl(196, 98%, 78%)
HSB
hsb(196, 43%, 100%)
CMYK
cmyk(43%, 11%, 0%, 0%)
Oklch
oklch(86.9% 0.087 223.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D14D4D

Crimson · Tomato · Passion Red

HEX
#D14D4D
RGB
rgb(209, 77, 77)
HSL
hsl(0, 59%, 56%)
HSB
hsb(0, 63%, 82%)
CMYK
cmyk(0%, 63%, 63%, 18%)
Oklch
oklch(59.9% 0.167 23.6)

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

#64354A

Dark Violet · DarkSlateGray · Camellia

HEX
#64354A
RGB
rgb(100, 53, 74)
HSL
hsl(333, 31%, 30%)
HSB
hsb(333, 47%, 39%)
CMYK
cmyk(0%, 47%, 26%, 61%)
Oklch
oklch(39.5% 0.073 352.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6699DD
DDA964

Analogous

64D5DD
6699DD
6C64DD

Triadic

6699DD
DD6499
99DD64

Split-Comp.

6699DD
DD6C64
D5DD64

Tetradic

6699DD
DD64D5
DDA964
64DD6C

Contrast Matrix WCAG 2.1 Contrast

6699DD
DD6540
92E1FE
D14D4D
64354A
—
1.2
Fail
2.0
Fail
1.5
Fail
3.3
AA Large
1.2
Fail
—
2.4
Fail
1.2
Fail
2.8
Fail
2.0
Fail
2.4
Fail
—
3.0
Fail
6.7
AA
1.5
Fail
1.2
Fail
3.0
Fail
—
2.3
Fail
3.3
AA Large
2.8
Fail
6.7
AA
2.3
Fail
—
White BG
2.9Fail
3.5AA Large
1.5Fail
4.3AA Large
9.8AAA
Black BG
7.2AAA
6.0AA
14.4AAA
4.9AA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7DCD
A9A849
B4B5F7
98974D
504F45

Deuteranopia

7975C9
B0B94B
B0AAF5
A0A94D
525644

Tritanopia

69C0BD
D75052
96F1F0
CA4D4D
624140

Achromatopsia

929292
858585
CDCDCD
747474
454545

Shades & Tints Shades & Tints

#6699DD

Dark
Light

#DD6540

Dark
Light

#92E1FE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6699dd;
  --color-2: #dd6540;
  --color-3: #92e1fe;
  --color-4: #d14d4d;
  --color-5: #64354a;
}

SCSS

$color-1: #6699dd;
$color-2: #dd6540;
$color-3: #92e1fe;
$color-4: #d14d4d;
$color-5: #64354a;

TAILWIND

colors: {
  'brand-1': '#6699dd',
  'brand-2': '#dd6540',
  'brand-3': '#92e1fe',
  'brand-4': '#d14d4d',
  'brand-5': '#64354a',
}

RGB Array

[102, 153, 221], [221, 101, 64], [146, 225, 254], [209, 77, 77], [100, 53, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6699DD, #DD6540, #92E1FE, #D14D4D, #64354A 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: #6699dd; --color-2: #dd6540; --color-3: #92e1fe; --color-4: #d14d4d; --color-5: #64354a. 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 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