Start generating

Surgical to Chocolate Fantasies color palette

48A4BFSurgical1F81A7Ahoy! Blue8BBED5JuvieFFECE3Vanilla Blush311B0FClose but No Cigar5E351DChocolate Fantasies
Open in generator Export PNG, PDF, ASE…

About this palette

Surgical to Chocolate Fantasies is a 6-color palette: #48A4BF (Surgical), #1F81A7 (Ahoy! Blue), #8BBED5 (Juvie), #FFECE3 (Vanilla Blush), #311B0F (Close but No Cigar), #5E351D (Chocolate Fantasies). It mixes blue, white, brown tones and feels cool overall. The strongest text pairing is #FFECE3 on #311B0F with a contrast ratio of 14.19:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Surgicalrgb(72, 164, 191)hsl(194, 48%, 52%)
Ahoy! Bluergb(31, 129, 167)hsl(197, 69%, 39%)
Juviergb(139, 190, 213)hsl(199, 47%, 69%)
Vanilla Blushrgb(255, 236, 227)hsl(19, 100%, 95%)
Close but No Cigarrgb(49, 27, 15)hsl(21, 53%, 13%)
Chocolate Fantasiesrgb(94, 53, 29)hsl(22, 53%, 24%)

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.

  • Aa14.19:1 Super#FFECE3 on #311B0F
  • Aa14.19:1 Super#311B0F on #FFECE3
  • Aa9.17:1 Very good#FFECE3 on #5E351D
  • Aa9.17:1 Very good#5E351D on #FFECE3
  • Aa8.05:1 Very good#8BBED5 on #311B0F
  • Aa8.05:1 Very good#311B0F on #8BBED5
  • Aa5.67:1 Good#48A4BF on #311B0F
  • Aa5.67:1 Good#311B0F on #48A4BF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Surgical to Chocolate Fantasies — https://swatchly.xyz/palette/48a4bf-1f81a7-8bbed5-ffece3-311b0f-5e351d */
:root {
  --surgical: #48a4bf;
  --ahoy-blue: #1f81a7;
  --juvie: #8bbed5;
  --vanilla-blush: #ffece3;
  --close-but-no-cigar: #311b0f;
  --chocolate-fantasies: #5e351d;
}

Tailwind CSS v4

/* Surgical to Chocolate Fantasies — https://swatchly.xyz/palette/48a4bf-1f81a7-8bbed5-ffece3-311b0f-5e351d */
@theme {
  --color-surgical: #48a4bf;
  --color-surgical-50: #ddf6ff;
  --color-surgical-100: #bdefff;
  --color-surgical-200: #98dcf2;
  --color-surgical-300: #76c4dd;
  --color-surgical-400: #48a4bf;
  --color-surgical-500: #298aa4;
  --color-surgical-600: #007189;
  --color-surgical-700: #005a6e;
  --color-surgical-800: #004758;
  --color-surgical-900: #003845;
  --color-surgical-950: #00242e;
  --color-ahoy-blue: #1f81a7;
  --color-ahoy-blue-50: #eaf8ff;
  --color-ahoy-blue-100: #d8f2ff;
  --color-ahoy-blue-200: #afe5ff;
  --color-ahoy-blue-300: #8bd2f4;
  --color-ahoy-blue-400: #62b5da;
  --color-ahoy-blue-500: #419bc1;
  --color-ahoy-blue-600: #1f81a7;
  --color-ahoy-blue-700: #006789;
  --color-ahoy-blue-800: #00506c;
  --color-ahoy-blue-900: #003d53;
  --color-ahoy-blue-950: #002635;
  --color-juvie: #8bbed5;
  --color-juvie-50: #dbf4ff;
  --color-juvie-100: #c7e9f9;
  --color-juvie-200: #acd5e7;
  --color-juvie-300: #8bbed5;
  --color-juvie-400: #6fa0b6;
  --color-juvie-500: #55879c;
  --color-juvie-600: #3e6e82;
  --color-juvie-700: #2c586b;
  --color-juvie-800: #1f4656;
  --color-juvie-900: #153745;
  --color-juvie-950: #0a232d;
  --color-vanilla-blush: #ffece3;
  --color-vanilla-blush-50: #ffece3;
  --color-vanilla-blush-100: #f1e4df;
  --color-vanilla-blush-200: #dfd1ca;
  --color-vanilla-blush-300: #cbbbb4;
  --color-vanilla-blush-400: #ad9c94;
  --color-vanilla-blush-500: #928179;
  --color-vanilla-blush-600: #786860;
  --color-vanilla-blush-700: #60524b;
  --color-vanilla-blush-800: #4c3f39;
  --color-vanilla-blush-900: #3b302b;
  --color-vanilla-blush-950: #251d1a;
  --color-close-but-no-cigar: #311b0f;
  --color-close-but-no-cigar-50: #fff2ec;
  --color-close-but-no-cigar-100: #fae7dd;
  --color-close-but-no-cigar-200: #e9d2c7;
  --color-close-but-no-cigar-300: #d5bbae;
  --color-close-but-no-cigar-400: #b79b8d;
  --color-close-but-no-cigar-500: #9c8071;
  --color-close-but-no-cigar-600: #816658;
  --color-close-but-no-cigar-700: #685044;
  --color-close-but-no-cigar-800: #543f34;
  --color-close-but-no-cigar-900: #423027;
  --color-close-but-no-cigar-950: #311b0f;
  --color-chocolate-fantasies: #5e351d;
  --color-chocolate-fantasies-50: #fff2ec;
  --color-chocolate-fantasies-100: #ffe5d8;
  --color-chocolate-fantasies-200: #f5ceba;
  --color-chocolate-fantasies-300: #e1b69f;
  --color-chocolate-fantasies-400: #c4957c;
  --color-chocolate-fantasies-500: #a87960;
  --color-chocolate-fantasies-600: #8b5f47;
  --color-chocolate-fantasies-700: #714933;
  --color-chocolate-fantasies-800: #5e351d;
  --color-chocolate-fantasies-900: #462a19;
  --color-chocolate-fantasies-950: #2d190d;
}

Similar palettes