Colors that go with sapphire

#0F52BA · cool blue · hue 216° · best text: #FFFFFF

Ten combinations ranked by measurable criteria — hue harmony, WCAG contrast with sapphire, lightness spread and saturation compatibility. Every pairing lists why it works.

Ready-to-use palette

#0F52BA
#247AFD
#00FA9A
#C1FD95
#A8B504
#FAFAF9
#0f52ba #247afd #00fa9a #c1fd95 #a8b504 #fafaf9
#0F52BA #247AFD #00FA9A #C1FD95 #A8B504 #FAFAF9
Open in palette generator →Full sapphire page →

Best combinations — ranked

#1

Clear Blue #247AFD

· Same hue family as sapphire (Δh 0°) — guaranteed harmony
· Close value pairing (1.8:1) — use for large surfaces, not small text
· Similar saturation (85% vs 98%) — both vivid
contrast
1.8:1
vs sapphire
#2

Mediumspringgreen #00FA9A

· Warm/cool bridge (Δh 60°) — adds depth without tension
· Text-safe contrast with the anchor (5.16:1, passes WCAG AA)
· Strong lightness separation (ΔL* 50) — clear visual hierarchy
contrast
5.2:1
vs sapphire
#3

Celery #C1FD95

· Triadic harmony (Δh ≈122°) — balanced three-way contrast
· Text-safe contrast with the anchor (6.05:1, passes WCAG AA)
· Strong lightness separation (ΔL* 56) — clear visual hierarchy
contrast
6.0:1
vs sapphire
#4

Mustard Green #A8B504

· Split-complementary angle (Δh ≈152°) — strong but softer than direct complement
· UI contrast with the anchor (3.16:1, passes AA large text)
· Strong lightness separation (ΔL* 33) — clear visual hierarchy
contrast
3.2:1
vs sapphire
#5

Warm Beige #E9DCC9

· Complementary hue (Δh ≈179°) — maximum hue contrast
· Text-safe contrast with the anchor (5.29:1, passes WCAG AA)
· Strong lightness separation (ΔL* 51) — clear visual hierarchy
contrast
5.3:1
vs sapphire
#6

Mint Green #8FFF9F

· Text-safe contrast with the anchor (5.78:1, passes WCAG AA)
· Strong lightness separation (ΔL* 54) — clear visual hierarchy
· Similar saturation (85% vs 100%) — both vivid
contrast
5.8:1
vs sapphire
#7

Baby Green #8CFF9E

· Text-safe contrast with the anchor (5.76:1, passes WCAG AA)
· Strong lightness separation (ΔL* 54) — clear visual hierarchy
· Similar saturation (85% vs 100%) — both vivid
contrast
5.8:1
vs sapphire
#8

Key Lime #AEFF6E

· Triadic harmony (Δh ≈123°) — balanced three-way contrast
· Text-safe contrast with the anchor (5.9:1, passes WCAG AA)
· Strong lightness separation (ΔL* 55) — clear visual hierarchy
contrast
5.9:1
vs sapphire
#9

Light Lime #AEFD6C

· Triadic harmony (Δh ≈124°) — balanced three-way contrast
· Text-safe contrast with the anchor (5.81:1, passes WCAG AA)
· Strong lightness separation (ΔL* 55) — clear visual hierarchy
contrast
5.8:1
vs sapphire
#10

Lightgreen #90EE90

· Text-safe contrast with the anchor (5.05:1, passes WCAG AA)
· Strong lightness separation (ΔL* 49) — clear visual hierarchy
· Similar saturation (85% vs 73%) — both vivid
contrast
5.0:1
vs sapphire

Why these and not others

Pairings are scored against hue-harmony angles (0°/30°/60°/90°/120°/150°/180°), WCAG contrast ratio with sapphire, lightness separation and saturation/chroma compatibility. Near-identical colors (ΔE₀₀ < 3.5) are excluded — every entry adds real information.

FAQ

What colors go with sapphire?

Clear Blue, Mediumspringgreen, Celery, Mustard Green and Warm Beige rank highest for sapphire (#0F52BA) by hue harmony, contrast and saturation compatibility. The full ranked list is on this page with the reasoning for each pairing.

What is the complementary color of sapphire?

The complementary hue of sapphire (hue 216°) sits at hue 36°. The closest named colors on that side of the wheel are listed in the combinations above.

Is sapphire a warm or cool color?

Sapphire is a cool color (hue 216°). It pairs naturally with crisp whites and cool grays.