Skip to main content

Iris meaning and palette guide

HEX

#5A4FCF

RGB

90, 79, 207

HSL

245°, 57%, 56%

HSV

245°, 62%, 81%

Iris leans into blue-purple the way actual irises do — vivid, electric, and slightly aristocratic. #5D3FD3 can substitute for indigo when you still want floral personality. On dark backgrounds it glows with a cool voltage that warm magentas do not share.

Best for

Event branding, newsletters, and customer-facing web pages.

Accessibility

Iris text on white passes AA at 6.08:1, which makes it usable for headings and short labels.

Iris color swatch — #5A4FCF

How does iris compare to nearby colors?

What is the difference between iris and royal blue?

Iris (#5A4FCF) bends more toward blue-ink, while Royal Blue (#4169E1) carries more of a blue-ink cast. Iris and Royal Blue can fill many of the same slots, but one steers the palette toward dusky violet and the other toward signal-blue. Begin with iris when the family needs its current undertone and surface character; keep royal blue for the nearby alternative that shifts the mood without leaving the same hue neighborhood.

What color is iris?

Named for Iris flowers. Common in floral branding, premium tech accents, and palettes that want "periwinkle meets purple."

What is the hex code for iris?

FormatValue
HEX#5A4FCF
RGBrgb(90, 79, 207)
HSLhsl(245°, 57%, 56%)
HSV / HSBhsv(245°, 62%, 81%)
CMYK (approx.)cmyk(57%, 62%, 0%, 19%)

Convert Iris to other color formats

Open the color converter with Iris (#5A4FCF) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.

Convert Iris in the color converter

What does iris mean in design?

Iris is often associated with vision, imagination, and crisp modern confidence. Next to royal purple, iris tends to read bluer and more luminous; next to magenta, it feels cooler and less aggressively pink.

How do I use iris in code?

CSS (hex)color: #5A4FCF;
CSS (rgb)color: rgb(90, 79, 207);
CSS (hsl)color: hsl(245, 57%, 56%);
RGB %rgb(35%, 31%, 81%)
Tailwindtext-[#5A4FCF]
SwiftUIColor(red: 0.353, green: 0.310, blue: 0.812)
UIKitUIColor(red: 0.353, green: 0.310, blue: 0.812, alpha: 1.0)
AndroidColor.rgb(90, 79, 207)
ComposeColor(0xFF5A4FCF)
Web Safe#6666CC

Is iris accessible?

CombinationRatioAAAA lgAAAAAA lgUI
AaWhite text on this color6.08:1
AaBlack text on this color3.45:1
AaThis color as text on white6.08:1
AaThis color as text on black3.45:1

WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.

How does iris look with color blindness?

Normal vision#5A4FCF
Protanopia (red-blind)#5555B0
Deuteranopia (green-blind)#5657A9
Tritanopia (blue-blind)#599892
Achromatopsia (total color blindness)#5B5B5B

Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.

What colors go with iris

#36454F
Charcoal

Charcoal gives iris a modern dark partner that feels softer and more material than default black.

#FFD700
Gold

Gold warms iris enough to keep the palette from feeling chilly or overly technical, while still reading intentional rather than decorative-for-its-own-sake.

#FFFDD0
Cream

Pairing iris with cream keeps the palette relaxed and material, which is useful when a bright white would feel too crisp.

#C0C0C0
Silver

Silver acts more like structure than spectacle beside iris, which is often exactly what a stronger source color needs.

#BCB88A
Sage Green

Sage Green shifts iris away from a purely cool read and makes the combination feel more considered in real layouts.

What colors clash with iris

#39FF14
Neon Green

Neon Green turns iris into something closer to screen glow than surface color, which is a mismatch for most editorial, product, or deck work.

#FF00FF
Magenta

With iris, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.

#FFA500
Orange

With iris, orange creates a warm-cool collision that announces itself before it earns a compositional reason to exist.

#FFFF00
Yellow

Yellow changes the palette around iris into something more highlighter-like than many brands want.

How should I use iris in design?

  • Try iris for section backgrounds, card fills, or brand-secondary roles where you want color without overpowering the content.
  • Warm touches like gold or coral bring out iris's cooler character by contrast, while staying with cool neighbors creates a calmer, more unified feel.
  • Iris works in beauty, creative-agency, and premium-product contexts where the brand wants to feel distinctive without resorting to standard corporate blue.

What are good iris palettes?

Bright horizon

Event branding, newsletters, and customer-facing web pages.

Soft landing

Brand guidelines, design systems, and visual identity documents.

Editorial clarity

Email templates, blog headers, and content marketing visuals.

Design with iris in Moda

Create a presentation or document using iris as your accent color. Moda's AI applies your color palette automatically.

Create a design with iris

What are the shades and tints of iris?

Shades (darker)

Tints (lighter)

Tones (desaturated)

Hue variations

What are the color harmonies for iris?

Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.

Complementary
Yellow#C4CF4FComputed
Analogous
Purple#994FCFComputedBlue#4F84CFComputed
Triadic
Red#CF5A4FComputedGreen#4FCF5AComputed
Split-complementary
Orange#CF994FComputedGreen#84CF4FComputed
Monochromatic
Dark Blue#1B1650ComputedBlue#362CA0ComputedBlue#695FD3ComputedLight Blue#B4AFE9Computed
Square
Red#CF4F84ComputedYellow#C4CF4FComputedCyan#4FCF99Computed

Frequently asked questions

What is the hex code for iris?

The hex code for iris is #5A4FCF. In RGB, that's 90 red, 79 green, and 207 blue. The approximate CMYK equivalent is 57% cyan, 62% magenta, 0% yellow, and 19% key (black).

Is iris a warm or cool color?

Iris reads as cool. It settles naturally beside blues, greens, silver, and charcoal, and feels more animated when paired with warm accents like gold, coral, or rust.

Where does iris work best in a layout?

Iris is flexible enough to move between accents, section blocks, and supporting roles depending on the contrast around it. It works best when the rest of the palette gives it a clear job instead of asking it to do everything at once.

How should I use iris in a design?

Iris is versatile enough for headlines, accent bars, buttons, charts, or section backgrounds depending on the contrast around it. It works as either a primary or supporting color in decks, documents, and brand systems.

Can I use iris for text or backgrounds?

Iris can work as text on white at 6.08:1 contrast, but it is usually safest in headings, labels, and accent moments rather than long body copy.

Last updated April 6, 2026

Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.