Stellar to Cavolo Nero color palette

456378Stellar 1F303DBlue Whale 0B1C26Black Stallion BFD4E3Skinny Dippin’94BAD7Blues White Shoes 7692A3Cavolo Nero

Open in generator Export PNG, PDF, ASE…

About this palette

Stellar to Cavolo Nero is a 6-color muted palette: #456378 (Stellar), #1F303D (Blue Whale), #0B1C26 (Black Stallion), #BFD4E3 (Skinny Dippin’), #94BAD7 (Blues White Shoes), #7692A3 (Cavolo Nero). It mixes blue, gray, black tones and feels cool overall. The strongest text pairing is #0B1C26 on #BFD4E3 with a contrast ratio of 11.37:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stellar	rgb(69, 99, 120)	hsl(205, 27%, 37%)
Blue Whale	rgb(31, 48, 61)	hsl(206, 33%, 18%)
Black Stallion	rgb(11, 28, 38)	hsl(202, 55%, 10%)
Skinny Dippin’	rgb(191, 212, 227)	hsl(205, 39%, 82%)
Blues White Shoes	rgb(148, 186, 215)	hsl(206, 46%, 71%)
Cavolo Nero	rgb(118, 146, 163)	hsl(203, 20%, 55%)

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.

Aa11.37:1 Very good#0B1C26 on #BFD4E3
Aa11.37:1 Very good#BFD4E3 on #0B1C26
Aa8.87:1 Very good#1F303D on #BFD4E3
Aa8.87:1 Very good#BFD4E3 on #1F303D
Aa8.49:1 Very good#0B1C26 on #94BAD7
Aa8.49:1 Very good#94BAD7 on #0B1C26
Aa6.63:1 Good#1F303D on #94BAD7
Aa6.63:1 Good#94BAD7 on #1F303D

Color blindness preview

CSS variables

/* Stellar to Cavolo Nero — https://swatchly.xyz/palette/456378-1f303d-0b1c26-bfd4e3-94bad7-7692a3 */
:root {
  --stellar: #456378;
  --blue-whale: #1f303d;
  --black-stallion: #0b1c26;
  --skinny-dippin: #bfd4e3;
  --blues-white-shoes: #94bad7;
  --cavolo-nero: #7692a3;
}

Tailwind CSS v4

/* Stellar to Cavolo Nero — https://swatchly.xyz/palette/456378-1f303d-0b1c26-bfd4e3-94bad7-7692a3 */
@theme {
  --color-stellar: #456378;
  --color-stellar-50: #ecf7ff;
  --color-stellar-100: #daeffe;
  --color-stellar-200: #c5ddef;
  --color-stellar-300: #adc9dd;
  --color-stellar-400: #8dabc1;
  --color-stellar-500: #7292a8;
  --color-stellar-600: #5a788e;
  --color-stellar-700: #456378;
  --color-stellar-800: #344d5f;
  --color-stellar-900: #263c4b;
  --color-stellar-950: #152530;
  --color-blue-whale: #1f303d;
  --color-blue-whale-50: #ecf7ff;
  --color-blue-whale-100: #e0edf8;
  --color-blue-whale-200: #cadae6;
  --color-blue-whale-300: #b2c4d2;
  --color-blue-whale-400: #90a3b3;
  --color-blue-whale-500: #748797;
  --color-blue-whale-600: #596c7a;
  --color-blue-whale-700: #435461;
  --color-blue-whale-800: #32404b;
  --color-blue-whale-900: #1f303d;
  --color-blue-whale-950: #141d23;
  --color-black-stallion: #0b1c26;
  --color-black-stallion-50: #ebf7ff;
  --color-black-stallion-100: #e0edf6;
  --color-black-stallion-200: #cadae5;
  --color-black-stallion-300: #b2c4d0;
  --color-black-stallion-400: #91a5b1;
  --color-black-stallion-500: #748895;
  --color-black-stallion-600: #5a6d79;
  --color-black-stallion-700: #445560;
  --color-black-stallion-800: #32414a;
  --color-black-stallion-900: #243037;
  --color-black-stallion-950: #0b1c26;
  --color-skinny-dippin: #bfd4e3;
  --color-skinny-dippin-50: #e6f2fb;
  --color-skinny-dippin-100: #dae8f2;
  --color-skinny-dippin-200: #bfd4e3;
  --color-skinny-dippin-300: #acbecb;
  --color-skinny-dippin-400: #8da0ae;
  --color-skinny-dippin-500: #738694;
  --color-skinny-dippin-600: #5a6d7a;
  --color-skinny-dippin-700: #465763;
  --color-skinny-dippin-800: #36454f;
  --color-skinny-dippin-900: #28353d;
  --color-skinny-dippin-950: #182127;
  --color-blues-white-shoes: #94bad7;
  --color-blues-white-shoes-50: #e0f1ff;
  --color-blues-white-shoes-100: #cde7fb;
  --color-blues-white-shoes-200: #b3d2e9;
  --color-blues-white-shoes-300: #94bad7;
  --color-blues-white-shoes-400: #789db8;
  --color-blues-white-shoes-500: #5f839e;
  --color-blues-white-shoes-600: #486b84;
  --color-blues-white-shoes-700: #36566d;
  --color-blues-white-shoes-800: #284458;
  --color-blues-white-shoes-900: #1e3647;
  --color-blues-white-shoes-950: #10212e;
  --color-cavolo-nero: #7692a3;
  --color-cavolo-nero-50: #eef8ff;
  --color-cavolo-nero-100: #dff1fc;
  --color-cavolo-nero-200: #cadfec;
  --color-cavolo-nero-300: #b2cad9;
  --color-cavolo-nero-400: #91acbd;
  --color-cavolo-nero-500: #7692a3;
  --color-cavolo-nero-600: #5b7686;
  --color-cavolo-nero-700: #455e6c;
  --color-cavolo-nero-800: #334956;
  --color-cavolo-nero-900: #253843;
  --color-cavolo-nero-950: #15222a;
}