Iris

HEX: #5A4FCF | Modern Palette

On White
6.08:1
PASS
On Black
3.45:1
FAIL

Color Specifications

HEX
#5A4FCF
RGB
90, 79, 207
HSL
245°, 61% ,81%
CMYK
56.52, 61.84, 0, 18.82

About Iris

Iris (#5A4FCF) is a color with RGB(90, 79, 207) and HSL(245.16°, 61.84%, 81.18%). In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #C4CF4F, which creates strong contrast. Its triadic palette includes #CF5A4F and #4FCF5A. The name comes from Ἶρις (Îris) (Ancient Greek).

  • HEX: #5A4FCF
  • RGB: 90, 79, 207
  • HSL: 245.16°, 61.84%, 81.18%
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #C4CF4F
  • Triadic colors: #CF5A4F, #4FCF5A
  • The name comes from Ἶρις (Îris) (Ancient Greek).

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 #5A4FCF from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #5252CF
Protanopia #5050CF
Tritanopia #306B6B
Achromatopsia #626262

Frequently Asked Questions

Iris (#5A4FCF) is a color with RGB(90, 79, 207) and HSL(245.16°, 61.84%, 81.18%).

#5A4FCF pairs strongly with #C4CF4F as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#5A4FCF is suitable for Text, Button, Background and works well with Cool styles.

The name Iris is linked to Ἶρις (Îris) from Ancient Greek, meaning Rainbow.

Name, History & Etymology

Origin Word Ἶρις (Îris)
Meaning Rainbow
Language Ancient Greek
First Recorded Use Ancient Greece

History

The name 'Iris' originates from Ancient Greek mythology, where Iris was the personification and goddess of the rainbow and a messenger of the gods, particularly Hera. She was often depicted with golden wings and a herald's staff. The rainbow was seen as a bridge between heaven and earth, symbolizing her role as a divine messenger. The flower 'iris' was named after the goddess, likely due to the wide variety of colors found in its blossoms, reminiscent of a rainbow. As a given name, 'Iris' has been used in various cultures, gaining popularity in English-speaking countries in the late 19th and early 20th centuries.

First Recorded Use

Before 8th century BCE (Homer)

Cultural Associations

In Greek mythology, Iris is a prominent figure, often appearing in epic poems like the Iliad. The iris flower is the national flower of France (fleur-de-lis, a stylized iris). In some cultures, the iris flower symbolizes hope, wisdom, and valor. The color #5a4fcf is a shade of purple, which is often associated with royalty, spirituality, and creativity. Purple irises specifically can symbolize wisdom and compliments.

Similar Named Colors
Majorelle Blue #6050DC ΔE 2.07
Slate Blue #6A5ACD ΔE 3.98
Palatinate Blue #273BE2 ΔE 6.79
Blue (RYB) #0247FE ΔE 6.91

Code Snippets

/* Background */
.element {
    background-color: #5A4FCF;
}

/* Text */
.element {
    color: #5A4FCF;
}

/* Border */
.element {
    border: 1px solid #5A4FCF;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #5A4FCF,
        #E8EDB1
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #5A4FCF,
        #E8EDB1
    );
}

// SCSS variable
$iris: #5A4FCF;

// With RGB channels (useful for rgba() usage)
$iris-r: 90;
$iris-g: 79;
$iris-b: 207;

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