Merlot to Cloudless Color Palette

About this palette

Merlot to Cloudless is a 5-color warm palette: #700032 (Merlot), #A60052 (Plum Perfect), #C96F00 (Cajeta), #00DBBD (Ice Climber), #D8EDFF (Cloudless). It mixes red, orange, turquoise, white tones and feels warm overall. The strongest text pairing is #700032 on #D8EDFF with a contrast ratio of 10.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Merlot	rgb(112, 0, 50)	hsl(333, 100%, 22%)
Plum Perfect	rgb(166, 0, 82)	hsl(330, 100%, 33%)
Cajeta	rgb(201, 111, 0)	hsl(33, 100%, 39%)
Ice Climber	rgb(0, 219, 189)	hsl(172, 100%, 43%)
Cloudless	rgb(216, 237, 255)	hsl(208, 100%, 92%)

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.

Aa10.07:1 Very good#700032 on #D8EDFF
Aa10.07:1 Very good#D8EDFF on #700032
Aa6.84:1 Good#700032 on #00DBBD
Aa6.84:1 Good#00DBBD on #700032
Aa6.37:1 Good#A60052 on #D8EDFF
Aa6.37:1 Good#D8EDFF on #A60052
Aa4.33:1 Poor#A60052 on #00DBBD
Aa4.33:1 Poor#00DBBD on #A60052

Color blindness preview

CSS variables

/* Merlot to Cloudless — https://swatchly.xyz/palette/700032-a60052-c96f00-00dbbd-d8edff */
:root {
  --merlot: #700032;
  --plum-perfect: #a60052;
  --cajeta: #c96f00;
  --ice-climber: #00dbbd;
  --cloudless: #d8edff;
}

Tailwind CSS v4

/* Merlot to Cloudless — https://swatchly.xyz/palette/700032-a60052-c96f00-00dbbd-d8edff */
@theme {
  --color-merlot: #700032;
  --color-merlot-50: #fff1f4;
  --color-merlot-100: #ffe3e8;
  --color-merlot-200: #ffc6d2;
  --color-merlot-300: #ff9fb6;
  --color-merlot-400: #e37794;
  --color-merlot-500: #c55978;
  --color-merlot-600: #a33d5d;
  --color-merlot-700: #842846;
  --color-merlot-800: #700032;
  --color-merlot-900: #510f27;
  --color-merlot-950: #340617;
  --color-plum-perfect: #a60052;
  --color-plum-perfect-50: #fff1f4;
  --color-plum-perfect-100: #ffe3e9;
  --color-plum-perfect-200: #ffc7d5;
  --color-plum-perfect-300: #ffa4bd;
  --color-plum-perfect-400: #fb6c9b;
  --color-plum-perfect-500: #e04b81;
  --color-plum-perfect-600: #c02d68;
  --color-plum-perfect-700: #a60052;
  --color-plum-perfect-800: #840040;
  --color-plum-perfect-900: #670030;
  --color-plum-perfect-950: #44001e;
  --color-cajeta: #c96f00;
  --color-cajeta-50: #fff3eb;
  --color-cajeta-100: #ffe7d6;
  --color-cajeta-200: #ffcea8;
  --color-cajeta-300: #ffaf6c;
  --color-cajeta-400: #e48c3c;
  --color-cajeta-500: #c96f00;
  --color-cajeta-600: #a35900;
  --color-cajeta-700: #824600;
  --color-cajeta-800: #663500;
  --color-cajeta-900: #4f2800;
  --color-cajeta-950: #331800;
  --color-ice-climber: #00dbbd;
  --color-ice-climber-50: #d0fff3;
  --color-ice-climber-100: #a1fde8;
  --color-ice-climber-200: #79ecd4;
  --color-ice-climber-300: #00dbbd;
  --color-ice-climber-400: #00b89e;
  --color-ice-climber-500: #009984;
  --color-ice-climber-600: #007c6a;
  --color-ice-climber-700: #006354;
  --color-ice-climber-800: #004e42;
  --color-ice-climber-900: #003c33;
  --color-ice-climber-950: #00261f;
  --color-cloudless: #d8edff;
  --color-cloudless-50: #ebf6ff;
  --color-cloudless-100: #d8edff;
  --color-cloudless-200: #c9d9e6;
  --color-cloudless-300: #b1c3d1;
  --color-cloudless-400: #91a4b4;
  --color-cloudless-500: #758899;
  --color-cloudless-600: #5c6e7d;
  --color-cloudless-700: #475765;
  --color-cloudless-800: #364450;
  --color-cloudless-900: #28343f;
  --color-cloudless-950: #182028;
}