lavender
CSS keyword
On white 1.23:1 · Fail
On black 17.06:1 · AAA
Blue Colors
Names, HEX, RGB & Contrast
163 named blue colors, grouped by lightness. Click any value to copy it.
Light
26 colors
lightsteelblue
CSS keyword
On white 1.78:1 · Fail
On black 11.8:1 · AAA
lightskyblue
CSS keyword
On white 1.72:1 · Fail
On black 12.24:1 · AAA
skyblue
CSS keyword
On white 1.74:1 · Fail
On black 12.06:1 · AAA
pale lilac
On white 1.47:1 · Fail
On black 14.29:1 · AAA
light lavender
On white 1.55:1 · Fail
On black 13.56:1 · AAA
light periwinkle
On white 1.65:1 · Fail
On black 12.75:1 · AAA
light violet
On white 1.78:1 · Fail
On black 11.79:1 · AAA
powder blue
On white 1.57:1 · Fail
On black 13.4:1 · AAA
pale violet
On white 1.9:1 · Fail
On black 11.06:1 · AAA
pastel blue
On white 1.84:1 · Fail
On black 11.42:1 · AAA
baby blue
On white 1.63:1 · Fail
On black 12.89:1 · AAA
pastel purple
On white 2.1:1 · Fail
On black 9.98:1 · AAA
lilac
On white 2.06:1 · Fail
On black 10.21:1 · AAA
light blue grey
On white 1.68:1 · Fail
On black 12.47:1 · AAA
light blue
On white 1.65:1 · Fail
On black 12.71:1 · AAA
liliac
On white 2.43:1 · Fail
On black 8.63:1 · AAA
periwinkle blue
On white 2.59:1 · Fail
On black 8.12:1 · AAA
carolina blue
On white 2.03:1 · Fail
On black 10.37:1 · AAA
cloudy blue
On white 1.83:1 · Fail
On black 11.47:1 · AAA
lavender blue
On white 3.01:1 · AA Large
On black 6.97:1 · AA
periwinkle
On white 3.1:1 · AA Large
On black 6.77:1 · AA
sky
On white 1.78:1 · Fail
On black 11.8:1 · AAA
perrywinkle
On white 2.97:1 · Fail
On black 7.07:1 · AAA
sky blue
On white 2.04:1 · Fail
On black 10.28:1 · AAA
light grey blue
On white 1.99:1 · Fail
On black 10.58:1 · AAA
Mid-tone
105 colors
mediumslateblue
CSS keyword
On white 4.15:1 · AA Large
On black 5.06:1 · AA
cornflowerblue
CSS keyword
On white 2.97:1 · Fail
On black 7.06:1 · AAA
mediumpurple
CSS keyword
On white 3.76:1 · AA Large
On black 5.58:1 · AA
slateblue
CSS keyword
On white 5.31:1 · AA
On black 3.96:1 · AA Large
royalblue
CSS keyword
On white 4.85:1 · AA
On black 4.33:1 · AA Large
dodgerblue
CSS keyword
On white 3.24:1 · AA Large
On black 6.49:1 · AA
lightslategray
CSS keyword
On white 3.64:1 · AA Large
On black 5.77:1 · AA
lightslategrey
CSS keyword
On white 3.64:1 · AA Large
On black 5.77:1 · AA
slategray
CSS keyword
On white 4.05:1 · AA Large
On black 5.18:1 · AA
slategrey
CSS keyword
On white 4.05:1 · AA Large
On black 5.18:1 · AA
blue
CSS keyword
On white 8.59:1 · AAA
On black 2.44:1 · Fail
deepskyblue
CSS keyword
On white 2.12:1 · Fail
On black 9.9:1 · AAA
steelblue
CSS keyword
On white 4.11:1 · AA Large
On black 5.11:1 · AA
mediumblue
CSS keyword
On white 11.16:1 · AAA
On black 1.88:1 · Fail
darkslateblue
CSS keyword
On white 9.07:1 · AAA
On black 2.32:1 · Fail
cornflower
On white 3.69:1 · AA Large
On black 5.69:1 · AA
soft blue
On white 3.36:1 · AA Large
On black 6.25:1 · AA
lighter purple
On white 3.91:1 · AA Large
On black 5.37:1 · AA
dodger blue
On white 3.62:1 · AA Large
On black 5.8:1 · AA
purpley
On white 4.69:1 · AA
On black 4.48:1 · AA Large
lightish blue
On white 3.89:1 · AA Large
On black 5.4:1 · AA
bluey grey
On white 2.72:1 · Fail
On black 7.72:1 · AAA
bluegrey
On white 2.67:1 · Fail
On black 7.88:1 · AAA
dark periwinkle
On white 5.09:1 · AA
On black 4.12:1 · AA Large
purpleish blue
On white 6.02:1 · AA
On black 3.49:1 · AA Large
light royal blue
On white 7:1 · AAA
On black 3:1 · AA Large
greyblue
On white 2.78:1 · Fail
On black 7.55:1 · AAA
light indigo
On white 5.23:1 · AA
On black 4.01:1 · AA Large
dark sky blue
On white 3.37:1 · AA Large
On black 6.24:1 · AA
cornflower blue
On white 4.52:1 · AA
On black 4.65:1 · AA
warm blue
On white 5.7:1 · AA
On black 3.69:1 · AA Large
bluish purple
On white 6.05:1 · AA
On black 3.47:1 · AA Large
clear blue
On white 3.98:1 · AA Large
On black 5.28:1 · AA
faded blue
On white 3.49:1 · AA Large
On black 6.02:1 · AA
iris
On white 5.66:1 · AA
On black 3.71:1 · AA Large
purpley blue
On white 6.71:1 · AA
On black 3.13:1 · AA Large
blue/grey
On white 3.45:1 · AA Large
On black 6.1:1 · AA
purplish blue
On white 6.88:1 · AA
On black 3.05:1 · AA Large
purple blue
On white 6.81:1 · AA
On black 3.08:1 · AA Large
burple
On white 6.66:1 · AA
On black 3.15:1 · AA Large
vivid blue
On white 7.33:1 · AAA
On black 2.87:1 · Fail
grey blue
On white 3.59:1 · AA Large
On black 5.85:1 · AA
bluish grey
On white 3.57:1 · AA Large
On black 5.88:1 · AA
azul
On white 5.48:1 · AA
On black 3.83:1 · AA Large
bluey purple
On white 6.77:1 · AA
On black 3.1:1 · AA Large
purply blue
On white 7.13:1 · AAA
On black 2.95:1 · Fail
steel
On white 3.81:1 · AA Large
On black 5.52:1 · AA
dusty blue
On white 3.85:1 · AA Large
On black 5.45:1 · AA
deep sky blue
On white 4.27:1 · AA Large
On black 4.92:1 · AA
blurple
On white 7.39:1 · AAA
On black 2.84:1 · Fail
electric blue
On white 5.74:1 · AA
On black 3.66:1 · AA Large
off blue
On white 3.96:1 · AA Large
On black 5.31:1 · AA
blue with a hint of purple
On white 7.42:1 · AAA
On black 2.83:1 · Fail
cool blue
On white 3.98:1 · AA Large
On black 5.28:1 · AA
strong blue
On white 8.81:1 · AAA
On black 2.38:1 · Fail
primary blue
On white 8.77:1 · AAA
On black 2.4:1 · Fail
bright blue
On white 4.92:1 · AA
On black 4.27:1 · AA Large
rich blue
On white 8.31:1 · AAA
On black 2.53:1 · Fail
vibrant blue
On white 7.13:1 · AAA
On black 2.94:1 · Fail
greyish blue
On white 4.12:1 · AA Large
On black 5.1:1 · AA
steel grey
On white 4.01:1 · AA Large
On black 5.24:1 · AA
blue purple
On white 8.03:1 · AAA
On black 2.61:1 · Fail
windows blue
On white 4.56:1 · AA
On black 4.6:1 · AA
blue/purple
On white 7.76:1 · AAA
On black 2.71:1 · Fail
steel blue
On white 4.34:1 · AA Large
On black 4.83:1 · AA
slate blue
On white 4.39:1 · AA Large
On black 4.79:1 · AA
cerulean blue
On white 4.7:1 · AA
On black 4.47:1 · AA Large
grey/blue
On white 4.32:1 · AA Large
On black 4.87:1 · AA
purple/blue
On white 8.1:1 · AAA
On black 2.59:1 · Fail
battleship grey
On white 4.33:1 · AA Large
On black 4.85:1 · AA
french blue
On white 5.32:1 · AA
On black 3.95:1 · AA Large
blue violet
On white 7.87:1 · AAA
On black 2.67:1 · Fail
blue grey
On white 4.4:1 · AA Large
On black 4.77:1 · AA
stormy blue
On white 4.51:1 · AA
On black 4.65:1 · AA
blue blue
On white 7.86:1 · AAA
On black 2.67:1 · Fail
medium blue
On white 5.12:1 · AA
On black 4.1:1 · AA Large
dull blue
On white 4.87:1 · AA
On black 4.31:1 · AA Large
flat blue
On white 4.99:1 · AA
On black 4.21:1 · AA Large
pure blue
On white 9.93:1 · AAA
On black 2.11:1 · Fail
bluish
On white 4.77:1 · AA
On black 4.4:1 · AA Large
cadet blue
On white 4.93:1 · AA
On black 4.26:1 · AA Large
ultramarine blue
On white 10.08:1 · AAA
On black 2.08:1 · Fail
metallic blue
On white 5.03:1 · AA
On black 4.18:1 · AA Large
dirty blue
On white 4.29:1 · AA Large
On black 4.89:1 · AA
dusky blue
On white 6.3:1 · AA
On black 3.33:1 · AA Large
water blue
On white 3.92:1 · AA Large
On black 5.36:1 · AA
muted blue
On white 5.19:1 · AA
On black 4.05:1 · AA Large
mid blue
On white 5.53:1 · AA
On black 3.8:1 · AA Large
twilight
On white 7.31:1 · AAA
On black 2.87:1 · Fail
blueberry
On white 8.55:1 · AAA
On black 2.46:1 · Fail
cerulean
On white 3.98:1 · AA Large
On black 5.28:1 · AA
violet blue
On white 9.39:1 · AAA
On black 2.24:1 · Fail
dusk
On white 7.22:1 · AAA
On black 2.91:1 · Fail
denim blue
On white 6.78:1 · AA
On black 3.1:1 · AA Large
true blue
On white 10.82:1 · AAA
On black 1.94:1 · Fail
sapphire
On white 9.47:1 · AAA
On black 2.22:1 · Fail
indigo blue
On white 10.79:1 · AAA
On black 1.95:1 · Fail
denim
On white 6.27:1 · AA
On black 3.35:1 · AA Large
slate grey
On white 5.99:1 · AA
On black 3.51:1 · AA Large
slate
On white 6.08:1 · AA
On black 3.45:1 · AA Large
nice blue
On white 4.74:1 · AA
On black 4.43:1 · AA Large
ugly blue
On white 6.18:1 · AA
On black 3.4:1 · AA Large
gunmetal
On white 6.34:1 · AA
On black 3.31:1 · AA Large
light navy blue
On white 7.16:1 · AAA
On black 2.93:1 · Fail
dusk blue
On white 7.77:1 · AAA
On black 2.7:1 · Fail
Dark
32 colors
darkblue
CSS keyword
On white 15.3:1 · AAA
On black 1.37:1 · Fail
midnightblue
CSS keyword
On white 14.85:1 · AAA
On black 1.41:1 · Fail
navy
CSS keyword
On white 16.01:1 · AAA
On black 1.31:1 · Fail
ultramarine
On white 12.38:1 · AAA
On black 1.7:1 · Fail
royal blue
On white 13.09:1 · AAA
On black 1.6:1 · Fail
cobalt
On white 8.83:1 · AAA
On black 2.38:1 · Fail
cobalt blue
On white 13.08:1 · AAA
On black 1.61:1 · Fail
royal
On white 13.47:1 · AAA
On black 1.56:1 · Fail
ocean blue
On white 5.46:1 · AA
On black 3.85:1 · AA Large
light navy
On white 8.36:1 · AAA
On black 2.51:1 · Fail
peacock blue
On white 6.22:1 · AA
On black 3.38:1 · AA Large
twilight blue
On white 10.02:1 · AAA
On black 2.1:1 · Fail
dark grey blue
On white 9.9:1 · AAA
On black 2.12:1 · Fail
deep sea blue
On white 8.1:1 · AAA
On black 2.59:1 · Fail
darkish blue
On white 10.1:1 · AAA
On black 2.08:1 · Fail
dark slate blue
On white 9.82:1 · AAA
On black 2.14:1 · Fail
prussian blue
On white 9.92:1 · AAA
On black 2.12:1 · Fail
deep blue
On white 16.65:1 · AAA
On black 1.26:1 · Fail
dark royal blue
On white 16.69:1 · AAA
On black 1.26:1 · Fail
dark blue grey
On white 11.73:1 · AAA
On black 1.79:1 · Fail
marine blue
On white 11.83:1 · AAA
On black 1.78:1 · Fail
marine
On white 13.42:1 · AAA
On black 1.56:1 · Fail
dark indigo
On white 17.14:1 · AAA
On black 1.23:1 · Fail
dark blue
On white 18.04:1 · AAA
On black 1.16:1 · Fail
dark
On white 15.63:1 · AAA
On black 1.34:1 · Fail
night blue
On white 18.89:1 · AAA
On black 1.11:1 · Fail
navy blue
On white 17.97:1 · AAA
On black 1.17:1 · Fail
dark navy
On white 19.65:1 · AAA
On black 1.07:1 · Fail
midnight blue
On white 19.92:1 · AAA
On black 1.05:1 · Fail
very dark blue
On white 19.96:1 · AAA
On black 1.05:1 · Fail
midnight
On white 20.07:1 · AAA
On black 1.05:1 · Fail
dark navy blue
On white 20.04:1 · AAA
On black 1.05:1 · Fail
Copy the whole palette
Every blue color on this page, ready to paste into your project.
CSS
:root {
--lavender: #e6e6fa;
--lightsteelblue: #b0c4de;
--lightskyblue: #87cefa;
--skyblue: #87ceeb;
--mediumslateblue: #7b68ee;
--cornflowerblue: #6495ed;
--mediumpurple: #9370db;
--slateblue: #6a5acd;
--royalblue: #4169e1;
--dodgerblue: #1e90ff;
--lightslategray: #778899;
--lightslategrey: #778899;
--slategray: #708090;
--slategrey: #708090;
--blue: #0000ff;
--deepskyblue: #00bfff;
--steelblue: #4682b4;
--mediumblue: #0000cd;
--darkslateblue: #483d8b;
--darkblue: #00008b;
--midnightblue: #191970;
--navy: #000080;
--pale-lilac: #e4cbff;
--light-lavender: #dfc5fe;
--light-periwinkle: #c1c6fc;
--light-violet: #d6b4fc;
--powder-blue: #b1d1fc;
--pale-violet: #ceaefa;
--pastel-blue: #a2bffe;
--baby-blue: #a2cffe;
--pastel-purple: #caa0ff;
--lilac: #cea2fd;
--light-blue-grey: #b7c9e2;
--light-blue: #95d0fc;
--liliac: #c48efd;
--periwinkle-blue: #8f99fb;
--carolina-blue: #8ab8fe;
--cloudy-blue: #acc2d9;
--lavender-blue: #8b88f8;
--periwinkle: #8e82fe;
--sky: #82cafc;
--perrywinkle: #8f8ce7;
--sky-blue: #75bbfd;
--light-grey-blue: #9dbcd4;
--cornflower: #6a79f7;
--soft-blue: #6488ea;
--lighter-purple: #a55af4;
--dodger-blue: #3e82fc;
--purpley: #8756e4;
--lightish-blue: #3d7afd;
--bluey-grey: #89a0b0;
--bluegrey: #85a3b2;
--dark-periwinkle: #665fd1;
--purpleish-blue: #6140ef;
--light-royal-blue: #3a2efe;
--greyblue: #77a1b5;
--light-indigo: #6d5acf;
--dark-sky-blue: #448ee4;
--cornflower-blue: #5170d7;
--warm-blue: #4b57db;
--bluish-purple: #703be7;
--clear-blue: #247afd;
--faded-blue: #658cbb;
--iris: #6258c4;
--purpley-blue: #5f34e7;
--blue-grey: #758da3;
--purplish-blue: #601ef9;
--purple-blue: #632de9;
--burple: #6832e3;
--vivid-blue: #152eff;
--grey-blue: #6b8ba4;
--bluish-grey: #748b97;
--azul: #1d5dec;
--bluey-purple: #6241c7;
--purply-blue: #661aee;
--steel: #738595;
--dusty-blue: #5a86ad;
--deep-sky-blue: #0d75f8;
--blurple: #5539cc;
--electric-blue: #0652ff;
--off-blue: #5684ae;
--blue-with-a-hint-of-purple: #533cc6;
--cool-blue: #4984b8;
--strong-blue: #0c06f7;
--primary-blue: #0804f9;
--bright-blue: #0165fc;
--rich-blue: #021bf9;
--vibrant-blue: #0339f8;
--greyish-blue: #5e819d;
--steel-grey: #6f828a;
--blue-purple: #5729ce;
--windows-blue: #3778bf;
--blue-purple: #5a06ef;
--steel-blue: #5a7d9a;
--slate-blue: #5b7c99;
--cerulean-blue: #056eee;
--grey-blue: #647d8e;
--purple-blue: #5d21d0;
--battleship-grey: #6b7c85;
--french-blue: #436bad;
--blue-violet: #5d06e9;
--blue-grey: #607c8e;
--stormy-blue: #507b9c;
--blue-blue: #2242c7;
--medium-blue: #2c6fbb;
--dull-blue: #49759c;
--flat-blue: #3c73a8;
--pure-blue: #0203e2;
--bluish: #2976bb;
--cadet-blue: #4e7496;
--ultramarine-blue: #1805db;
--metallic-blue: #4f738e;
--dirty-blue: #3f829d;
--dusky-blue: #475f94;
--water-blue: #0e87cc;
--muted-blue: #3b719f;
--mid-blue: #276ab3;
--twilight: #4e518b;
--blueberry: #464196;
--cerulean: #0485d1;
--violet-blue: #510ac9;
--dusk: #4e5481;
--denim-blue: #3b5b92;
--true-blue: #010fcc;
--sapphire: #2138ab;
--indigo-blue: #3a18b1;
--denim: #3b638c;
--slate-grey: #59656d;
--slate: #516572;
--nice-blue: #107ab0;
--ugly-blue: #31668a;
--gunmetal: #536267;
--light-navy-blue: #2e5a88;
--dusk-blue: #26538d;
--ultramarine: #2000b1;
--royal-blue: #0504aa;
--cobalt: #1e488f;
--cobalt-blue: #030aa7;
--royal: #0c1793;
--ocean-blue: #03719c;
--light-navy: #155084;
--peacock-blue: #016795;
--twilight-blue: #0a437a;
--dark-grey-blue: #29465b;
--deep-sea-blue: #015482;
--darkish-blue: #014182;
--dark-slate-blue: #214761;
--prussian-blue: #004577;
--deep-blue: #040273;
--dark-royal-blue: #02066f;
--dark-blue-grey: #1f3b4d;
--marine-blue: #01386a;
--marine: #042e60;
--dark-indigo: #1f0954;
--dark-blue: #00035b;
--dark: #1b2431;
--night-blue: #040348;
--navy-blue: #001146;
--dark-navy: #000435;
--midnight-blue: #020035;
--very-dark-blue: #000133;
--midnight: #03012d;
--dark-navy-blue: #00022e;
} SCSS
$lavender: #e6e6fa; $lightsteelblue: #b0c4de; $lightskyblue: #87cefa; $skyblue: #87ceeb; $mediumslateblue: #7b68ee; $cornflowerblue: #6495ed; $mediumpurple: #9370db; $slateblue: #6a5acd; $royalblue: #4169e1; $dodgerblue: #1e90ff; $lightslategray: #778899; $lightslategrey: #778899; $slategray: #708090; $slategrey: #708090; $blue: #0000ff; $deepskyblue: #00bfff; $steelblue: #4682b4; $mediumblue: #0000cd; $darkslateblue: #483d8b; $darkblue: #00008b; $midnightblue: #191970; $navy: #000080; $pale-lilac: #e4cbff; $light-lavender: #dfc5fe; $light-periwinkle: #c1c6fc; $light-violet: #d6b4fc; $powder-blue: #b1d1fc; $pale-violet: #ceaefa; $pastel-blue: #a2bffe; $baby-blue: #a2cffe; $pastel-purple: #caa0ff; $lilac: #cea2fd; $light-blue-grey: #b7c9e2; $light-blue: #95d0fc; $liliac: #c48efd; $periwinkle-blue: #8f99fb; $carolina-blue: #8ab8fe; $cloudy-blue: #acc2d9; $lavender-blue: #8b88f8; $periwinkle: #8e82fe; $sky: #82cafc; $perrywinkle: #8f8ce7; $sky-blue: #75bbfd; $light-grey-blue: #9dbcd4; $cornflower: #6a79f7; $soft-blue: #6488ea; $lighter-purple: #a55af4; $dodger-blue: #3e82fc; $purpley: #8756e4; $lightish-blue: #3d7afd; $bluey-grey: #89a0b0; $bluegrey: #85a3b2; $dark-periwinkle: #665fd1; $purpleish-blue: #6140ef; $light-royal-blue: #3a2efe; $greyblue: #77a1b5; $light-indigo: #6d5acf; $dark-sky-blue: #448ee4; $cornflower-blue: #5170d7; $warm-blue: #4b57db; $bluish-purple: #703be7; $clear-blue: #247afd; $faded-blue: #658cbb; $iris: #6258c4; $purpley-blue: #5f34e7; $blue-grey: #758da3; $purplish-blue: #601ef9; $purple-blue: #632de9; $burple: #6832e3; $vivid-blue: #152eff; $grey-blue: #6b8ba4; $bluish-grey: #748b97; $azul: #1d5dec; $bluey-purple: #6241c7; $purply-blue: #661aee; $steel: #738595; $dusty-blue: #5a86ad; $deep-sky-blue: #0d75f8; $blurple: #5539cc; $electric-blue: #0652ff; $off-blue: #5684ae; $blue-with-a-hint-of-purple: #533cc6; $cool-blue: #4984b8; $strong-blue: #0c06f7; $primary-blue: #0804f9; $bright-blue: #0165fc; $rich-blue: #021bf9; $vibrant-blue: #0339f8; $greyish-blue: #5e819d; $steel-grey: #6f828a; $blue-purple: #5729ce; $windows-blue: #3778bf; $blue-purple: #5a06ef; $steel-blue: #5a7d9a; $slate-blue: #5b7c99; $cerulean-blue: #056eee; $grey-blue: #647d8e; $purple-blue: #5d21d0; $battleship-grey: #6b7c85; $french-blue: #436bad; $blue-violet: #5d06e9; $blue-grey: #607c8e; $stormy-blue: #507b9c; $blue-blue: #2242c7; $medium-blue: #2c6fbb; $dull-blue: #49759c; $flat-blue: #3c73a8; $pure-blue: #0203e2; $bluish: #2976bb; $cadet-blue: #4e7496; $ultramarine-blue: #1805db; $metallic-blue: #4f738e; $dirty-blue: #3f829d; $dusky-blue: #475f94; $water-blue: #0e87cc; $muted-blue: #3b719f; $mid-blue: #276ab3; $twilight: #4e518b; $blueberry: #464196; $cerulean: #0485d1; $violet-blue: #510ac9; $dusk: #4e5481; $denim-blue: #3b5b92; $true-blue: #010fcc; $sapphire: #2138ab; $indigo-blue: #3a18b1; $denim: #3b638c; $slate-grey: #59656d; $slate: #516572; $nice-blue: #107ab0; $ugly-blue: #31668a; $gunmetal: #536267; $light-navy-blue: #2e5a88; $dusk-blue: #26538d; $ultramarine: #2000b1; $royal-blue: #0504aa; $cobalt: #1e488f; $cobalt-blue: #030aa7; $royal: #0c1793; $ocean-blue: #03719c; $light-navy: #155084; $peacock-blue: #016795; $twilight-blue: #0a437a; $dark-grey-blue: #29465b; $deep-sea-blue: #015482; $darkish-blue: #014182; $dark-slate-blue: #214761; $prussian-blue: #004577; $deep-blue: #040273; $dark-royal-blue: #02066f; $dark-blue-grey: #1f3b4d; $marine-blue: #01386a; $marine: #042e60; $dark-indigo: #1f0954; $dark-blue: #00035b; $dark: #1b2431; $night-blue: #040348; $navy-blue: #001146; $dark-navy: #000435; $midnight-blue: #020035; $very-dark-blue: #000133; $midnight: #03012d; $dark-navy-blue: #00022e;
Tailwind
theme: {
extend: {
colors: {
"lavender": "#e6e6fa",
"lightsteelblue": "#b0c4de",
"lightskyblue": "#87cefa",
"skyblue": "#87ceeb",
"mediumslateblue": "#7b68ee",
"cornflowerblue": "#6495ed",
"mediumpurple": "#9370db",
"slateblue": "#6a5acd",
"royalblue": "#4169e1",
"dodgerblue": "#1e90ff",
"lightslategray": "#778899",
"lightslategrey": "#778899",
"slategray": "#708090",
"slategrey": "#708090",
"blue": "#0000ff",
"deepskyblue": "#00bfff",
"steelblue": "#4682b4",
"mediumblue": "#0000cd",
"darkslateblue": "#483d8b",
"darkblue": "#00008b",
"midnightblue": "#191970",
"navy": "#000080",
"pale-lilac": "#e4cbff",
"light-lavender": "#dfc5fe",
"light-periwinkle": "#c1c6fc",
"light-violet": "#d6b4fc",
"powder-blue": "#b1d1fc",
"pale-violet": "#ceaefa",
"pastel-blue": "#a2bffe",
"baby-blue": "#a2cffe",
"pastel-purple": "#caa0ff",
"lilac": "#cea2fd",
"light-blue-grey": "#b7c9e2",
"light-blue": "#95d0fc",
"liliac": "#c48efd",
"periwinkle-blue": "#8f99fb",
"carolina-blue": "#8ab8fe",
"cloudy-blue": "#acc2d9",
"lavender-blue": "#8b88f8",
"periwinkle": "#8e82fe",
"sky": "#82cafc",
"perrywinkle": "#8f8ce7",
"sky-blue": "#75bbfd",
"light-grey-blue": "#9dbcd4",
"cornflower": "#6a79f7",
"soft-blue": "#6488ea",
"lighter-purple": "#a55af4",
"dodger-blue": "#3e82fc",
"purpley": "#8756e4",
"lightish-blue": "#3d7afd",
"bluey-grey": "#89a0b0",
"bluegrey": "#85a3b2",
"dark-periwinkle": "#665fd1",
"purpleish-blue": "#6140ef",
"light-royal-blue": "#3a2efe",
"greyblue": "#77a1b5",
"light-indigo": "#6d5acf",
"dark-sky-blue": "#448ee4",
"cornflower-blue": "#5170d7",
"warm-blue": "#4b57db",
"bluish-purple": "#703be7",
"clear-blue": "#247afd",
"faded-blue": "#658cbb",
"iris": "#6258c4",
"purpley-blue": "#5f34e7",
"blue-grey": "#758da3",
"purplish-blue": "#601ef9",
"purple-blue": "#632de9",
"burple": "#6832e3",
"vivid-blue": "#152eff",
"grey-blue": "#6b8ba4",
"bluish-grey": "#748b97",
"azul": "#1d5dec",
"bluey-purple": "#6241c7",
"purply-blue": "#661aee",
"steel": "#738595",
"dusty-blue": "#5a86ad",
"deep-sky-blue": "#0d75f8",
"blurple": "#5539cc",
"electric-blue": "#0652ff",
"off-blue": "#5684ae",
"blue-with-a-hint-of-purple": "#533cc6",
"cool-blue": "#4984b8",
"strong-blue": "#0c06f7",
"primary-blue": "#0804f9",
"bright-blue": "#0165fc",
"rich-blue": "#021bf9",
"vibrant-blue": "#0339f8",
"greyish-blue": "#5e819d",
"steel-grey": "#6f828a",
"blue-purple": "#5729ce",
"windows-blue": "#3778bf",
"blue-purple": "#5a06ef",
"steel-blue": "#5a7d9a",
"slate-blue": "#5b7c99",
"cerulean-blue": "#056eee",
"grey-blue": "#647d8e",
"purple-blue": "#5d21d0",
"battleship-grey": "#6b7c85",
"french-blue": "#436bad",
"blue-violet": "#5d06e9",
"blue-grey": "#607c8e",
"stormy-blue": "#507b9c",
"blue-blue": "#2242c7",
"medium-blue": "#2c6fbb",
"dull-blue": "#49759c",
"flat-blue": "#3c73a8",
"pure-blue": "#0203e2",
"bluish": "#2976bb",
"cadet-blue": "#4e7496",
"ultramarine-blue": "#1805db",
"metallic-blue": "#4f738e",
"dirty-blue": "#3f829d",
"dusky-blue": "#475f94",
"water-blue": "#0e87cc",
"muted-blue": "#3b719f",
"mid-blue": "#276ab3",
"twilight": "#4e518b",
"blueberry": "#464196",
"cerulean": "#0485d1",
"violet-blue": "#510ac9",
"dusk": "#4e5481",
"denim-blue": "#3b5b92",
"true-blue": "#010fcc",
"sapphire": "#2138ab",
"indigo-blue": "#3a18b1",
"denim": "#3b638c",
"slate-grey": "#59656d",
"slate": "#516572",
"nice-blue": "#107ab0",
"ugly-blue": "#31668a",
"gunmetal": "#536267",
"light-navy-blue": "#2e5a88",
"dusk-blue": "#26538d",
"ultramarine": "#2000b1",
"royal-blue": "#0504aa",
"cobalt": "#1e488f",
"cobalt-blue": "#030aa7",
"royal": "#0c1793",
"ocean-blue": "#03719c",
"light-navy": "#155084",
"peacock-blue": "#016795",
"twilight-blue": "#0a437a",
"dark-grey-blue": "#29465b",
"deep-sea-blue": "#015482",
"darkish-blue": "#014182",
"dark-slate-blue": "#214761",
"prussian-blue": "#004577",
"deep-blue": "#040273",
"dark-royal-blue": "#02066f",
"dark-blue-grey": "#1f3b4d",
"marine-blue": "#01386a",
"marine": "#042e60",
"dark-indigo": "#1f0954",
"dark-blue": "#00035b",
"dark": "#1b2431",
"night-blue": "#040348",
"navy-blue": "#001146",
"dark-navy": "#000435",
"midnight-blue": "#020035",
"very-dark-blue": "#000133",
"midnight": "#03012d",
"dark-navy-blue": "#00022e",
}
}
} Browse other color families
Copied
Blue color names
Blue is the widest family here, hue 195–270°, running from sky and powder blue through royal and cobalt down to navy and midnight. It is the most-used colour in interface design, partly because it is the safest: blue is the least likely hue to be misread by colour-blind users.
Using these colors
Blue is the default for links, primary buttons and trust signals. It pairs with almost anything, which is exactly why it is so common — orange for high contrast, grey for restraint, white for clarity. If you want a blue that does not read as generic, move toward the indigo end or desaturate toward slate rather than reaching for pure #0000ff.
Contrast and accessibility
This family behaves well: mid and dark blues comfortably pass AA as text on white, and navy usually reaches AAA. Light blues should be treated as backgrounds. Because blue is the standard link colour, keep underlines or another non-colour cue so links stay identifiable without hue.