Bleu De France

HEX: #318CE7 | Modern Palette

On White
3.48:1
FAIL
On Black
6.04:1
PASS

Color Specifications

HEX
#318CE7
RGB
49, 140, 231
HSL
210°, 78% ,90%
CMYK
78.79, 39.39, 0, 9.41

About Bleu De France

Bleu De France (#318CE7) is a color with RGB(49, 140, 231) and HSL(210°, 78.79%, 90.59%). It is commonly associated with Playful moods. In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #E78C31, which creates strong contrast. Its triadic palette includes #E7318C and #8CE731. The name comes from Bleu De France (French).

  • HEX: #318CE7
  • RGB: 49, 140, 231
  • HSL: 210°, 78.79%, 90.59%
  • Mood: Playful
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #E78C31
  • Triadic colors: #E7318C, #8CE731
  • The name comes from Bleu De France (French).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #318CE7 from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #7A7AE8
Protanopia #8686E7
Tritanopia #009B9B
Achromatopsia #898989

Frequently Asked Questions

Bleu De France (#318CE7) is a color with RGB(49, 140, 231) and HSL(210°, 78.79%, 90.59%).

#318CE7 pairs strongly with #E78C31 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#318CE7 is suitable for Text, Button, Background and works well with Cool styles.

#318CE7 is commonly associated with Playful.

The name Bleu De France is linked to Bleu De France from French, meaning Blue of France.

Name, History & Etymology

Origin Word Bleu De France
Meaning Blue of France
Language French
First Recorded Use Medieval

History

The color 'Bleu De France' has a rich history deeply intertwined with the French monarchy and national identity. It is traditionally associated with the blue found on the French flag and the heraldic arms of the Kings of France, particularly the 'fleur-de-lis' on an azure (blue) field. This specific shade of blue became prominent during the Capetian dynasty. Over centuries, it evolved from a royal symbol to a national emblem, representing France in various contexts, from military uniforms to sports teams. The exact shade has varied slightly throughout history due to dye availability and artistic interpretation, but the concept of 'Bleu De France' as a distinct national blue has remained constant.

First Recorded Use

12th Century

Cultural Associations

Bleu De France is a powerful symbol of French national identity. It is prominently featured in the French flag (Tricolour), where it represents liberty and the city of Paris. It is the color worn by French national sports teams (e.g., football, rugby), earning them the nickname 'Les Bleus'. It is also used in official government branding, military uniforms, and various cultural expressions. The color evokes patriotism, history, and a sense of collective identity for the French people.

Similar Named Colors
Dodger Blue #1E90FF ΔE 2.41
United Nations Blue #5B92E5 ΔE 4.38
Brilliant Azure #3399FF ΔE 4.56
Azure #007FFF ΔE 5.02

Code Snippets

/* Background */
.element {
    background-color: #318CE7;
}

/* Text */
.element {
    color: #318CE7;
}

/* Border */
.element {
    border: 1px solid #318CE7;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #318CE7,
        #FAE7D4
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #318CE7,
        #FAE7D4
    );
}

// SCSS variable
$bleu-de-france: #318CE7;

// With RGB channels (useful for rgba() usage)
$bleu-de-france-r: 49;
$bleu-de-france-g: 140;
$bleu-de-france-b: 231;

// Usage
.element {
    background-color: $bleu-de-france;
    color: rgba($bleu-de-france-r, $bleu-de-france-g, $bleu-de-france-b, 0.8);
}