← Back to Editor

#7CA5C5 · #E9F6FB · #42567B · #E34247 · #A1DDF5

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

#7CA5C5

Sky Blue · CadetBlue · Cobalt Blue

HEX
#7CA5C5
RGB
rgb(124, 165, 197)
HSL
hsl(206, 39%, 63%)
HSB
hsb(206, 37%, 77%)
CMYK
cmyk(37%, 16%, 0%, 23%)
Oklch
oklch(70.4% 0.065 242.3)

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

#E9F6FB

Sky Blue · Lavender · Glacier Blue

HEX
#E9F6FB
RGB
rgb(233, 246, 251)
HSL
hsl(197, 69%, 95%)
HSB
hsb(197, 7%, 98%)
CMYK
cmyk(7%, 2%, 0%, 2%)
Oklch
oklch(96.5% 0.015 222.7)

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

#42567B

Indigo · DarkSlateBlue · Prussian Blue

HEX
#42567B
RGB
rgb(66, 86, 123)
HSL
hsl(219, 30%, 37%)
HSB
hsb(219, 46%, 48%)
CMYK
cmyk(46%, 30%, 0%, 52%)
Oklch
oklch(45.3% 0.066 262.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#E34247

Vermilion · Tomato · Passion Red

HEX
#E34247
RGB
rgb(227, 66, 71)
HSL
hsl(358, 74%, 57%)
HSB
hsb(358, 71%, 89%)
CMYK
cmyk(0%, 71%, 69%, 11%)
Oklch
oklch(61.5% 0.197 23.6)

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

#A1DDF5

Sky Blue · LightBlue · Glacier Blue

HEX
#A1DDF5
RGB
rgb(161, 221, 245)
HSL
hsl(197, 81%, 80%)
HSB
hsb(197, 34%, 96%)
CMYK
cmyk(34%, 10%, 0%, 4%)
Oklch
oklch(86.5% 0.069 224.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CA5C5
C59C7C

Analogous

7CC5C1
7CA5C5
7C81C5

Triadic

7CA5C5
C57CA6
A6C57C

Split-Comp.

7CA5C5
C57C81
C5C17C

Tetradic

7CA5C5
C17CC5
C59C7C
81C57C

Contrast Matrix WCAG 2.1 Contrast

7CA5C5
E9F6FB
42567B
E34247
A1DDF5
—
2.4
Fail
2.8
Fail
1.6
Fail
1.8
Fail
2.4
Fail
—
6.7
AA
3.7
AA Large
1.3
Fail
2.8
Fail
6.7
AA
—
1.8
Fail
5.0
AA
1.6
Fail
3.7
AA Large
1.8
Fail
—
2.8
Fail
1.8
Fail
1.3
Fail
5.0
AA
2.8
Fail
—
White BG
2.6Fail
1.1Fail
7.4AAA
4.1AA Large
1.5Fail
Black BG
8.0AAA
19.0AAA
2.8Fail
5.1AA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EBD
EFEFFA
4B4B72
9D9C46
BBBCEF

Deuteranopia

8B88BB
EEEDFA
4A4870
A7B346
B8B3EE

Tritanopia

7EB7B6
EAF9F9
436B69
DB4545
A4EBEA

Achromatopsia

9C9C9C
F3F3F3
545454
737373
CECECE

Shades & Tints Shades & Tints

#7CA5C5

Dark
Light

#E9F6FB

Dark
Light

#42567B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ca5c5;
  --color-2: #e9f6fb;
  --color-3: #42567b;
  --color-4: #e34247;
  --color-5: #a1ddf5;
}

SCSS

$color-1: #7ca5c5;
$color-2: #e9f6fb;
$color-3: #42567b;
$color-4: #e34247;
$color-5: #a1ddf5;

TAILWIND

colors: {
  'brand-1': '#7ca5c5',
  'brand-2': '#e9f6fb',
  'brand-3': '#42567b',
  'brand-4': '#e34247',
  'brand-5': '#a1ddf5',
}

RGB Array

[124, 165, 197], [233, 246, 251], [66, 86, 123], [227, 66, 71], [161, 221, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CA5C5, #E9F6FB, #42567B, #E34247, #A1DDF5 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: #7ca5c5; --color-2: #e9f6fb; --color-3: #42567b; --color-4: #e34247; --color-5: #a1ddf5. 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 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