CColorWell
Get ColorWell

ColorWell · contrast check

White or black text on #5865f2?

Discord blurple

Use white text. It gives 4.61:1, which passes AA, not AAA.

White text
4.61:1
passes AA, not AAA
Black text
4.56:1
passes AA, not AAA

What the thresholds mean

LevelNeedsWhite textBlack text
AA, normal text4.5:1passpass
AA, large text (18pt+/14pt bold)3:1passpass
AAA, normal text7:1failfail

The colour itself

Shade ramp

#d9edff #c1d7ff #a3baff #8196ff #5d6aff #464fce #31369f #1d1d72 #0c0548

Paste this into your config

// tailwind.config.js
colors: {
  brand: {
    100: "#d9edff",
    200: "#c1d7ff",
    300: "#a3baff",
    400: "#8196ff",
    500: "#5d6aff",
    600: "#464fce",
    700: "#31369f",
    800: "#1d1d72",
    900: "#0c0548",
  },
}

Text colour to pair with the 500 shade (#5d6aff): black, at 4.97:1. For #5865f2 itself it is white, at 4.61:1.

Your own colours, the same way

Paste any hex and get this page for it live — ratio, verdict, ramp. Export the whole palette to CSS variables, a Tailwind config or Figma tokens when you want it in the project rather than on the screen.

Open ColorWell

Other colours