Start generating

Foggy Love to Caribbean color palette

DBC4EDFoggy LoveF3D397Instant NoodlesFFCECFLove FumesD5E7FFVeiling WaterfallsC6F5E7Caribbean
Open in generator Export PNG, PDF, ASE…

About this palette

Foggy Love to Caribbean is a 5-color pastel, light, cool palette: #DBC4ED (Foggy Love), #F3D397 (Instant Noodles), #FFCECF (Love Fumes), #D5E7FF (Veiling Waterfalls), #C6F5E7 (Caribbean). It mixes purple, yellow, pink, blue, turquoise tones and feels cool overall. The strongest text pairing is #DBC4ED on #C6F5E7 with a contrast ratio of 1.34:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Foggy Lovergb(219, 196, 237)hsl(274, 53%, 85%)
Instant Noodlesrgb(243, 211, 151)hsl(39, 79%, 77%)
Love Fumesrgb(255, 206, 207)hsl(359, 100%, 90%)
Veiling Waterfallsrgb(213, 231, 255)hsl(214, 100%, 92%)
Caribbeanrgb(198, 245, 231)hsl(162, 70%, 87%)

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.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Foggy Love to Caribbean — https://swatchly.xyz/palette/dbc4ed-f3d397-ffcecf-d5e7ff-c6f5e7 */
:root {
  --foggy-love: #dbc4ed;
  --instant-noodles: #f3d397;
  --love-fumes: #ffcecf;
  --veiling-waterfalls: #d5e7ff;
  --caribbean: #c6f5e7;
}

    Tailwind CSS v4

    /* Foggy Love to Caribbean — https://swatchly.xyz/palette/dbc4ed-f3d397-ffcecf-d5e7ff-c6f5e7 */
@theme {
  --color-foggy-love: #dbc4ed;
  --color-foggy-love-50: #f5eaff;
  --color-foggy-love-100: #ecddf8;
  --color-foggy-love-200: #dbc4ed;
  --color-foggy-love-300: #c4b0d4;
  --color-foggy-love-400: #a792b8;
  --color-foggy-love-500: #8d789e;
  --color-foggy-love-600: #746083;
  --color-foggy-love-700: #5e4b6b;
  --color-foggy-love-800: #4b3b57;
  --color-foggy-love-900: #3a2c44;
  --color-foggy-love-950: #241a2c;
  --color-instant-noodles: #f3d397;
  --color-instant-noodles-50: #fff4df;
  --color-instant-noodles-100: #fde9c4;
  --color-instant-noodles-200: #f3d397;
  --color-instant-noodles-300: #d8bd8b;
  --color-instant-noodles-400: #ba9d65;
  --color-instant-noodles-500: #9f8148;
  --color-instant-noodles-600: #83672e;
  --color-instant-noodles-700: #6a511a;
  --color-instant-noodles-800: #553e0c;
  --color-instant-noodles-900: #422f04;
  --color-instant-noodles-950: #2a1d01;
  --color-love-fumes: #ffcecf;
  --color-love-fumes-50: #fff6f6;
  --color-love-fumes-100: #ffe9e9;
  --color-love-fumes-200: #ffcecf;
  --color-love-fumes-300: #e1b9ba;
  --color-love-fumes-400: #c49899;
  --color-love-fumes-500: #a77b7c;
  --color-love-fumes-600: #8a6062;
  --color-love-fumes-700: #704a4c;
  --color-love-fumes-800: #593839;
  --color-love-fumes-900: #462a2b;
  --color-love-fumes-950: #2d191a;
  --color-veiling-waterfalls: #d5e7ff;
  --color-veiling-waterfalls-50: #e7f1ff;
  --color-veiling-waterfalls-100: #d5e7ff;
  --color-veiling-waterfalls-200: #c6d4e6;
  --color-veiling-waterfalls-300: #afbfd3;
  --color-veiling-waterfalls-400: #90a0b6;
  --color-veiling-waterfalls-500: #76869b;
  --color-veiling-waterfalls-600: #5d6c81;
  --color-veiling-waterfalls-700: #485669;
  --color-veiling-waterfalls-800: #374353;
  --color-veiling-waterfalls-900: #293441;
  --color-veiling-waterfalls-950: #18202a;
  --color-caribbean: #c6f5e7;
  --color-caribbean-50: #e0faf2;
  --color-caribbean-100: #c6f5e7;
  --color-caribbean-200: #bcdfd4;
  --color-caribbean-300: #a2c9be;
  --color-caribbean-400: #80ab9f;
  --color-caribbean-500: #649084;
  --color-caribbean-600: #4b756a;
  --color-caribbean-700: #375e54;
  --color-caribbean-800: #284a41;
  --color-caribbean-900: #1c3932;
  --color-caribbean-950: #0f241e;
}

    Similar palettes