Start generating

Cotton Candy to Seaside color palette

FBC0DACotton Candy643956Royal Plum3D361BGraphiteB1AF86Nettle007D94Pacific Pleasure63A0B0Seaside
Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Candy to Seaside is a 6-color warm, vintage palette: #FBC0DA (Cotton Candy), #643956 (Royal Plum), #3D361B (Graphite), #B1AF86 (Nettle), #007D94 (Pacific Pleasure), #63A0B0 (Seaside). It mixes pink, red, brown, yellow, blue tones and feels warm overall. The strongest text pairing is #FBC0DA on #3D361B with a contrast ratio of 7.84:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cotton Candyrgb(251, 192, 218)hsl(334, 88%, 87%)
Royal Plumrgb(100, 57, 86)hsl(320, 27%, 31%)
Graphitergb(61, 54, 27)hsl(48, 39%, 17%)
Nettlergb(177, 175, 134)hsl(57, 22%, 61%)
Pacific Pleasurergb(0, 125, 148)hsl(189, 100%, 29%)
Seasidergb(99, 160, 176)hsl(192, 33%, 54%)

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.

  • Aa7.84:1 Very good#FBC0DA on #3D361B
  • Aa7.84:1 Very good#3D361B on #FBC0DA
  • Aa6.04:1 Good#FBC0DA on #643956
  • Aa6.04:1 Good#643956 on #FBC0DA
  • Aa5.37:1 Good#3D361B on #B1AF86
  • Aa5.37:1 Good#B1AF86 on #3D361B
  • Aa4.13:1 Poor#643956 on #B1AF86
  • Aa4.13:1 Poor#B1AF86 on #643956

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cotton Candy to Seaside — https://swatchly.xyz/palette/fbc0da-643956-3d361b-b1af86-007d94-63a0b0 */
:root {
  --cotton-candy: #fbc0da;
  --royal-plum: #643956;
  --graphite: #3d361b;
  --nettle: #b1af86;
  --pacific-pleasure: #007d94;
  --seaside: #63a0b0;
}

Tailwind CSS v4

/* Cotton Candy to Seaside — https://swatchly.xyz/palette/fbc0da-643956-3d361b-b1af86-007d94-63a0b0 */
@theme {
  --color-cotton-candy: #fbc0da;
  --color-cotton-candy-50: #ffedf4;
  --color-cotton-candy-100: #ffddeb;
  --color-cotton-candy-200: #fbc0da;
  --color-cotton-candy-300: #dfadc3;
  --color-cotton-candy-400: #c38da5;
  --color-cotton-candy-500: #a7728a;
  --color-cotton-candy-600: #8b5970;
  --color-cotton-candy-700: #72445a;
  --color-cotton-candy-800: #5c3447;
  --color-cotton-candy-900: #482636;
  --color-cotton-candy-950: #2e1622;
  --color-royal-plum: #643956;
  --color-royal-plum-50: #fff0f9;
  --color-royal-plum-100: #ffe1f4;
  --color-royal-plum-200: #f1cae3;
  --color-royal-plum-300: #dfb3cf;
  --color-royal-plum-400: #c393b2;
  --color-royal-plum-500: #a97998;
  --color-royal-plum-600: #8e607e;
  --color-royal-plum-700: #764c68;
  --color-royal-plum-800: #643956;
  --color-royal-plum-900: #4d2c42;
  --color-royal-plum-950: #321b2a;
  --color-graphite: #3d361b;
  --color-graphite-50: #faf5e4;
  --color-graphite-100: #f0ebd8;
  --color-graphite-200: #ded8c0;
  --color-graphite-300: #c8c1a7;
  --color-graphite-400: #aaa285;
  --color-graphite-500: #8f886a;
  --color-graphite-600: #756e51;
  --color-graphite-700: #5f583e;
  --color-graphite-800: #4b452e;
  --color-graphite-900: #3d361b;
  --color-graphite-950: #262213;
  --color-nettle: #b1af86;
  --color-nettle-50: #fbfbe4;
  --color-nettle-100: #f4f3da;
  --color-nettle-200: #e2e1c4;
  --color-nettle-300: #cecdab;
  --color-nettle-400: #b1af86;
  --color-nettle-500: #93916a;
  --color-nettle-600: #77754e;
  --color-nettle-700: #5e5c39;
  --color-nettle-800: #494728;
  --color-nettle-900: #37361b;
  --color-nettle-950: #21200d;
  --color-pacific-pleasure: #007d94;
  --color-pacific-pleasure-50: #e5f9ff;
  --color-pacific-pleasure-100: #ccf4ff;
  --color-pacific-pleasure-200: #a3e5f7;
  --color-pacific-pleasure-300: #83d1e5;
  --color-pacific-pleasure-400: #58b3ca;
  --color-pacific-pleasure-500: #3398af;
  --color-pacific-pleasure-600: #007d94;
  --color-pacific-pleasure-700: #006376;
  --color-pacific-pleasure-800: #004e5d;
  --color-pacific-pleasure-900: #003c48;
  --color-pacific-pleasure-950: #00252e;
  --color-seaside: #63a0b0;
  --color-seaside-50: #d9f7ff;
  --color-seaside-100: #c4edf8;
  --color-seaside-200: #a8d8e5;
  --color-seaside-300: #8ac1cf;
  --color-seaside-400: #63a0b0;
  --color-seaside-500: #4a8696;
  --color-seaside-600: #336e7c;
  --color-seaside-700: #215865;
  --color-seaside-800: #144652;
  --color-seaside-900: #0b3741;
  --color-seaside-950: #04242b;
}

Similar palettes