Arrowwood to Purple Climax Color Palette

About this palette

Arrowwood to Purple Climax is a 5-color vibrant, warm, neon palette: #B57F00 (Arrowwood), #FFAC5C (Rajah), #D99F00 (Mustard Musketeers), #58A900 (Yoshi), #8430F8 (Purple Climax). It mixes yellow, orange, green, purple tones and feels warm overall. The strongest text pairing is #FFAC5C on #8430F8 with a contrast ratio of 3.01:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Arrowwood	rgb(181, 127, 0)	hsl(42, 100%, 35%)
Rajah	rgb(255, 172, 92)	hsl(29, 100%, 68%)
Mustard Musketeers	rgb(217, 159, 0)	hsl(44, 100%, 43%)
Yoshi	rgb(88, 169, 0)	hsl(89, 100%, 33%)
Purple Climax	rgb(132, 48, 248)	hsl(265, 93%, 58%)

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.

Aa3.01:1 Poor#FFAC5C on #8430F8
Aa3.01:1 Poor#8430F8 on #FFAC5C

Color blindness preview

CSS variables

/* Arrowwood to Purple Climax — https://swatchly.xyz/palette/b57f00-ffac5c-d99f00-58a900-8430f8 */
:root {
  --arrowwood: #b57f00;
  --rajah: #ffac5c;
  --mustard-musketeers: #d99f00;
  --yoshi: #58a900;
  --purple-climax: #8430f8;
}

Tailwind CSS v4

/* Arrowwood to Purple Climax — https://swatchly.xyz/palette/b57f00-ffac5c-d99f00-58a900-8430f8 */
@theme {
  --color-arrowwood: #b57f00;
  --color-arrowwood-50: #fff4e4;
  --color-arrowwood-100: #ffeac9;
  --color-arrowwood-200: #fcd390;
  --color-arrowwood-300: #ebbb6d;
  --color-arrowwood-400: #cf9b3d;
  --color-arrowwood-500: #b57f00;
  --color-arrowwood-600: #926600;
  --color-arrowwood-700: #745000;
  --color-arrowwood-800: #5b3e00;
  --color-arrowwood-900: #472f00;
  --color-arrowwood-950: #2d1c00;
  --color-rajah: #ffac5c;
  --color-rajah-50: #fff3e8;
  --color-rajah-100: #ffe6d1;
  --color-rajah-200: #ffcca0;
  --color-rajah-300: #ffac5c;
  --color-rajah-400: #db8d40;
  --color-rajah-500: #bf7113;
  --color-rajah-600: #9c5900;
  --color-rajah-700: #7c4600;
  --color-rajah-800: #623600;
  --color-rajah-900: #4c2900;
  --color-rajah-950: #311800;
  --color-mustard-musketeers: #d99f00;
  --color-mustard-musketeers-50: #fff7ea;
  --color-mustard-musketeers-100: #ffeecf;
  --color-mustard-musketeers-200: #ffd88f;
  --color-mustard-musketeers-300: #f0c062;
  --color-mustard-musketeers-400: #d99f00;
  --color-mustard-musketeers-500: #b58400;
  --color-mustard-musketeers-600: #916900;
  --color-mustard-musketeers-700: #735300;
  --color-mustard-musketeers-800: #5a4000;
  --color-mustard-musketeers-900: #453000;
  --color-mustard-musketeers-950: #2b1c00;
  --color-yoshi: #58a900;
  --color-yoshi-50: #eaffdf;
  --color-yoshi-100: #d3ffbb;
  --color-yoshi-200: #b6f295;
  --color-yoshi-300: #9bdf73;
  --color-yoshi-400: #76c342;
  --color-yoshi-500: #58a900;
  --color-yoshi-600: #468800;
  --color-yoshi-700: #366c00;
  --color-yoshi-800: #295400;
  --color-yoshi-900: #1d4000;
  --color-yoshi-950: #102800;
  --color-purple-climax: #8430f8;
  --color-purple-climax-50: #f5f3ff;
  --color-purple-climax-100: #ede9ff;
  --color-purple-climax-200: #dcd2ff;
  --color-purple-climax-300: #c8b8ff;
  --color-purple-climax-400: #ad8fff;
  --color-purple-climax-500: #9865ff;
  --color-purple-climax-600: #8430f8;
  --color-purple-climax-700: #6c0cd3;
  --color-purple-climax-800: #5500aa;
  --color-purple-climax-900: #410086;
  --color-purple-climax-950: #290059;
}