Infinite Inkwell to Cream Puff Color Palette

About this palette

Infinite Inkwell to Cream Puff is a 5-color warm palette: #321967 (Infinite Inkwell), #005E7A (Blue-Collar), #B55232 (Hot Chilli), #999C11 (Papyrus), #F8BA99 (Cream Puff). It mixes purple, blue, red, yellow, orange tones and feels warm overall. The strongest text pairing is #321967 on #F8BA99 with a contrast ratio of 8.48:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinite Inkwell	rgb(50, 25, 103)	hsl(259, 61%, 25%)
Blue-Collar	rgb(0, 94, 122)	hsl(194, 100%, 24%)
Hot Chilli	rgb(181, 82, 50)	hsl(15, 57%, 45%)
Papyrus	rgb(153, 156, 17)	hsl(61, 80%, 34%)
Cream Puff	rgb(248, 186, 153)	hsl(21, 87%, 79%)

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.

Aa8.48:1 Very good#321967 on #F8BA99
Aa8.48:1 Very good#F8BA99 on #321967
Aa4.84:1 Good#321967 on #999C11
Aa4.84:1 Good#999C11 on #321967
Aa4.33:1 Poor#005E7A on #F8BA99
Aa4.33:1 Poor#F8BA99 on #005E7A

Color blindness preview

CSS variables

/* Infinite Inkwell to Cream Puff — https://swatchly.xyz/palette/321967-005e7a-b55232-999c11-f8ba99 */
:root {
  --infinite-inkwell: #321967;
  --blue-collar: #005e7a;
  --hot-chilli: #b55232;
  --papyrus: #999c11;
  --cream-puff: #f8ba99;
}

Tailwind CSS v4

/* Infinite Inkwell to Cream Puff — https://swatchly.xyz/palette/321967-005e7a-b55232-999c11-f8ba99 */
@theme {
  --color-infinite-inkwell: #321967;
  --color-infinite-inkwell-50: #f5f4ff;
  --color-infinite-inkwell-100: #ebe8ff;
  --color-infinite-inkwell-200: #d7d1ff;
  --color-infinite-inkwell-300: #c1b5ff;
  --color-infinite-inkwell-400: #a292e7;
  --color-infinite-inkwell-500: #8675ca;
  --color-infinite-inkwell-600: #6b59aa;
  --color-infinite-inkwell-700: #54438c;
  --color-infinite-inkwell-800: #403170;
  --color-infinite-inkwell-900: #321967;
  --color-infinite-inkwell-950: #1d1438;
  --color-blue-collar: #005e7a;
  --color-blue-collar-50: #e9f8ff;
  --color-blue-collar-100: #d2f1ff;
  --color-blue-collar-200: #abe1f9;
  --color-blue-collar-300: #8dcbe6;
  --color-blue-collar-400: #65acca;
  --color-blue-collar-500: #4691ae;
  --color-blue-collar-600: #297592;
  --color-blue-collar-700: #005e7a;
  --color-blue-collar-800: #014960;
  --color-blue-collar-900: #00394b;
  --color-blue-collar-950: #002330;
  --color-hot-chilli: #b55232;
  --color-hot-chilli-50: #fff2ee;
  --color-hot-chilli-100: #ffe7df;
  --color-hot-chilli-200: #ffcebe;
  --color-hot-chilli-300: #ffaf95;
  --color-hot-chilli-400: #ec8969;
  --color-hot-chilli-500: #d26c4c;
  --color-hot-chilli-600: #b55232;
  --color-hot-chilli-700: #963b1d;
  --color-hot-chilli-800: #7a290c;
  --color-hot-chilli-900: #611c03;
  --color-hot-chilli-950: #400e00;
  --color-papyrus: #999c11;
  --color-papyrus-50: #f2f7b6;
  --color-papyrus-100: #e6eba1;
  --color-papyrus-200: #d1d67c;
  --color-papyrus-300: #b9bd54;
  --color-papyrus-400: #999c11;
  --color-papyrus-500: #808200;
  --color-papyrus-600: #676900;
  --color-papyrus-700: #525400;
  --color-papyrus-800: #414200;
  --color-papyrus-900: #333400;
  --color-papyrus-950: #202100;
  --color-cream-puff: #f8ba99;
  --color-cream-puff-50: #fff8f5;
  --color-cream-puff-100: #ffede4;
  --color-cream-puff-200: #ffd5bf;
  --color-cream-puff-300: #f8ba99;
  --color-cream-puff-400: #d29a7c;
  --color-cream-puff-500: #b67c5d;
  --color-cream-puff-600: #976142;
  --color-cream-puff-700: #7b4a2e;
  --color-cream-puff-800: #62371e;
  --color-cream-puff-900: #4c2813;
  --color-cream-puff-950: #311708;
}