Brandy Bear to Flash in the Pan Color Palette

About this palette

Brandy Bear to Flash in the Pan is a 4-color vibrant, warm palette: #AC5500 (Brandy Bear), #5C84FF (Skinny Jeans), #FF8122 (Oriole), #FF9474 (Flash in the Pan). It mixes brown, blue, orange, red tones and feels warm overall. The strongest text pairing is #AC5500 on #FF9474 with a contrast ratio of 2.40:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brandy Bear	rgb(172, 85, 0)	hsl(30, 100%, 34%)
Skinny Jeans	rgb(92, 132, 255)	hsl(225, 100%, 68%)
Oriole	rgb(255, 129, 34)	hsl(26, 100%, 57%)
Flash in the Pan	rgb(255, 148, 116)	hsl(14, 100%, 73%)

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

/* Brandy Bear to Flash in the Pan — https://swatchly.xyz/palette/ac5500-5c84ff-ff8122-ff9474 */
:root {
  --brandy-bear: #ac5500;
  --skinny-jeans: #5c84ff;
  --oriole: #ff8122;
  --flash-in-the-pan: #ff9474;
}

Tailwind CSS v4

/* Brandy Bear to Flash in the Pan — https://swatchly.xyz/palette/ac5500-5c84ff-ff8122-ff9474 */
@theme {
  --color-brandy-bear: #ac5500;
  --color-brandy-bear-50: #fff2eb;
  --color-brandy-bear-100: #ffe7d8;
  --color-brandy-bear-200: #ffcdaf;
  --color-brandy-bear-300: #ffae7a;
  --color-brandy-bear-400: #e48c50;
  --color-brandy-bear-500: #c9702d;
  --color-brandy-bear-600: #ac5500;
  --color-brandy-bear-700: #8a4300;
  --color-brandy-bear-800: #6c3300;
  --color-brandy-bear-900: #542600;
  --color-brandy-bear-950: #371600;
  --color-skinny-jeans: #5c84ff;
  --color-skinny-jeans-50: #f3f7ff;
  --color-skinny-jeans-100: #e7eeff;
  --color-skinny-jeans-200: #cddcff;
  --color-skinny-jeans-300: #aec5ff;
  --color-skinny-jeans-400: #82a4ff;
  --color-skinny-jeans-500: #5c84ff;
  --color-skinny-jeans-600: #4366dd;
  --color-skinny-jeans-700: #2f4dbb;
  --color-skinny-jeans-800: #21399b;
  --color-skinny-jeans-900: #16297c;
  --color-skinny-jeans-950: #0a1753;
  --color-oriole: #ff8122;
  --color-oriole-50: #fff6f1;
  --color-oriole-100: #ffebdf;
  --color-oriole-200: #ffd2b9;
  --color-oriole-300: #ffb488;
  --color-oriole-400: #ff8122;
  --color-oriole-500: #d96700;
  --color-oriole-600: #af5200;
  --color-oriole-700: #8b4000;
  --color-oriole-800: #6d3100;
  --color-oriole-900: #552400;
  --color-oriole-950: #361400;
  --color-flash-in-the-pan: #ff9474;
  --color-flash-in-the-pan-50: #ffeae3;
  --color-flash-in-the-pan-100: #ffd9ce;
  --color-flash-in-the-pan-200: #ffbba6;
  --color-flash-in-the-pan-300: #ff9474;
  --color-flash-in-the-pan-400: #dd7859;
  --color-flash-in-the-pan-500: #c25d3f;
  --color-flash-in-the-pan-600: #a44528;
  --color-flash-in-the-pan-700: #893216;
  --color-flash-in-the-pan-800: #70240a;
  --color-flash-in-the-pan-900: #5b1903;
  --color-flash-in-the-pan-950: #3c0c00;
}