Irodori彩り

#8D99BF Medium Blue

Generate color codes, variations, harmonies and check contrast.

Color conversion

#8D99BFMedium Blue

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

About this color

Medium BluePurpledigital color

Luxury with a secret

Medium Blue is #8D99BF, a Purple tone with a clear cultural lineage. Read on its own it belongs to the Purple family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Medium Blue (#8D99BF) on a neutral surface first; a Purple accent then looks intentional rather than decorative.

Best use

Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.

luxuriouscreativemysteriousspiritualrefined

Psychology

How it is perceived

luxuriouscreativemysteriousspiritualrefined

Psychological effect

Medium Blue raises the perceived energy of a Purple composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

creativityprestige and imagination

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward creativity, prestige and imagination, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as artificiality or elitism when overdone, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages
Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.
Editorial cover systems
Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.
Product packaging labels
Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.
Dashboard status accents
Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.
Retail wayfinding signs
Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.

Design guidance

How to make it work

Do

  • Keep saturated fills below about twenty percent of the layout.
  • Use it for the primary call to action and nothing else.
  • Check the pairing at small sizes on a neutral background.

Avoid

  • Do not place it beside clashing neon greens or electric blues.
  • Never use it for long body text on white.
  • Avoid gradients that shift its hue into another family.
Brand fit
beauty, culture, technology, luxury goods

Brands built on The Magician, The Creator use it to signal character before they say a word.

Trend signal
Luxury with a secret

Purple has always required rare dye or careful mixing, and that expense still colors its reputation. It balances ceremony, imagination and a faint air of mystery.

History

Pigments and provenance

Before synthetic dyes, Medium Blue was matched with mineral and plant pigments, and the Purple family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Tags

luxuriouscreativemysteriousspiritualrefinedcreativityprestige and imaginationPurple

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Use cases

  • Shades → hover, shadows, depth
  • Tints → highlights, surfaces
  • Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Across color systems

The closest named color in each tradition and design system, measured in OKLCH ΔE. Lower means closer.

Asian color traditions

藤色 JP ΔE 0.022
चंदन IN ΔE 0.044
绾 CN ΔE 0.048
Show all (6)
碧 KR ΔE 0.054
金 TB ΔE 0.072
Алт MN ΔE 0.077
Emas ID ΔE 0.081
สีทอง TH ΔE 0.098
Xanh VN ΔE 0.196

Design systems

Slate 400 Tailwind ΔE 0.024
Tertiary 60 Material ΔE 0.025
Slate 400 UnoCSS ΔE 0.033
Show all (11)
Slate 400 Panda ΔE 0.033
Teal 400 Chakra ΔE 0.050
Teal 8 Radix ΔE 0.054
Grey 2 Ant Design ΔE 0.058
Cyan 600 Open Color ΔE 0.058
Neutral muted Primer ΔE 0.064
Teal 11 Polaris ΔE 0.073
Web 110 Fluent ΔE 0.083
Gray 500 Bootstrap ΔE 0.093
Secondary StyleX ΔE 0.105
Brand (alternate) vanilla-extract ΔE 0.182

RAL Classic

Pale green · RAL 6021 RAL ΔE 0.016
Try any color

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

Best use: Complex dashboards and multi-service brands

Export palette

CSS

:root {
  --color-1: #555C73;
  --color-2: #717A99;
  --color-3: #8D99BF;
  --color-4: #A4ADCC;
  --color-5: #BBC2D9;
}

Tailwind

colors: {
  color1: '#555C73',
  color2: '#717A99',
  color3: '#8D99BF',
  color4: '#A4ADCC',
  color5: '#BBC2D9',
}

JSON

["#555C73","#717A99","#8D99BF","#A4ADCC","#BBC2D9"]

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

2.82 :1
FAIL
Quote

Give Medium Blue the single element that must be noticed first, and let the rest of the Purple palette support it.

WCAG contrast
Preview
Aa / Bb
#8D99BF · Medium Blue

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #8D99BF measures 2.82:1 against white (FAIL) and 6.69:1 against black (AA). Use the table below to choose the right threshold for the text size.

LevelNormal textLarge text (18pt+ / 14pt bold)Icons & UI parts
AAA7 : 14.5 : 1—
AA4.5 : 13 : 13 : 1
Fails< 4.5 : 1< 3 : 1< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX
#8D99BF

CSS Color 4

RGB
141,153,191

sRGB / D65

HSL
226,28,65

HSL

OKLCH
oklch(0.687 0.058 271.1)

perceptual

LAB
64,4,-21

CIE Lab

LCH
64,21,282

CIE LCH

XYZ
32,32,54

CIE XYZ

LUV
64,-8,-33

CIE LUV

HWB
226,55,25

CSS HWB

CMYK
26,20,0,25

print

Practical formats

Ready-to-use values

CSS
color: #8D99BF;

custom properties

Tailwind
bg-[#8D99BF] text-[#FFF]

arbitrary value

Android
#FF8D99BF

ARGB

Flutter
Color(0xFF8D99BF)

dart:ui

Photoshop
R 141 G 153 B 191 · C 26 M 20 Y 0 K 25

RGB / CMYK

Print
CMYK 26,20,0,25

FOGRA39

Color analysis

Measured color properties

Lightness
0.322

relative luminance · cool

Contrast
2.82 : 1

vs white · FAIL · cool

Contrast
6.69 : 1

vs black · AA · cool

Hue
226°

saturation 28% · cool

LCH
64,21,282

lightness 65% · cool

Delta E
18.7

缥 #9EB8C4 · cool

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 18.7

Creative aspects

Culture, mood and story

Mood
luxurious, creative, mysterious, spiritual, refined

It is commonly read as energy, warmth, confidence and a trace of ceremony.

Family
Purple · oklch(0.687 0.058 271.1)

It is commonly read as energy, warmth, confidence and a trace of ceremony.

Usage
Campaign landing pages

It is commonly read as energy, warmth, confidence and a trace of ceremony.

Style
Luxury with a secret

It is commonly read as energy, warmth, confidence and a trace of ceremony.

Inspired by
digital color

It is commonly read as energy, warmth, confidence and a trace of ceremony.

Frequently asked questions

What color is #8D99BF?
Medium Blue is #8D99BF, or #8D99BF in uppercase notation. In RGB it is rgb(141,153,191), in HSL about hsl(226 28% 65%), and in OKLCH oklch(0.687 0.058 271.1).
What does Medium Blue symbolize?
It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.
Where is Medium Blue used?
You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across beauty, culture, technology, luxury goods.
Which colors go well with Medium Blue?
Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible
How does Medium Blue affect mood?
It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.
Which industries use Medium Blue?
It is common in beauty, culture, technology, luxury goods, particularly where brands want to feel luxurious, creative, mysterious, spiritual, refined.
What is the history of Medium Blue?
The pigment story is concrete: Purple has always required rare dye or careful mixing, and that expense still colors its reputation. It balances ceremony, imagination and a faint air of mystery.
How should I use Medium Blue in design?
Give it one focal element, keep body copy neutral and confirm contrast at 2.82 against white and 6.69 against black.
Is Medium Blue accessible?
Contrast is 2.82 against white (FAIL) and 6.69 against black (AA). Use it for large text when the level reaches AA.