Start generating

Peat Brown to Cloudless color palette

5A3A21Peat Brown5A4E79Royal Robe9F7757MochaAAAE7CCardamomC8CA9ACourt-BouillonD2EDFECloudless
Open in generator Export PNG, PDF, ASE…

About this palette

Peat Brown to Cloudless is a 6-color warm, earthy, vintage palette: #5A3A21 (Peat Brown), #5A4E79 (Royal Robe), #9F7757 (Mocha), #AAAE7C (Cardamom), #C8CA9A (Court-Bouillon), #D2EDFE (Cloudless). It mixes brown, purple, orange, yellow, blue tones and feels warm overall. The strongest text pairing is #5A3A21 on #D2EDFE with a contrast ratio of 8.38:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Peat Brownrgb(90, 58, 33)hsl(26, 46%, 24%)
Royal Robergb(90, 78, 121)hsl(257, 22%, 39%)
Mochargb(159, 119, 87)hsl(27, 29%, 48%)
Cardamomrgb(170, 174, 124)hsl(65, 24%, 58%)
Court-Bouillonrgb(200, 202, 154)hsl(62, 31%, 70%)
Cloudlessrgb(210, 237, 254)hsl(203, 96%, 91%)

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.38:1 Very good#5A3A21 on #D2EDFE
  • Aa8.38:1 Very good#D2EDFE on #5A3A21
  • Aa6.17:1 Good#5A4E79 on #D2EDFE
  • Aa6.17:1 Good#D2EDFE on #5A4E79
  • Aa6.00:1 Good#5A3A21 on #C8CA9A
  • Aa6.00:1 Good#C8CA9A on #5A3A21
  • Aa4.42:1 Poor#5A4E79 on #C8CA9A
  • Aa4.42:1 Poor#C8CA9A on #5A4E79

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Peat Brown to Cloudless — https://swatchly.xyz/palette/5a3a21-5a4e79-9f7757-aaae7c-c8ca9a-d2edfe */
:root {
  --peat-brown: #5a3a21;
  --royal-robe: #5a4e79;
  --mocha: #9f7757;
  --cardamom: #aaae7c;
  --court-bouillon: #c8ca9a;
  --cloudless: #d2edfe;
}

Tailwind CSS v4

/* Peat Brown to Cloudless — https://swatchly.xyz/palette/5a3a21-5a4e79-9f7757-aaae7c-c8ca9a-d2edfe */
@theme {
  --color-peat-brown: #5a3a21;
  --color-peat-brown-50: #fff2ea;
  --color-peat-brown-100: #ffe6d4;
  --color-peat-brown-200: #efd1bc;
  --color-peat-brown-300: #dbb9a1;
  --color-peat-brown-400: #bd997f;
  --color-peat-brown-500: #a27e63;
  --color-peat-brown-600: #86644a;
  --color-peat-brown-700: #6d4e36;
  --color-peat-brown-800: #5a3a21;
  --color-peat-brown-900: #442d1c;
  --color-peat-brown-950: #2b1b0f;
  --color-royal-robe: #5a4e79;
  --color-royal-robe-50: #f6f3ff;
  --color-royal-robe-100: #ede7ff;
  --color-royal-robe-200: #dad1f7;
  --color-royal-robe-300: #c4bae4;
  --color-royal-robe-400: #a69ac8;
  --color-royal-robe-500: #8b7ead;
  --color-royal-robe-600: #706490;
  --color-royal-robe-700: #5a4e79;
  --color-royal-robe-800: #463c5f;
  --color-royal-robe-900: #362e4b;
  --color-royal-robe-950: #221b31;
  --color-mocha: #9f7757;
  --color-mocha-50: #fff1e7;
  --color-mocha-100: #ffe3ce;
  --color-mocha-200: #efcdb3;
  --color-mocha-300: #dab597;
  --color-mocha-400: #bc9374;
  --color-mocha-500: #9f7757;
  --color-mocha-600: #845e40;
  --color-mocha-700: #6b492e;
  --color-mocha-800: #563820;
  --color-mocha-900: #442b16;
  --color-mocha-950: #2c1a0b;
  --color-cardamom: #aaae7c;
  --color-cardamom-50: #f8fbdf;
  --color-cardamom-100: #f0f3d4;
  --color-cardamom-200: #dde1bc;
  --color-cardamom-300: #c8cca2;
  --color-cardamom-400: #aaae7c;
  --color-cardamom-500: #8d9160;
  --color-cardamom-600: #717545;
  --color-cardamom-700: #5a5c31;
  --color-cardamom-800: #454821;
  --color-cardamom-900: #353616;
  --color-cardamom-950: #20210a;
  --color-court-bouillon: #c8ca9a;
  --color-court-bouillon-50: #f9fae0;
  --color-court-bouillon-100: #f0f1d4;
  --color-court-bouillon-200: #dddfbc;
  --color-court-bouillon-300: #c8ca9a;
  --color-court-bouillon-400: #a7a97d;
  --color-court-bouillon-500: #8b8d5f;
  --color-court-bouillon-600: #707145;
  --color-court-bouillon-700: #595a31;
  --color-court-bouillon-800: #454622;
  --color-court-bouillon-900: #343517;
  --color-court-bouillon-950: #20210b;
  --color-cloudless: #d2edfe;
  --color-cloudless-50: #e6f5ff;
  --color-cloudless-100: #d2edfe;
  --color-cloudless-200: #c5d9e5;
  --color-cloudless-300: #acc3d1;
  --color-cloudless-400: #8ca4b4;
  --color-cloudless-500: #718999;
  --color-cloudless-600: #586f7e;
  --color-cloudless-700: #435966;
  --color-cloudless-800: #324551;
  --color-cloudless-900: #25353f;
  --color-cloudless-950: #152128;
}

Similar palettes