Over the Sky to Water Color Palette

About this palette

Over the Sky to Water is a 4-color pastel, light palette: #A2D1E8 (Over the Sky), #F2D0DA (Ballerina), #E7DDB4 (Vinaigrette), #DAF2FF (Water). It mixes blue, pink, yellow, white tones and feels warm overall. The strongest text pairing is #A2D1E8 on #DAF2FF with a contrast ratio of 1.41:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Sky	rgb(162, 209, 232)	hsl(200, 60%, 77%)
Ballerina	rgb(242, 208, 218)	hsl(342, 57%, 88%)
Vinaigrette	rgb(231, 221, 180)	hsl(48, 52%, 81%)
Water	rgb(218, 242, 255)	hsl(201, 100%, 93%)

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

CSS variables

/* Over the Sky to Water — https://swatchly.xyz/palette/a2d1e8-f2d0da-e7ddb4-daf2ff */
:root {
  --over-the-sky: #a2d1e8;
  --ballerina: #f2d0da;
  --vinaigrette: #e7ddb4;
  --water: #daf2ff;
}

Tailwind CSS v4

/* Over the Sky to Water — https://swatchly.xyz/palette/a2d1e8-f2d0da-e7ddb4-daf2ff */
@theme {
  --color-over-the-sky: #a2d1e8;
  --color-over-the-sky-50: #f3fbff;
  --color-over-the-sky-100: #e0f5ff;
  --color-over-the-sky-200: #c3e4f5;
  --color-over-the-sky-300: #a2d1e8;
  --color-over-the-sky-400: #84afc4;
  --color-over-the-sky-500: #6692a8;
  --color-over-the-sky-600: #4a768b;
  --color-over-the-sky-700: #355e70;
  --color-over-the-sky-800: #254959;
  --color-over-the-sky-900: #193745;
  --color-over-the-sky-950: #0c222c;
  --color-ballerina: #f2d0da;
  --color-ballerina-50: #fff4f7;
  --color-ballerina-100: #fce7ed;
  --color-ballerina-200: #f2d0da;
  --color-ballerina-300: #d7bbc3;
  --color-ballerina-400: #b89aa3;
  --color-ballerina-500: #9d7e87;
  --color-ballerina-600: #80636c;
  --color-ballerina-700: #674d55;
  --color-ballerina-800: #523b42;
  --color-ballerina-900: #402d33;
  --color-ballerina-950: #281b1f;
  --color-vinaigrette: #e7ddb4;
  --color-vinaigrette-50: #fef9e3;
  --color-vinaigrette-100: #f6f0d8;
  --color-vinaigrette-200: #e7ddb4;
  --color-vinaigrette-300: #cec5a4;
  --color-vinaigrette-400: #aea580;
  --color-vinaigrette-500: #928963;
  --color-vinaigrette-600: #776d49;
  --color-vinaigrette-700: #5e5634;
  --color-vinaigrette-800: #4a4225;
  --color-vinaigrette-900: #39331a;
  --color-vinaigrette-950: #241f0d;
  --color-water: #daf2ff;
  --color-water-50: #eef9ff;
  --color-water-100: #daf2ff;
  --color-water-200: #cbdde6;
  --color-water-300: #b2c6d1;
  --color-water-400: #91a6b2;
  --color-water-500: #758b96;
  --color-water-600: #5b707b;
  --color-water-700: #465862;
  --color-water-800: #35454e;
  --color-water-900: #27353c;
  --color-water-950: #172126;
}