Cotton Boll to Dark Color Palette

About this palette

Cotton Boll to Dark is a 5-color cool, gradient palette: #E4F5FF (Cotton Boll), #6DC4FD (Blue Mana), #5C91B5 (Heavenly Sky), #005A7B (Saltwater Denim), #132530 (Dark). It mixes white, blue, gray tones and feels cool overall. The strongest text pairing is #E4F5FF on #132530 with a contrast ratio of 14.09:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(228, 245, 255)	hsl(202, 100%, 95%)
Blue Mana	rgb(109, 196, 253)	hsl(204, 97%, 71%)
Heavenly Sky	rgb(92, 145, 181)	hsl(204, 38%, 54%)
Saltwater Denim	rgb(0, 90, 123)	hsl(196, 100%, 24%)
Dark	rgb(19, 37, 48)	hsl(203, 43%, 13%)

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.09:1 Super#E4F5FF on #132530
Aa14.09:1 Super#132530 on #E4F5FF
Aa8.21:1 Very good#6DC4FD on #132530
Aa8.21:1 Very good#132530 on #6DC4FD
Aa6.84:1 Good#E4F5FF on #005A7B
Aa6.84:1 Good#005A7B on #E4F5FF
Aa4.62:1 Good#5C91B5 on #132530
Aa4.62:1 Good#132530 on #5C91B5

Color blindness preview

CSS variables

/* Cotton Boll to Dark — https://swatchly.xyz/palette/e4f5ff-6dc4fd-5c91b5-005a7b-132530 */
:root {
  --cotton-boll: #e4f5ff;
  --blue-mana: #6dc4fd;
  --heavenly-sky: #5c91b5;
  --saltwater-denim: #005a7b;
  --dark: #132530;
}

Tailwind CSS v4

/* Cotton Boll to Dark — https://swatchly.xyz/palette/e4f5ff-6dc4fd-5c91b5-005a7b-132530 */
@theme {
  --color-cotton-boll: #e4f5ff;
  --color-cotton-boll-50: #e4f5ff;
  --color-cotton-boll-100: #e0eaf1;
  --color-cotton-boll-200: #cbd8df;
  --color-cotton-boll-300: #b4c2ca;
  --color-cotton-boll-400: #94a3ac;
  --color-cotton-boll-500: #798891;
  --color-cotton-boll-600: #606e77;
  --color-cotton-boll-700: #4a575f;
  --color-cotton-boll-800: #39444b;
  --color-cotton-boll-900: #2b343a;
  --color-cotton-boll-950: #192024;
  --color-blue-mana: #6dc4fd;
  --color-blue-mana-50: #e5f4ff;
  --color-blue-mana-100: #cfebff;
  --color-blue-mana-200: #a3d9ff;
  --color-blue-mana-300: #6dc4fd;
  --color-blue-mana-400: #51a5db;
  --color-blue-mana-500: #2f8ac0;
  --color-blue-mana-600: #0a70a3;
  --color-blue-mana-700: #005984;
  --color-blue-mana-800: #004669;
  --color-blue-mana-900: #003754;
  --color-blue-mana-950: #002236;
  --color-heavenly-sky: #5c91b5;
  --color-heavenly-sky-50: #edf8ff;
  --color-heavenly-sky-100: #dbf0ff;
  --color-heavenly-sky-200: #b8e0fc;
  --color-heavenly-sky-300: #9dcaeb;
  --color-heavenly-sky-400: #79accf;
  --color-heavenly-sky-500: #5c91b5;
  --color-heavenly-sky-600: #417598;
  --color-heavenly-sky-700: #2d5d7c;
  --color-heavenly-sky-800: #1d4964;
  --color-heavenly-sky-900: #12384f;
  --color-heavenly-sky-950: #072233;
  --color-saltwater-denim: #005a7b;
  --color-saltwater-denim-50: #eaf8ff;
  --color-saltwater-denim-100: #d5f0ff;
  --color-saltwater-denim-200: #abdffc;
  --color-saltwater-denim-300: #8cc9e9;
  --color-saltwater-denim-400: #65aacd;
  --color-saltwater-denim-500: #458db1;
  --color-saltwater-denim-600: #297293;
  --color-saltwater-denim-700: #005a7b;
  --color-saltwater-denim-800: #034660;
  --color-saltwater-denim-900: #00364c;
  --color-saltwater-denim-950: #002131;
  --color-dark: #132530;
  --color-dark-50: #ebf7ff;
  --color-dark-100: #e0eef7;
  --color-dark-200: #cadae5;
  --color-dark-300: #b1c4d0;
  --color-dark-400: #90a5b2;
  --color-dark-500: #758a98;
  --color-dark-600: #5c707d;
  --color-dark-700: #485a66;
  --color-dark-800: #374752;
  --color-dark-900: #2a3841;
  --color-dark-950: #132530;
}