Brown to Burning Flame color palette

6C3500Brown 84B3D1Crystal Lake 16A2E3Homeworld 4B2700Evil Cigar 0E79ACJacuzzi FDB466Burning Flame

Open in generator Export PNG, PDF, ASE…

About this palette

Brown to Burning Flame is a 6-color palette: #6C3500 (Brown), #84B3D1 (Crystal Lake), #16A2E3 (Homeworld), #4B2700 (Evil Cigar), #0E79AC (Jacuzzi), #FDB466 (Burning Flame). It mixes brown, blue, orange tones and feels balanced overall. The strongest text pairing is #4B2700 on #FDB466 with a contrast ratio of 7.49:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(108, 53, 0)	hsl(29, 100%, 21%)
Crystal Lake	rgb(132, 179, 209)	hsl(203, 46%, 67%)
Homeworld	rgb(22, 162, 227)	hsl(199, 82%, 49%)
Evil Cigar	rgb(75, 39, 0)	hsl(31, 100%, 15%)
Jacuzzi	rgb(14, 121, 172)	hsl(199, 85%, 36%)
Burning Flame	rgb(253, 180, 102)	hsl(31, 97%, 70%)

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.

Aa7.49:1 Very good#4B2700 on #FDB466
Aa7.49:1 Very good#FDB466 on #4B2700
Aa5.88:1 Good#84B3D1 on #4B2700
Aa5.88:1 Good#4B2700 on #84B3D1
Aa5.54:1 Good#6C3500 on #FDB466
Aa5.54:1 Good#FDB466 on #6C3500
Aa4.60:1 Good#16A2E3 on #4B2700
Aa4.60:1 Good#4B2700 on #16A2E3

Color blindness preview

CSS variables

/* Brown to Burning Flame — https://swatchly.xyz/palette/6c3500-84b3d1-16a2e3-4b2700-0e79ac-fdb466 */
:root {
  --brown: #6c3500;
  --crystal-lake: #84b3d1;
  --homeworld: #16a2e3;
  --evil-cigar: #4b2700;
  --jacuzzi: #0e79ac;
  --burning-flame: #fdb466;
}

Tailwind CSS v4

/* Brown to Burning Flame — https://swatchly.xyz/palette/6c3500-84b3d1-16a2e3-4b2700-0e79ac-fdb466 */
@theme {
  --color-brown: #6c3500;
  --color-brown-50: #fff2ea;
  --color-brown-100: #ffe6d5;
  --color-brown-200: #fdccab;
  --color-brown-300: #ecb48e;
  --color-brown-400: #d09369;
  --color-brown-500: #b5784c;
  --color-brown-600: #995e33;
  --color-brown-700: #7e4920;
  --color-brown-800: #6c3500;
  --color-brown-900: #522a08;
  --color-brown-950: #361902;
  --color-crystal-lake: #84b3d1;
  --color-crystal-lake-50: #f3faff;
  --color-crystal-lake-100: #e3f4ff;
  --color-crystal-lake-200: #c3e4fa;
  --color-crystal-lake-300: #aad0e9;
  --color-crystal-lake-400: #84b3d1;
  --color-crystal-lake-500: #6795b2;
  --color-crystal-lake-600: #4b7894;
  --color-crystal-lake-700: #365f79;
  --color-crystal-lake-800: #254a60;
  --color-crystal-lake-900: #18384b;
  --color-crystal-lake-950: #0b222f;
  --color-homeworld: #16a2e3;
  --color-homeworld-50: #e4f4ff;
  --color-homeworld-100: #ccebff;
  --color-homeworld-200: #9dd9ff;
  --color-homeworld-300: #5dc3ff;
  --color-homeworld-400: #16a2e3;
  --color-homeworld-500: #0087c0;
  --color-homeworld-600: #006d9c;
  --color-homeworld-700: #00577d;
  --color-homeworld-800: #004564;
  --color-homeworld-900: #003650;
  --color-homeworld-950: #002235;
  --color-evil-cigar: #4b2700;
  --color-evil-cigar-50: #fff3e9;
  --color-evil-cigar-100: #ffe6d2;
  --color-evil-cigar-200: #f3d0b4;
  --color-evil-cigar-300: #dfb899;
  --color-evil-cigar-400: #c29874;
  --color-evil-cigar-500: #a67c58;
  --color-evil-cigar-600: #89613f;
  --color-evil-cigar-700: #6f4b2b;
  --color-evil-cigar-800: #58391d;
  --color-evil-cigar-900: #4b2700;
  --color-evil-cigar-950: #2c1908;
  --color-jacuzzi: #0e79ac;
  --color-jacuzzi-50: #ecf7ff;
  --color-jacuzzi-100: #daf0ff;
  --color-jacuzzi-200: #b2e0ff;
  --color-jacuzzi-300: #84cdfc;
  --color-jacuzzi-400: #5aafe2;
  --color-jacuzzi-500: #3794c8;
  --color-jacuzzi-600: #0e79ac;
  --color-jacuzzi-700: #00608b;
  --color-jacuzzi-800: #004b6e;
  --color-jacuzzi-900: #003955;
  --color-jacuzzi-950: #002437;
  --color-burning-flame: #fdb466;
  --color-burning-flame-50: #fff6ed;
  --color-burning-flame-100: #ffead6;
  --color-burning-flame-200: #ffd2a5;
  --color-burning-flame-300: #fdb466;
  --color-burning-flame-400: #d8954b;
  --color-burning-flame-500: #bc7723;
  --color-burning-flame-600: #9b5d00;
  --color-burning-flame-700: #7c4900;
  --color-burning-flame-800: #613800;
  --color-burning-flame-900: #4b2a00;
  --color-burning-flame-950: #301900;
}