Start generating

Friendly Frost to Nocturnal Expedition color palette

BCFBFFFriendly Frost63C0BCTreasured Teal4583F3Pool Water206E90Chill of the Night004A5DNocturnal Expedition
Open in generator Export PNG, PDF, ASE…

About this palette

Friendly Frost to Nocturnal Expedition is a 5-color cool, gradient palette: #BCFBFF (Friendly Frost), #63C0BC (Treasured Teal), #4583F3 (Pool Water), #206E90 (Chill of the Night), #004A5D (Nocturnal Expedition). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #BCFBFF on #004A5D with a contrast ratio of 8.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Friendly Frostrgb(188, 251, 255)hsl(184, 100%, 87%)
Treasured Tealrgb(99, 192, 188)hsl(177, 42%, 57%)
Pool Waterrgb(69, 131, 243)hsl(219, 88%, 61%)
Chill of the Nightrgb(32, 110, 144)hsl(198, 64%, 35%)
Nocturnal Expeditionrgb(0, 74, 93)hsl(192, 100%, 18%)

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.60:1 Very good#BCFBFF on #004A5D
  • Aa8.60:1 Very good#004A5D on #BCFBFF
  • Aa4.98:1 Good#BCFBFF on #206E90
  • Aa4.98:1 Good#206E90 on #BCFBFF
  • Aa4.58:1 Good#63C0BC on #004A5D
  • Aa4.58:1 Good#004A5D on #63C0BC
  • Aa3.17:1 Poor#BCFBFF on #4583F3
  • Aa3.17:1 Poor#4583F3 on #BCFBFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Friendly Frost to Nocturnal Expedition — https://swatchly.xyz/palette/bcfbff-63c0bc-4583f3-206e90-004a5d */
:root {
  --friendly-frost: #bcfbff;
  --treasured-teal: #63c0bc;
  --pool-water: #4583f3;
  --chill-of-the-night: #206e90;
  --nocturnal-expedition: #004a5d;
}

Tailwind CSS v4

/* Friendly Frost to Nocturnal Expedition — https://swatchly.xyz/palette/bcfbff-63c0bc-4583f3-206e90-004a5d */
@theme {
  --color-friendly-frost: #bcfbff;
  --color-friendly-frost-50: #e2fdff;
  --color-friendly-frost-100: #bcfbff;
  --color-friendly-frost-200: #b7e3e6;
  --color-friendly-frost-300: #9acdd1;
  --color-friendly-frost-400: #74aeb2;
  --color-friendly-frost-500: #569396;
  --color-friendly-frost-600: #3c777b;
  --color-friendly-frost-700: #275f63;
  --color-friendly-frost-800: #184b4e;
  --color-friendly-frost-900: #0e3a3d;
  --color-friendly-frost-950: #052426;
  --color-treasured-teal: #63c0bc;
  --color-treasured-teal-50: #e9fffd;
  --color-treasured-teal-100: #cbfdfa;
  --color-treasured-teal-200: #b1eeea;
  --color-treasured-teal-300: #93dbd7;
  --color-treasured-teal-400: #63c0bc;
  --color-treasured-teal-500: #43a19e;
  --color-treasured-teal-600: #1d8480;
  --color-treasured-teal-700: #006966;
  --color-treasured-teal-800: #00514f;
  --color-treasured-teal-900: #003d3c;
  --color-treasured-teal-950: #002524;
  --color-pool-water: #4583f3;
  --color-pool-water-50: #f0f6ff;
  --color-pool-water-100: #e2edff;
  --color-pool-water-200: #c4daff;
  --color-pool-water-300: #a1c3ff;
  --color-pool-water-400: #6da2ff;
  --color-pool-water-500: #4583f3;
  --color-pool-water-600: #2b67d2;
  --color-pool-water-700: #184fb2;
  --color-pool-water-800: #0a3b92;
  --color-pool-water-900: #032c76;
  --color-pool-water-950: #001a4f;
  --color-chill-of-the-night: #206e90;
  --color-chill-of-the-night-50: #eaf8ff;
  --color-chill-of-the-night-100: #d2efff;
  --color-chill-of-the-night-200: #a8defb;
  --color-chill-of-the-night-300: #88c7e7;
  --color-chill-of-the-night-400: #60a7ca;
  --color-chill-of-the-night-500: #408aad;
  --color-chill-of-the-night-600: #206e90;
  --color-chill-of-the-night-700: #0f5775;
  --color-chill-of-the-night-800: #00455e;
  --color-chill-of-the-night-900: #00354a;
  --color-chill-of-the-night-950: #002130;
  --color-nocturnal-expedition: #004a5d;
  --color-nocturnal-expedition-50: #e7f9ff;
  --color-nocturnal-expedition-100: #cff2ff;
  --color-nocturnal-expedition-200: #b3e0f1;
  --color-nocturnal-expedition-300: #96cadd;
  --color-nocturnal-expedition-400: #71abc0;
  --color-nocturnal-expedition-500: #5390a5;
  --color-nocturnal-expedition-600: #397589;
  --color-nocturnal-expedition-700: #255d6f;
  --color-nocturnal-expedition-800: #004a5d;
  --color-nocturnal-expedition-900: #0c3846;
  --color-nocturnal-expedition-950: #04232d;
}

Similar palettes