Noble Knight

#394d78

Noble, deeper violet-blue for steady high-contrast UI panels

Save
Share

About Noble Knight

On a UI mockup, Noble Knight reads like a deep, steady purple that still stays friendly. It doesn't drift as blue as , and it avoids 's steel-tinted chill. The undertone feels slightly violet-forward, with more softness in the midtones than , so it lands as a composed headline color rather than a margin accent.

I use it for the places where you want hierarchy without the UI feeling guarded: key panels in HR and learning platforms, primary buttons that shouldn't look heavy, and focused states for forms in productivity and workflow apps. It also works well in media tooling, like chapter selectors or timeline highlights, where you need clarity that holds up across dense layouts. It's the one you reach for when dashboards and finance apps benefit from contrast, but you don't want the interaction to feel "locked down."

Pair it with clean cool grays or near-neutrals so the violet warmth stays readable. Against anything too warm, it can tip slightly flat, like the purple stops pushing forward.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
8.38:1AAA

On Gray 100 #f5f5f5

Aa
7.68:1AAA

On Gray 900 #18181b

Aa
2.11:1Fail

On Black #000000

Aa
2.51:1Fail

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#314a76
#2d517c
#2e4a7d
#2d4f83
#384b6b

Create a gradient with Noble Knight

Open the generator with this color pre-loaded.

Start creating