Palettico - Design System Generator
Generate brand shades, state palettes, primitives, and check contrast
Brand Color
Supports HEX, RGB, and HSL inputs. Example: #5B8CFF, rgb(91,140,255), hsl(225,100%,60%)
Background preview
HEX: #5b8cffRGB: rgb(91, 140, 255)HSL: hsl(222, 100%, 68%)Brand shades
/50
#F3F5FC
#F3F5FCrgb(243, 245, 252)hsl(222, 62%, 97%)vs White:1.09:1
vs Black:19.28:1
Recommended:black
/100
#DDE5F8
#DDE5F8rgb(221, 229, 248)hsl(222, 66%, 92%)vs White:1.26:1
vs Black:16.64:1
Recommended:black
/200
#AFC3F3
#AFC3F3rgb(175, 195, 243)hsl(222, 74%, 82%)vs White:1.76:1
vs Black:11.92:1
Recommended:black
/300
#7DA0F2
#7DA0F2rgb(125, 160, 242)hsl(222, 82%, 72%)vs White:2.57:1
vs Black:8.18:1
Recommended:black
/400
#477BF6
#477BF6rgb(71, 123, 246)hsl(222, 90%, 62%)vs White:3.87:1
vs Black:5.43:1
Recommended:black
/500
#0C54FD
#0C54FDrgb(12, 84, 253)hsl(222, 98%, 52%)vs White:5.67:1
vs Black:3.70:1
Recommended:white
/600
#0040D6
#0040D6rgb(0, 64, 214)hsl(222, 100%, 42%)vs White:7.77:1
vs Black:2.70:1
Recommended:white
/700
#0031A3
#0031A3rgb(0, 49, 163)hsl(222, 100%, 32%)vs White:10.67:1
vs Black:1.97:1
Recommended:white
/800
#002270
#002270rgb(0, 34, 112)hsl(222, 100%, 22%)vs White:14.36:1
vs Black:1.46:1
Recommended:white
/900
#001547
#001547rgb(0, 21, 71)hsl(222, 100%, 14%)vs White:17.53:1
vs Black:1.20:1
Recommended:white