Start generating

Sweet Butter to Myrtle color palette

FFFAD5Sweet ButterCAC39ACastaway Beach83936BBullfrog82BA97Neptune Green336D3CParsley Sprig2C3F18Myrtle
Open in generator Export PNG, PDF, ASE…

About this palette

Sweet Butter to Myrtle is a 6-color cool, earthy palette: #FFFAD5 (Sweet Butter), #CAC39A (Castaway Beach), #83936B (Bullfrog), #82BA97 (Neptune Green), #336D3C (Parsley Sprig), #2C3F18 (Myrtle). It mixes white, yellow, green tones and feels cool overall. The strongest text pairing is #FFFAD5 on #2C3F18 with a contrast ratio of 10.86:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sweet Butterrgb(255, 250, 213)hsl(53, 100%, 92%)
Castaway Beachrgb(202, 195, 154)hsl(51, 31%, 70%)
Bullfrogrgb(131, 147, 107)hsl(84, 16%, 50%)
Neptune Greenrgb(130, 186, 151)hsl(142, 29%, 62%)
Parsley Sprigrgb(51, 109, 60)hsl(129, 36%, 31%)
Myrtlergb(44, 63, 24)hsl(89, 45%, 17%)

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.86:1 Very good#FFFAD5 on #2C3F18
  • Aa10.86:1 Very good#2C3F18 on #FFFAD5
  • Aa6.43:1 Good#CAC39A on #2C3F18
  • Aa6.43:1 Good#2C3F18 on #CAC39A
  • Aa5.86:1 Good#FFFAD5 on #336D3C
  • Aa5.86:1 Good#336D3C on #FFFAD5
  • Aa5.14:1 Good#82BA97 on #2C3F18
  • Aa5.14:1 Good#2C3F18 on #82BA97

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sweet Butter to Myrtle — https://swatchly.xyz/palette/fffad5-cac39a-83936b-82ba97-336d3c-2c3f18 */
:root {
  --sweet-butter: #fffad5;
  --castaway-beach: #cac39a;
  --bullfrog: #83936b;
  --neptune-green: #82ba97;
  --parsley-sprig: #336d3c;
  --myrtle: #2c3f18;
}

Tailwind CSS v4

/* Sweet Butter to Myrtle — https://swatchly.xyz/palette/fffad5-cac39a-83936b-82ba97-336d3c-2c3f18 */
@theme {
  --color-sweet-butter: #fffad5;
  --color-sweet-butter-50: #fffad5;
  --color-sweet-butter-100: #f2efd9;
  --color-sweet-butter-200: #dedbc1;
  --color-sweet-butter-300: #c8c4a6;
  --color-sweet-butter-400: #a8a483;
  --color-sweet-butter-500: #8d8866;
  --color-sweet-butter-600: #726d4d;
  --color-sweet-butter-700: #5a5639;
  --color-sweet-butter-800: #47432a;
  --color-sweet-butter-900: #37331e;
  --color-sweet-butter-950: #222010;
  --color-castaway-beach: #cac39a;
  --color-castaway-beach-50: #faf6e0;
  --color-castaway-beach-100: #f1edd3;
  --color-castaway-beach-200: #ded9bb;
  --color-castaway-beach-300: #cac39a;
  --color-castaway-beach-400: #aaa37d;
  --color-castaway-beach-500: #8e8861;
  --color-castaway-beach-600: #746d48;
  --color-castaway-beach-700: #5c5634;
  --color-castaway-beach-800: #484325;
  --color-castaway-beach-900: #38331a;
  --color-castaway-beach-950: #23200d;
  --color-bullfrog: #83936b;
  --color-bullfrog-50: #f1fbe3;
  --color-bullfrog-100: #e7f2d8;
  --color-bullfrog-200: #d4e0c2;
  --color-bullfrog-300: #bdcba8;
  --color-bullfrog-400: #9ead87;
  --color-bullfrog-500: #83936b;
  --color-bullfrog-600: #687751;
  --color-bullfrog-700: #515f3c;
  --color-bullfrog-800: #3e4a2b;
  --color-bullfrog-900: #2f391e;
  --color-bullfrog-950: #1c2310;
  --color-neptune-green: #82ba97;
  --color-neptune-green-50: #e9fff0;
  --color-neptune-green-100: #d9fae4;
  --color-neptune-green-200: #c2ead0;
  --color-neptune-green-300: #a8d6b8;
  --color-neptune-green-400: #82ba97;
  --color-neptune-green-500: #659c7b;
  --color-neptune-green-600: #497f5f;
  --color-neptune-green-700: #346648;
  --color-neptune-green-800: #235036;
  --color-neptune-green-900: #173d28;
  --color-neptune-green-950: #0a2516;
  --color-parsley-sprig: #336d3c;
  --color-parsley-sprig-50: #e0ffe2;
  --color-parsley-sprig-100: #d1f7d4;
  --color-parsley-sprig-200: #bae7be;
  --color-parsley-sprig-300: #a1d4a6;
  --color-parsley-sprig-400: #7eb784;
  --color-parsley-sprig-500: #629d69;
  --color-parsley-sprig-600: #498351;
  --color-parsley-sprig-700: #336d3c;
  --color-parsley-sprig-800: #25562d;
  --color-parsley-sprig-900: #18431f;
  --color-parsley-sprig-950: #0b2b11;
  --color-myrtle: #2c3f18;
  --color-myrtle-50: #edfbe1;
  --color-myrtle-100: #e2f1d5;
  --color-myrtle-200: #ccdfbd;
  --color-myrtle-300: #b4c9a3;
  --color-myrtle-400: #95ab82;
  --color-myrtle-500: #7a9167;
  --color-myrtle-600: #62774e;
  --color-myrtle-700: #4d603b;
  --color-myrtle-800: #3c4d2c;
  --color-myrtle-900: #2c3f18;
  --color-myrtle-950: #1d2712;
}

Similar palettes