Start generating

Warm Spring to Pastel Brown color palette

3D83B5Warm Spring0C4057Maniac Mansion281C11Burnt CoffeeCFAB97FrappéA8CDE3Featherbed83674CPastel Brown
Open in generator Export PNG, PDF, ASE…

About this palette

Warm Spring to Pastel Brown is a 6-color muted palette: #3D83B5 (Warm Spring), #0C4057 (Maniac Mansion), #281C11 (Burnt Coffee), #CFAB97 (Frappé), #A8CDE3 (Featherbed), #83674C (Pastel Brown). It mixes blue, gray, orange, brown tones and feels cool overall. The strongest text pairing is #281C11 on #A8CDE3 with a contrast ratio of 9.89:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Warm Springrgb(61, 131, 181)hsl(205, 50%, 47%)
Maniac Mansionrgb(12, 64, 87)hsl(198, 76%, 19%)
Burnt Coffeergb(40, 28, 17)hsl(29, 40%, 11%)
Frappérgb(207, 171, 151)hsl(21, 37%, 70%)
Featherbedrgb(168, 205, 227)hsl(202, 51%, 77%)
Pastel Brownrgb(131, 103, 76)hsl(29, 27%, 41%)

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.

  • Aa9.89:1 Very good#281C11 on #A8CDE3
  • Aa9.89:1 Very good#A8CDE3 on #281C11
  • Aa7.85:1 Very good#281C11 on #CFAB97
  • Aa7.85:1 Very good#CFAB97 on #281C11
  • Aa6.63:1 Good#0C4057 on #A8CDE3
  • Aa6.63:1 Good#A8CDE3 on #0C4057
  • Aa5.26:1 Good#0C4057 on #CFAB97
  • Aa5.26:1 Good#CFAB97 on #0C4057

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Warm Spring to Pastel Brown — https://swatchly.xyz/palette/3d83b5-0c4057-281c11-cfab97-a8cde3-83674c */
:root {
  --warm-spring: #3d83b5;
  --maniac-mansion: #0c4057;
  --burnt-coffee: #281c11;
  --frapp: #cfab97;
  --featherbed: #a8cde3;
  --pastel-brown: #83674c;
}

Tailwind CSS v4

/* Warm Spring to Pastel Brown — https://swatchly.xyz/palette/3d83b5-0c4057-281c11-cfab97-a8cde3-83674c */
@theme {
  --color-warm-spring: #3d83b5;
  --color-warm-spring-50: #e9f5ff;
  --color-warm-spring-100: #d3ebff;
  --color-warm-spring-200: #a8d9ff;
  --color-warm-spring-300: #84c1f0;
  --color-warm-spring-400: #5da0d3;
  --color-warm-spring-500: #3d83b5;
  --color-warm-spring-600: #246a98;
  --color-warm-spring-700: #11547e;
  --color-warm-spring-800: #034267;
  --color-warm-spring-900: #003352;
  --color-warm-spring-950: #002036;
  --color-maniac-mansion: #0c4057;
  --color-maniac-mansion-50: #eaf7ff;
  --color-maniac-mansion-100: #d5f0ff;
  --color-maniac-mansion-200: #b9def3;
  --color-maniac-mansion-300: #9cc6de;
  --color-maniac-mansion-400: #77a6c0;
  --color-maniac-mansion-500: #5989a3;
  --color-maniac-mansion-600: #3e6d85;
  --color-maniac-mansion-700: #2a546a;
  --color-maniac-mansion-800: #0c4057;
  --color-maniac-mansion-900: #123040;
  --color-maniac-mansion-950: #081d28;
  --color-burnt-coffee: #281c11;
  --color-burnt-coffee-50: #fdf3eb;
  --color-burnt-coffee-100: #f4e9e0;
  --color-burnt-coffee-200: #e1d5ca;
  --color-burnt-coffee-300: #ccbeb2;
  --color-burnt-coffee-400: #ae9e91;
  --color-burnt-coffee-500: #928376;
  --color-burnt-coffee-600: #77695c;
  --color-burnt-coffee-700: #5f5247;
  --color-burnt-coffee-800: #4b4036;
  --color-burnt-coffee-900: #3a3028;
  --color-burnt-coffee-950: #281c11;
  --color-frapp: #cfab97;
  --color-frapp-50: #ffe9dd;
  --color-frapp-100: #f6dcce;
  --color-frapp-200: #e3c5b5;
  --color-frapp-300: #cfab97;
  --color-frapp-400: #b18e7b;
  --color-frapp-500: #977663;
  --color-frapp-600: #7d5e4c;
  --color-frapp-700: #664a3a;
  --color-frapp-800: #533a2c;
  --color-frapp-900: #432d21;
  --color-frapp-950: #2a1b13;
  --color-featherbed: #a8cde3;
  --color-featherbed-50: #f1faff;
  --color-featherbed-100: #dff3ff;
  --color-featherbed-200: #c7e1f1;
  --color-featherbed-300: #a8cde3;
  --color-featherbed-400: #8aacc0;
  --color-featherbed-500: #6c8fa4;
  --color-featherbed-600: #527487;
  --color-featherbed-700: #3c5c6d;
  --color-featherbed-800: #2c4756;
  --color-featherbed-900: #1f3643;
  --color-featherbed-950: #11222b;
  --color-pastel-brown: #83674c;
  --color-pastel-brown-50: #fff3e8;
  --color-pastel-brown-100: #fce8d5;
  --color-pastel-brown-200: #ebd3bd;
  --color-pastel-brown-300: #d7bca3;
  --color-pastel-brown-400: #b99c81;
  --color-pastel-brown-500: #9e8165;
  --color-pastel-brown-600: #83674c;
  --color-pastel-brown-700: #6a5138;
  --color-pastel-brown-800: #543e29;
  --color-pastel-brown-900: #422f1d;
  --color-pastel-brown-950: #2a1d0f;
}

Similar palettes