One Year of Rain to Cotton Boll color palette

27455EOne Year of Rain 2D6380Sea Goddess AC733BGinger Dough BF956EChalet DAC1A4Dune E1F1FFCotton Boll

Open in generator Export PNG, PDF, ASE…

About this palette

One Year of Rain to Cotton Boll is a 6-color vintage palette: #27455E (One Year of Rain), #2D6380 (Sea Goddess), #AC733B (Ginger Dough), #BF956E (Chalet), #DAC1A4 (Dune), #E1F1FF (Cotton Boll). It mixes blue, orange, white tones and feels warm overall. The strongest text pairing is #27455E on #E1F1FF with a contrast ratio of 8.68:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
One Year of Rain	rgb(39, 69, 94)	hsl(207, 41%, 26%)
Sea Goddess	rgb(45, 99, 128)	hsl(201, 48%, 34%)
Ginger Dough	rgb(172, 115, 59)	hsl(30, 49%, 45%)
Chalet	rgb(191, 149, 110)	hsl(29, 39%, 59%)
Dune	rgb(218, 193, 164)	hsl(32, 42%, 75%)
Cotton Boll	rgb(225, 241, 255)	hsl(208, 100%, 94%)

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.

Aa8.68:1 Very good#27455E on #E1F1FF
Aa8.68:1 Very good#E1F1FF on #27455E
Aa5.79:1 Good#27455E on #DAC1A4
Aa5.79:1 Good#DAC1A4 on #27455E
Aa5.68:1 Good#2D6380 on #E1F1FF
Aa5.68:1 Good#E1F1FF on #2D6380
Aa3.79:1 Poor#2D6380 on #DAC1A4
Aa3.79:1 Poor#DAC1A4 on #2D6380

Color blindness preview

CSS variables

/* One Year of Rain to Cotton Boll — https://swatchly.xyz/palette/27455e-2d6380-ac733b-bf956e-dac1a4-e1f1ff */
:root {
  --one-year-of-rain: #27455e;
  --sea-goddess: #2d6380;
  --ginger-dough: #ac733b;
  --chalet: #bf956e;
  --dune: #dac1a4;
  --cotton-boll: #e1f1ff;
}

Tailwind CSS v4

/* One Year of Rain to Cotton Boll — https://swatchly.xyz/palette/27455e-2d6380-ac733b-bf956e-dac1a4-e1f1ff */
@theme {
  --color-one-year-of-rain: #27455e;
  --color-one-year-of-rain-50: #edf6ff;
  --color-one-year-of-rain-100: #dbeeff;
  --color-one-year-of-rain-200: #c2dbf2;
  --color-one-year-of-rain-300: #a8c5de;
  --color-one-year-of-rain-400: #86a5c1;
  --color-one-year-of-rain-500: #6a8aa6;
  --color-one-year-of-rain-600: #506f8a;
  --color-one-year-of-rain-700: #3c5870;
  --color-one-year-of-rain-800: #27455e;
  --color-one-year-of-rain-900: #203546;
  --color-one-year-of-rain-950: #12212d;
  --color-sea-goddess: #2d6380;
  --color-sea-goddess-50: #ebf7ff;
  --color-sea-goddess-100: #d6f0ff;
  --color-sea-goddess-200: #b7dff8;
  --color-sea-goddess-300: #9dcbe7;
  --color-sea-goddess-400: #7aadcb;
  --color-sea-goddess-500: #5d93b2;
  --color-sea-goddess-600: #447997;
  --color-sea-goddess-700: #2d6380;
  --color-sea-goddess-800: #204d66;
  --color-sea-goddess-900: #143c50;
  --color-sea-goddess-950: #082635;
  --color-ginger-dough: #ac733b;
  --color-ginger-dough-50: #fff2e6;
  --color-ginger-dough-100: #ffe4cc;
  --color-ginger-dough-200: #facba1;
  --color-ginger-dough-300: #e6b181;
  --color-ginger-dough-400: #c9905a;
  --color-ginger-dough-500: #ac733b;
  --color-ginger-dough-600: #905a22;
  --color-ginger-dough-700: #76450d;
  --color-ginger-dough-800: #5f3501;
  --color-ginger-dough-900: #4a2800;
  --color-ginger-dough-950: #301800;
  --color-chalet: #bf956e;
  --color-chalet-50: #fff1e5;
  --color-chalet-100: #ffe4cc;
  --color-chalet-200: #f0ceb0;
  --color-chalet-300: #dcb694;
  --color-chalet-400: #bf956e;
  --color-chalet-500: #a37a54;
  --color-chalet-600: #87613c;
  --color-chalet-700: #6e4b2a;
  --color-chalet-800: #583a1c;
  --color-chalet-900: #452c12;
  --color-chalet-950: #2d1b08;
  --color-dune: #dac1a4;
  --color-dune-50: #fff6ec;
  --color-dune-100: #fbecda;
  --color-dune-200: #ebd8c3;
  --color-dune-300: #dac1a4;
  --color-dune-400: #b8a186;
  --color-dune-500: #9c8569;
  --color-dune-600: #806a4f;
  --color-dune-700: #67533b;
  --color-dune-800: #513f2b;
  --color-dune-900: #3e301e;
  --color-dune-950: #281d10;
  --color-cotton-boll: #e1f1ff;
  --color-cotton-boll-50: #f2f9ff;
  --color-cotton-boll-100: #e1f1ff;
  --color-cotton-boll-200: #d1dce6;
  --color-cotton-boll-300: #b8c5d0;
  --color-cotton-boll-400: #97a5b2;
  --color-cotton-boll-500: #7b8996;
  --color-cotton-boll-600: #606e7a;
  --color-cotton-boll-700: #4b5762;
  --color-cotton-boll-800: #39444d;
  --color-cotton-boll-900: #2b343c;
  --color-cotton-boll-950: #1a2026;
}