Fresh Air to Space Colonisation Color Palette

About this palette

Fresh Air to Space Colonisation is a 5-color cool palette: #B2EAFF (Fresh Air), #F16625 (Basketball), #008198 (Cruising), #554A00 (Alligator Gladiator), #1E1359 (Space Colonisation). It mixes blue, orange, brown, purple tones and feels cool overall. The strongest text pairing is #B2EAFF on #1E1359 with a contrast ratio of 12.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Air	rgb(178, 234, 255)	hsl(196, 100%, 85%)
Basketball	rgb(241, 102, 37)	hsl(19, 88%, 55%)
Cruising	rgb(0, 129, 152)	hsl(189, 100%, 30%)
Alligator Gladiator	rgb(85, 74, 0)	hsl(52, 100%, 17%)
Space Colonisation	rgb(30, 19, 89)	hsl(249, 65%, 21%)

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.46:1 Super#B2EAFF on #1E1359
Aa12.46:1 Super#1E1359 on #B2EAFF
Aa6.81:1 Good#B2EAFF on #554A00
Aa6.81:1 Good#554A00 on #B2EAFF
Aa5.16:1 Good#F16625 on #1E1359
Aa5.16:1 Good#1E1359 on #F16625
Aa3.55:1 Poor#008198 on #1E1359
Aa3.55:1 Poor#1E1359 on #008198

Color blindness preview

CSS variables

/* Fresh Air to Space Colonisation — https://swatchly.xyz/palette/b2eaff-f16625-008198-554a00-1e1359 */
:root {
  --fresh-air: #b2eaff;
  --basketball: #f16625;
  --cruising: #008198;
  --alligator-gladiator: #554a00;
  --space-colonisation: #1e1359;
}

Tailwind CSS v4

/* Fresh Air to Space Colonisation — https://swatchly.xyz/palette/b2eaff-f16625-008198-554a00-1e1359 */
@theme {
  --color-fresh-air: #b2eaff;
  --color-fresh-air-50: #f5fcff;
  --color-fresh-air-100: #e1f7ff;
  --color-fresh-air-200: #b2eaff;
  --color-fresh-air-300: #a3d0e1;
  --color-fresh-air-400: #7db0c3;
  --color-fresh-air-500: #5e93a6;
  --color-fresh-air-600: #427789;
  --color-fresh-air-700: #2d5e6f;
  --color-fresh-air-800: #1d4957;
  --color-fresh-air-900: #133844;
  --color-fresh-air-950: #08232c;
  --color-basketball: #f16625;
  --color-basketball-50: #ffede6;
  --color-basketball-100: #ffddd0;
  --color-basketball-200: #ffbfa6;
  --color-basketball-300: #ff9a72;
  --color-basketball-400: #f16625;
  --color-basketball-500: #d04e00;
  --color-basketball-600: #a93e00;
  --color-basketball-700: #883000;
  --color-basketball-800: #6d2500;
  --color-basketball-900: #571b00;
  --color-basketball-950: #3a0f00;
  --color-cruising: #008198;
  --color-cruising-50: #e5f9ff;
  --color-cruising-100: #cef4ff;
  --color-cruising-200: #a3e7f9;
  --color-cruising-300: #84d3e7;
  --color-cruising-400: #59b6cc;
  --color-cruising-500: #349bb3;
  --color-cruising-600: #008198;
  --color-cruising-700: #006679;
  --color-cruising-800: #00505f;
  --color-cruising-900: #003d4a;
  --color-cruising-950: #00262f;
  --color-alligator-gladiator: #554a00;
  --color-alligator-gladiator-50: #fcf6d3;
  --color-alligator-gladiator-100: #f3edc5;
  --color-alligator-gladiator-200: #e1d9aa;
  --color-alligator-gladiator-300: #cdc48e;
  --color-alligator-gladiator-400: #b0a66a;
  --color-alligator-gladiator-500: #968b4d;
  --color-alligator-gladiator-600: #7d7234;
  --color-alligator-gladiator-700: #675c20;
  --color-alligator-gladiator-800: #554a00;
  --color-alligator-gladiator-900: #413907;
  --color-alligator-gladiator-950: #2a2401;
  --color-space-colonisation: #1e1359;
  --color-space-colonisation-50: #f3f4ff;
  --color-space-colonisation-100: #e7e9ff;
  --color-space-colonisation-200: #d0d4ff;
  --color-space-colonisation-300: #b6baff;
  --color-space-colonisation-400: #9599e7;
  --color-space-colonisation-500: #7b7dcc;
  --color-space-colonisation-600: #6363af;
  --color-space-colonisation-700: #4e4e93;
  --color-space-colonisation-800: #3d3c79;
  --color-space-colonisation-900: #302e63;
  --color-space-colonisation-950: #1e1359;
}