Blue Jay to Pheasant color palette

4185D9Blue Jay FFCDAAPolly 453E00Alligator Gladiator 98BAFCPastel Blue 535C1DReptile Revenge C27C56Pheasant

Open in generator Export PNG, PDF, ASE…

About this palette

Blue Jay to Pheasant is a 6-color earthy, vintage palette: #4185D9 (Blue Jay), #FFCDAA (Polly), #453E00 (Alligator Gladiator), #98BAFC (Pastel Blue), #535C1D (Reptile Revenge), #C27C56 (Pheasant). It mixes blue, orange, brown, green tones and feels balanced overall. The strongest text pairing is #FFCDAA on #453E00 with a contrast ratio of 7.50:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Jay	rgb(65, 133, 217)	hsl(213, 67%, 55%)
Polly	rgb(255, 205, 170)	hsl(25, 100%, 83%)
Alligator Gladiator	rgb(69, 62, 0)	hsl(54, 100%, 14%)
Pastel Blue	rgb(152, 186, 252)	hsl(220, 94%, 79%)
Reptile Revenge	rgb(83, 92, 29)	hsl(69, 52%, 24%)
Pheasant	rgb(194, 124, 86)	hsl(21, 47%, 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.

Aa7.50:1 Very good#FFCDAA on #453E00
Aa7.50:1 Very good#453E00 on #FFCDAA
Aa5.54:1 Good#453E00 on #98BAFC
Aa5.54:1 Good#98BAFC on #453E00
Aa4.99:1 Good#FFCDAA on #535C1D
Aa4.99:1 Good#535C1D on #FFCDAA
Aa3.69:1 Poor#98BAFC on #535C1D
Aa3.69:1 Poor#535C1D on #98BAFC

Color blindness preview

CSS variables

/* Blue Jay to Pheasant — https://swatchly.xyz/palette/4185d9-ffcdaa-453e00-98bafc-535c1d-c27c56 */
:root {
  --blue-jay: #4185d9;
  --polly: #ffcdaa;
  --alligator-gladiator: #453e00;
  --pastel-blue: #98bafc;
  --reptile-revenge: #535c1d;
  --pheasant: #c27c56;
}

Tailwind CSS v4

/* Blue Jay to Pheasant — https://swatchly.xyz/palette/4185d9-ffcdaa-453e00-98bafc-535c1d-c27c56 */
@theme {
  --color-blue-jay: #4185d9;
  --color-blue-jay-50: #eef5ff;
  --color-blue-jay-100: #ddecff;
  --color-blue-jay-200: #bcd9ff;
  --color-blue-jay-300: #94c3ff;
  --color-blue-jay-400: #60a2f5;
  --color-blue-jay-500: #4185d9;
  --color-blue-jay-600: #276aba;
  --color-blue-jay-700: #12539c;
  --color-blue-jay-800: #034080;
  --color-blue-jay-900: #003166;
  --color-blue-jay-950: #001e43;
  --color-polly: #ffcdaa;
  --color-polly-50: #fff3ec;
  --color-polly-100: #ffe7d7;
  --color-polly-200: #ffcdaa;
  --color-polly-300: #e2b89b;
  --color-polly-400: #c59777;
  --color-polly-500: #a97b5b;
  --color-polly-600: #8c6142;
  --color-polly-700: #724b2e;
  --color-polly-800: #5b3920;
  --color-polly-900: #482b15;
  --color-polly-950: #2e1a0a;
  --color-alligator-gladiator: #453e00;
  --color-alligator-gladiator-50: #faf7d7;
  --color-alligator-gladiator-100: #f1edca;
  --color-alligator-gladiator-200: #dedaaf;
  --color-alligator-gladiator-300: #c8c292;
  --color-alligator-gladiator-400: #a8a26c;
  --color-alligator-gladiator-500: #8c854e;
  --color-alligator-gladiator-600: #706a35;
  --color-alligator-gladiator-700: #585221;
  --color-alligator-gladiator-800: #453e00;
  --color-alligator-gladiator-900: #342f0b;
  --color-alligator-gladiator-950: #201d04;
  --color-pastel-blue: #98bafc;
  --color-pastel-blue-50: #ebf2ff;
  --color-pastel-blue-100: #dae7ff;
  --color-pastel-blue-200: #bbd2ff;
  --color-pastel-blue-300: #98bafc;
  --color-pastel-blue-400: #7c9cda;
  --color-pastel-blue-500: #6281bf;
  --color-pastel-blue-600: #4a67a2;
  --color-pastel-blue-700: #375287;
  --color-pastel-blue-800: #29406e;
  --color-pastel-blue-900: #1e3159;
  --color-pastel-blue-950: #101e3b;
  --color-reptile-revenge: #535c1d;
  --color-reptile-revenge-50: #f2fad6;
  --color-reptile-revenge-100: #e8f0c8;
  --color-reptile-revenge-200: #d4deae;
  --color-reptile-revenge-300: #bec892;
  --color-reptile-revenge-400: #9ea96d;
  --color-reptile-revenge-500: #838e4f;
  --color-reptile-revenge-600: #697336;
  --color-reptile-revenge-700: #535c1d;
  --color-reptile-revenge-800: #414815;
  --color-reptile-revenge-900: #31370b;
  --color-reptile-revenge-950: #1e2204;
  --color-pheasant: #c27c56;
  --color-pheasant-50: #fff4ef;
  --color-pheasant-100: #ffeadf;
  --color-pheasant-200: #ffd2ba;
  --color-pheasant-300: #f5b898;
  --color-pheasant-400: #db9773;
  --color-pheasant-500: #c27c56;
  --color-pheasant-600: #a3603b;
  --color-pheasant-700: #864925;
  --color-pheasant-800: #6b3616;
  --color-pheasant-900: #54270b;
  --color-pheasant-950: #361603;
}