Neon Blue to Bluetiful Color Palette

About this palette

Neon Blue to Bluetiful is a 5-color cool palette: #00D9F0 (Neon Blue), #361400 (Shadow Play), #6A3301 (Meatloaf), #00B0C3 (Aquarius), #3864ED (Bluetiful). It mixes turquoise, brown, blue tones and feels cool overall. The strongest text pairing is #00D9F0 on #361400 with a contrast ratio of 9.69:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Blue	rgb(0, 217, 240)	hsl(186, 100%, 47%)
Shadow Play	rgb(54, 20, 0)	hsl(22, 100%, 11%)
Meatloaf	rgb(106, 51, 1)	hsl(29, 98%, 21%)
Aquarius	rgb(0, 176, 195)	hsl(186, 100%, 38%)
Bluetiful	rgb(56, 100, 237)	hsl(225, 83%, 57%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa9.69:1 Very good#00D9F0 on #361400
Aa9.69:1 Very good#361400 on #00D9F0
Aa6.36:1 Good#361400 on #00B0C3
Aa6.36:1 Good#00B0C3 on #361400
Aa5.84:1 Good#00D9F0 on #6A3301
Aa5.84:1 Good#6A3301 on #00D9F0
Aa3.83:1 Poor#6A3301 on #00B0C3
Aa3.83:1 Poor#00B0C3 on #6A3301

Color blindness preview

CSS variables

/* Neon Blue to Bluetiful — https://swatchly.xyz/palette/00d9f0-361400-6a3301-00b0c3-3864ed */
:root {
  --neon-blue: #00d9f0;
  --shadow-play: #361400;
  --meatloaf: #6a3301;
  --aquarius: #00b0c3;
  --bluetiful: #3864ed;
}

Tailwind CSS v4

/* Neon Blue to Bluetiful — https://swatchly.xyz/palette/00d9f0-361400-6a3301-00b0c3-3864ed */
@theme {
  --color-neon-blue: #00d9f0;
  --color-neon-blue-50: #e1fbff;
  --color-neon-blue-100: #c0f6ff;
  --color-neon-blue-200: #7debfb;
  --color-neon-blue-300: #00d9f0;
  --color-neon-blue-400: #00b6c9;
  --color-neon-blue-500: #0097a8;
  --color-neon-blue-600: #007a87;
  --color-neon-blue-700: #00616c;
  --color-neon-blue-800: #004c55;
  --color-neon-blue-900: #003a42;
  --color-neon-blue-950: #00252a;
  --color-shadow-play: #361400;
  --color-shadow-play-50: #fff2eb;
  --color-shadow-play-100: #ffe5d8;
  --color-shadow-play-200: #f2cfbc;
  --color-shadow-play-300: #dfb7a2;
  --color-shadow-play-400: #c29780;
  --color-shadow-play-500: #a67b64;
  --color-shadow-play-600: #8a614b;
  --color-shadow-play-700: #704c37;
  --color-shadow-play-800: #593a28;
  --color-shadow-play-900: #462b1c;
  --color-shadow-play-950: #361400;
  --color-meatloaf: #6a3301;
  --color-meatloaf-50: #fff2ea;
  --color-meatloaf-100: #ffe6d6;
  --color-meatloaf-200: #feccac;
  --color-meatloaf-300: #ecb48f;
  --color-meatloaf-400: #cf936a;
  --color-meatloaf-500: #b4774d;
  --color-meatloaf-600: #975d34;
  --color-meatloaf-700: #7d4821;
  --color-meatloaf-800: #6a3301;
  --color-meatloaf-900: #502809;
  --color-meatloaf-950: #341803;
  --color-aquarius: #00b0c3;
  --color-aquarius-50: #dbfaff;
  --color-aquarius-100: #b6f5ff;
  --color-aquarius-200: #88e5f3;
  --color-aquarius-300: #5fcfe0;
  --color-aquarius-400: #00b0c3;
  --color-aquarius-500: #0093a3;
  --color-aquarius-600: #007684;
  --color-aquarius-700: #005e69;
  --color-aquarius-800: #004a53;
  --color-aquarius-900: #003a41;
  --color-aquarius-950: #00252a;
  --color-bluetiful: #3864ed;
  --color-bluetiful-50: #f1f5ff;
  --color-bluetiful-100: #e4edff;
  --color-bluetiful-200: #cadaff;
  --color-bluetiful-300: #aac4ff;
  --color-bluetiful-400: #7da3ff;
  --color-bluetiful-500: #5583ff;
  --color-bluetiful-600: #3864ed;
  --color-bluetiful-700: #264bc9;
  --color-bluetiful-800: #1936a7;
  --color-bluetiful-900: #0f2788;
  --color-bluetiful-950: #06155c;
}