Infinity to Freeze Up Color Palette

About this palette

Infinity to Freeze Up is a 5-color muted, earthy, vintage, gradient palette: #212834 (Infinity), #6E523C (Bison), #AE826F (Dusty Duchess), #B2BD94 (Beige and Sage), #E3E8F7 (Freeze Up). It mixes gray, brown, orange, green, white tones and feels warm overall. The strongest text pairing is #212834 on #E3E8F7 with a contrast ratio of 12.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinity	rgb(33, 40, 52)	hsl(218, 22%, 17%)
Bison	rgb(110, 82, 60)	hsl(26, 29%, 33%)
Dusty Duchess	rgb(174, 130, 111)	hsl(18, 28%, 56%)
Beige and Sage	rgb(178, 189, 148)	hsl(76, 24%, 66%)
Freeze Up	rgb(227, 232, 247)	hsl(225, 56%, 93%)

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.

Aa12.10:1 Super#212834 on #E3E8F7
Aa12.10:1 Super#E3E8F7 on #212834
Aa7.48:1 Very good#212834 on #B2BD94
Aa7.48:1 Very good#B2BD94 on #212834
Aa5.84:1 Good#6E523C on #E3E8F7
Aa5.84:1 Good#E3E8F7 on #6E523C
Aa4.39:1 Poor#212834 on #AE826F
Aa4.39:1 Poor#AE826F on #212834

Color blindness preview

CSS variables

/* Infinity to Freeze Up — https://swatchly.xyz/palette/212834-6e523c-ae826f-b2bd94-e3e8f7 */
:root {
  --infinity: #212834;
  --bison: #6e523c;
  --dusty-duchess: #ae826f;
  --beige-and-sage: #b2bd94;
  --freeze-up: #e3e8f7;
}

Tailwind CSS v4

/* Infinity to Freeze Up — https://swatchly.xyz/palette/212834-6e523c-ae826f-b2bd94-e3e8f7 */
@theme {
  --color-infinity: #212834;
  --color-infinity-50: #f0f5fe;
  --color-infinity-100: #e6ebf6;
  --color-infinity-200: #d1d8e4;
  --color-infinity-300: #b9c1cf;
  --color-infinity-400: #99a2b1;
  --color-infinity-500: #808897;
  --color-infinity-600: #67707e;
  --color-infinity-700: #535b67;
  --color-infinity-800: #424955;
  --color-infinity-900: #353b45;
  --color-infinity-950: #212834;
  --color-bison: #6e523c;
  --color-bison-50: #fff3e9;
  --color-bison-100: #fce7d7;
  --color-bison-200: #ebd3c0;
  --color-bison-300: #d8bca7;
  --color-bison-400: #bb9d86;
  --color-bison-500: #a0826a;
  --color-bison-600: #856852;
  --color-bison-700: #6e523c;
  --color-bison-800: #57402e;
  --color-bison-900: #443021;
  --color-bison-950: #2b1d12;
  --color-dusty-duchess: #ae826f;
  --color-dusty-duchess-50: #fff4ef;
  --color-dusty-duchess-100: #ffe9df;
  --color-dusty-duchess-200: #f6d3c4;
  --color-dusty-duchess-300: #e4bcac;
  --color-dusty-duchess-400: #c89d8a;
  --color-dusty-duchess-500: #ae826f;
  --color-dusty-duchess-600: #906654;
  --color-dusty-duchess-700: #754f3f;
  --color-dusty-duchess-800: #5d3c2e;
  --color-dusty-duchess-900: #492d21;
  --color-dusty-duchess-950: #2e1b12;
  --color-beige-and-sage: #b2bd94;
  --color-beige-and-sage-50: #edf4db;
  --color-beige-and-sage-100: #e1e9cd;
  --color-beige-and-sage-200: #cbd4b3;
  --color-beige-and-sage-300: #b2bd94;
  --color-beige-and-sage-400: #959f78;
  --color-beige-and-sage-500: #7b855f;
  --color-beige-and-sage-600: #636c47;
  --color-beige-and-sage-700: #4f5735;
  --color-beige-and-sage-800: #3e4527;
  --color-beige-and-sage-900: #30361d;
  --color-beige-and-sage-950: #1d220f;
  --color-freeze-up: #e3e8f7;
  --color-freeze-up-50: #f0f3fb;
  --color-freeze-up-100: #e3e8f7;
  --color-freeze-up-200: #d1d5e0;
  --color-freeze-up-300: #bbbfcb;
  --color-freeze-up-400: #9ba0ad;
  --color-freeze-up-500: #808592;
  --color-freeze-up-600: #676b78;
  --color-freeze-up-700: #515560;
  --color-freeze-up-800: #3f424c;
  --color-freeze-up-900: #30333b;
  --color-freeze-up-950: #1d1f25;
}