Baptism by Fire to Aquarius Color Palette

About this palette

Baptism by Fire to Aquarius is a 4-color vibrant, warm palette: #E64A00 (Baptism by Fire), #9F5600 (Brandy Bear), #F6BD00 (Sunshine Mellow), #00AED4 (Aquarius). It mixes red, brown, yellow, blue tones and feels warm overall. The strongest text pairing is #9F5600 on #F6BD00 with a contrast ratio of 3.21:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baptism by Fire	rgb(230, 74, 0)	hsl(19, 100%, 45%)
Brandy Bear	rgb(159, 86, 0)	hsl(32, 100%, 31%)
Sunshine Mellow	rgb(246, 189, 0)	hsl(46, 100%, 48%)
Aquarius	rgb(0, 174, 212)	hsl(191, 100%, 42%)

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.

Aa3.21:1 Poor#9F5600 on #F6BD00
Aa3.21:1 Poor#F6BD00 on #9F5600

Color blindness preview

CSS variables

/* Baptism by Fire to Aquarius — https://swatchly.xyz/palette/e64a00-9f5600-f6bd00-00aed4 */
:root {
  --baptism-by-fire: #e64a00;
  --brandy-bear: #9f5600;
  --sunshine-mellow: #f6bd00;
  --aquarius: #00aed4;
}

Tailwind CSS v4

/* Baptism by Fire to Aquarius — https://swatchly.xyz/palette/e64a00-9f5600-f6bd00-00aed4 */
@theme {
  --color-baptism-by-fire: #e64a00;
  --color-baptism-by-fire-50: #fff2ee;
  --color-baptism-by-fire-100: #ffe5dd;
  --color-baptism-by-fire-200: #ffcab9;
  --color-baptism-by-fire-300: #ffa98d;
  --color-baptism-by-fire-400: #ff7041;
  --color-baptism-by-fire-500: #e64a00;
  --color-baptism-by-fire-600: #bb3a00;
  --color-baptism-by-fire-700: #952d00;
  --color-baptism-by-fire-800: #762100;
  --color-baptism-by-fire-900: #5d1800;
  --color-baptism-by-fire-950: #3c0c00;
  --color-brandy-bear: #9f5600;
  --color-brandy-bear-50: #fff3e9;
  --color-brandy-bear-100: #ffe6d3;
  --color-brandy-bear-200: #ffcca4;
  --color-brandy-bear-300: #f5b079;
  --color-brandy-bear-400: #d88e4f;
  --color-brandy-bear-500: #bc712c;
  --color-brandy-bear-600: #9f5600;
  --color-brandy-bear-700: #7f4300;
  --color-brandy-bear-800: #643400;
  --color-brandy-bear-900: #4e2700;
  --color-brandy-bear-950: #321700;
  --color-sunshine-mellow: #f6bd00;
  --color-sunshine-mellow-50: #fff7e6;
  --color-sunshine-mellow-100: #ffedc6;
  --color-sunshine-mellow-200: #ffd77a;
  --color-sunshine-mellow-300: #f6bd00;
  --color-sunshine-mellow-400: #ce9e00;
  --color-sunshine-mellow-500: #ac8300;
  --color-sunshine-mellow-600: #8a6900;
  --color-sunshine-mellow-700: #6d5200;
  --color-sunshine-mellow-800: #553f00;
  --color-sunshine-mellow-900: #413000;
  --color-sunshine-mellow-950: #291d00;
  --color-aquarius: #00aed4;
  --color-aquarius-50: #e3f8ff;
  --color-aquarius-100: #c7f1ff;
  --color-aquarius-200: #8ce3ff;
  --color-aquarius-300: #5fcdef;
  --color-aquarius-400: #00aed4;
  --color-aquarius-500: #0091b1;
  --color-aquarius-600: #00758f;
  --color-aquarius-700: #005d73;
  --color-aquarius-800: #00495b;
  --color-aquarius-900: #003947;
  --color-aquarius-950: #00242e;
}