Skinny Jeans to Fennel Fiasco Color Palette

About this palette

Skinny Jeans to Fennel Fiasco is a 5-color vibrant, cool palette: #3F8EFF (Skinny Jeans), #FF9F29 (Dragon Ball), #FF8386 (Strawberry Field), #007B7D (Wizards Orb), #00A743 (Fennel Fiasco). It mixes blue, orange, red, turquoise, green tones and feels cool overall. The strongest text pairing is #FF9F29 on #007B7D with a contrast ratio of 2.48:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Skinny Jeans	rgb(63, 142, 255)	hsl(215, 100%, 62%)
Dragon Ball	rgb(255, 159, 41)	hsl(33, 100%, 58%)
Strawberry Field	rgb(255, 131, 134)	hsl(359, 100%, 76%)
Wizards Orb	rgb(0, 123, 125)	hsl(181, 100%, 25%)
Fennel Fiasco	rgb(0, 167, 67)	hsl(144, 100%, 33%)

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.

Color blindness preview

CSS variables

/* Skinny Jeans to Fennel Fiasco — https://swatchly.xyz/palette/3f8eff-ff9f29-ff8386-007b7d-00a743 */
:root {
  --skinny-jeans: #3f8eff;
  --dragon-ball: #ff9f29;
  --strawberry-field: #ff8386;
  --wizards-orb: #007b7d;
  --fennel-fiasco: #00a743;
}

Tailwind CSS v4

/* Skinny Jeans to Fennel Fiasco — https://swatchly.xyz/palette/3f8eff-ff9f29-ff8386-007b7d-00a743 */
@theme {
  --color-skinny-jeans: #3f8eff;
  --color-skinny-jeans-50: #f2f7ff;
  --color-skinny-jeans-100: #e6f0ff;
  --color-skinny-jeans-200: #c9dfff;
  --color-skinny-jeans-300: #a7cbff;
  --color-skinny-jeans-400: #73acff;
  --color-skinny-jeans-500: #3f8eff;
  --color-skinny-jeans-600: #1f70dd;
  --color-skinny-jeans-700: #0056bb;
  --color-skinny-jeans-800: #004294;
  --color-skinny-jeans-900: #003273;
  --color-skinny-jeans-950: #001e4b;
  --color-dragon-ball: #ff9f29;
  --color-dragon-ball-50: #ffeddd;
  --color-dragon-ball-100: #ffdfc1;
  --color-dragon-ball-200: #ffc388;
  --color-dragon-ball-300: #ff9f29;
  --color-dragon-ball-400: #da8300;
  --color-dragon-ball-500: #b76d00;
  --color-dragon-ball-600: #955700;
  --color-dragon-ball-700: #774500;
  --color-dragon-ball-800: #5f3600;
  --color-dragon-ball-900: #4b2a00;
  --color-dragon-ball-950: #301900;
  --color-strawberry-field: #ff8386;
  --color-strawberry-field-50: #fff8f7;
  --color-strawberry-field-100: #ffedec;
  --color-strawberry-field-200: #ffd4d3;
  --color-strawberry-field-300: #ffb6b5;
  --color-strawberry-field-400: #ff8386;
  --color-strawberry-field-500: #dc656a;
  --color-strawberry-field-600: #bb474e;
  --color-strawberry-field-700: #9b2f38;
  --color-strawberry-field-800: #7d1d27;
  --color-strawberry-field-900: #62101b;
  --color-strawberry-field-950: #3f050d;
  --color-wizards-orb: #007b7d;
  --color-wizards-orb-50: #d4ffff;
  --color-wizards-orb-100: #c0f7f8;
  --color-wizards-orb-200: #a3e6e6;
  --color-wizards-orb-300: #83d1d1;
  --color-wizards-orb-400: #57b2b3;
  --color-wizards-orb-500: #339698;
  --color-wizards-orb-600: #007b7d;
  --color-wizards-orb-700: #006263;
  --color-wizards-orb-800: #004c4e;
  --color-wizards-orb-900: #003b3c;
  --color-wizards-orb-950: #002526;
  --color-fennel-fiasco: #00a743;
  --color-fennel-fiasco-50: #e2ffe5;
  --color-fennel-fiasco-100: #c2ffca;
  --color-fennel-fiasco-200: #9af2a8;
  --color-fennel-fiasco-300: #77df8a;
  --color-fennel-fiasco-400: #45c263;
  --color-fennel-fiasco-500: #00a743;
  --color-fennel-fiasco-600: #008734;
  --color-fennel-fiasco-700: #006b28;
  --color-fennel-fiasco-800: #00541e;
  --color-fennel-fiasco-900: #004015;
  --color-fennel-fiasco-950: #00280a;
}