Pastel Blue to Magical Merlin color palette

93BDFFPastel Blue F8EBB1Sunbeam 47155DPlunged Into Darkness 686900Forestial Outpost 4D8DCEMagical Merlin

Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Blue to Magical Merlin is a 5-color cool palette: #93BDFF (Pastel Blue), #F8EBB1 (Sunbeam), #47155D (Plunged Into Darkness), #686900 (Forestial Outpost), #4D8DCE (Magical Merlin). It mixes blue, yellow, purple, brown tones and feels cool overall. The strongest text pairing is #F8EBB1 on #47155D with a contrast ratio of 11.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Blue	rgb(147, 189, 255)	hsl(217, 100%, 79%)
Sunbeam	rgb(248, 235, 177)	hsl(49, 84%, 83%)
Plunged Into Darkness	rgb(71, 21, 93)	hsl(282, 63%, 22%)
Forestial Outpost	rgb(104, 105, 0)	hsl(61, 100%, 21%)
Magical Merlin	rgb(77, 141, 206)	hsl(210, 57%, 55%)

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.

Aa11.42:1 Very good#F8EBB1 on #47155D
Aa11.42:1 Very good#47155D on #F8EBB1
Aa7.15:1 Very good#93BDFF on #47155D
Aa7.15:1 Very good#47155D on #93BDFF
Aa4.85:1 Good#F8EBB1 on #686900
Aa4.85:1 Good#686900 on #F8EBB1
Aa3.92:1 Poor#47155D on #4D8DCE
Aa3.92:1 Poor#4D8DCE on #47155D

Color blindness preview

CSS variables

/* Pastel Blue to Magical Merlin — https://swatchly.xyz/palette/93bdff-f8ebb1-47155d-686900-4d8dce */
:root {
  --pastel-blue: #93bdff;
  --sunbeam: #f8ebb1;
  --plunged-into-darkness: #47155d;
  --forestial-outpost: #686900;
  --magical-merlin: #4d8dce;
}

Tailwind CSS v4

/* Pastel Blue to Magical Merlin — https://swatchly.xyz/palette/93bdff-f8ebb1-47155d-686900-4d8dce */
@theme {
  --color-pastel-blue: #93bdff;
  --color-pastel-blue-50: #ebf3ff;
  --color-pastel-blue-100: #dae9ff;
  --color-pastel-blue-200: #b9d5ff;
  --color-pastel-blue-300: #93bdff;
  --color-pastel-blue-400: #779edc;
  --color-pastel-blue-500: #5c83c1;
  --color-pastel-blue-600: #4469a4;
  --color-pastel-blue-700: #325388;
  --color-pastel-blue-800: #244170;
  --color-pastel-blue-900: #19325a;
  --color-pastel-blue-950: #0d1f3b;
  --color-sunbeam: #f8ebb1;
  --color-sunbeam-50: #fcf5d5;
  --color-sunbeam-100: #f8ebb1;
  --color-sunbeam-200: #e1d7ad;
  --color-sunbeam-300: #ccc191;
  --color-sunbeam-400: #aea26d;
  --color-sunbeam-500: #938650;
  --color-sunbeam-600: #786c37;
  --color-sunbeam-700: #605524;
  --color-sunbeam-800: #4c4216;
  --color-sunbeam-900: #3b330c;
  --color-sunbeam-950: #251f04;
  --color-plunged-into-darkness: #47155d;
  --color-plunged-into-darkness-50: #faf1ff;
  --color-plunged-into-darkness-100: #f5e4ff;
  --color-plunged-into-darkness-200: #ebc8ff;
  --color-plunged-into-darkness-300: #d9adf2;
  --color-plunged-into-darkness-400: #bc8ad6;
  --color-plunged-into-darkness-500: #a06dbb;
  --color-plunged-into-darkness-600: #84539d;
  --color-plunged-into-darkness-700: #6a3e81;
  --color-plunged-into-darkness-800: #542d68;
  --color-plunged-into-darkness-900: #47155d;
  --color-plunged-into-darkness-950: #2a1235;
  --color-forestial-outpost: #686900;
  --color-forestial-outpost-50: #f7facb;
  --color-forestial-outpost-100: #ecefb9;
  --color-forestial-outpost-200: #d7da9a;
  --color-forestial-outpost-300: #c0c379;
  --color-forestial-outpost-400: #9fa24f;
  --color-forestial-outpost-500: #83852c;
  --color-forestial-outpost-600: #686900;
  --color-forestial-outpost-700: #525300;
  --color-forestial-outpost-800: #404100;
  --color-forestial-outpost-900: #323200;
  --color-forestial-outpost-950: #1f1f00;
  --color-magical-merlin: #4d8dce;
  --color-magical-merlin-50: #eff7ff;
  --color-magical-merlin-100: #dfeeff;
  --color-magical-merlin-200: #bdddff;
  --color-magical-merlin-300: #94c8ff;
  --color-magical-merlin-400: #6ba9e8;
  --color-magical-merlin-500: #4d8dce;
  --color-magical-merlin-600: #3271af;
  --color-magical-merlin-700: #1d5992;
  --color-magical-merlin-800: #0d4577;
  --color-magical-merlin-900: #04355f;
  --color-magical-merlin-950: #01203e;
}