Abyssal Waters to Burning Flame color palette

005961Abyssal Waters 567066Dark Forest 8F8767Wilderness C69C65Lion FFB05DBurning Flame

About this palette

Abyssal Waters to Burning Flame is a 5-color warm, earthy, vintage palette: #005961 (Abyssal Waters), #567066 (Dark Forest), #8F8767 (Wilderness), #C69C65 (Lion), #FFB05D (Burning Flame). It mixes turquoise, gray, yellow, orange tones and feels warm overall. The strongest text pairing is #005961 on #FFB05D with a contrast ratio of 4.47:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Abyssal Waters	rgb(0, 89, 97)	hsl(185, 100%, 19%)
Dark Forest	rgb(86, 112, 102)	hsl(157, 13%, 39%)
Wilderness	rgb(143, 135, 103)	hsl(48, 16%, 48%)
Lion	rgb(198, 156, 101)	hsl(34, 46%, 59%)
Burning Flame	rgb(255, 176, 93)	hsl(31, 100%, 68%)

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.

Aa4.47:1 Poor#005961 on #FFB05D
Aa4.47:1 Poor#FFB05D on #005961
Aa3.21:1 Poor#005961 on #C69C65
Aa3.21:1 Poor#C69C65 on #005961

Color blindness preview

CSS variables

/* Abyssal Waters to Burning Flame — https://swatchly.xyz/palette/005961-567066-8f8767-c69c65-ffb05d */
:root {
  --abyssal-waters: #005961;
  --dark-forest: #567066;
  --wilderness: #8f8767;
  --lion: #c69c65;
  --burning-flame: #ffb05d;
}

Tailwind CSS v4

/* Abyssal Waters to Burning Flame — https://swatchly.xyz/palette/005961-567066-8f8767-c69c65-ffb05d */
@theme {
  --color-abyssal-waters: #005961;
  --color-abyssal-waters-50: #dffcff;
  --color-abyssal-waters-100: #c9f4fa;
  --color-abyssal-waters-200: #ade1e7;
  --color-abyssal-waters-300: #8ecad2;
  --color-abyssal-waters-400: #66aab2;
  --color-abyssal-waters-500: #468d96;
  --color-abyssal-waters-600: #2a7179;
  --color-abyssal-waters-700: #005961;
  --color-abyssal-waters-800: #06454b;
  --color-abyssal-waters-900: #01363b;
  --color-abyssal-waters-950: #002125;
  --color-dark-forest: #567066;
  --color-dark-forest-50: #eaf9f3;
  --color-dark-forest-100: #def0e8;
  --color-dark-forest-200: #c7dcd4;
  --color-dark-forest-300: #aec6bc;
  --color-dark-forest-400: #8ca79c;
  --color-dark-forest-500: #708b81;
  --color-dark-forest-600: #567066;
  --color-dark-forest-700: #425950;
  --color-dark-forest-800: #32463e;
  --color-dark-forest-900: #253630;
  --color-dark-forest-950: #15221d;
  --color-wilderness: #8f8767;
  --color-wilderness-50: #faf6e3;
  --color-wilderness-100: #f1ecd6;
  --color-wilderness-200: #ded8bf;
  --color-wilderness-300: #c9c2a5;
  --color-wilderness-400: #aaa283;
  --color-wilderness-500: #8f8767;
  --color-wilderness-600: #746c4e;
  --color-wilderness-700: #5d563a;
  --color-wilderness-800: #49432a;
  --color-wilderness-900: #38331e;
  --color-wilderness-950: #231f10;
  --color-lion: #c69c65;
  --color-lion-50: #fff4e7;
  --color-lion-100: #ffe9ce;
  --color-lion-200: #f4d4ab;
  --color-lion-300: #e1bd8e;
  --color-lion-400: #c69c65;
  --color-lion-500: #a9804a;
  --color-lion-600: #8c652f;
  --color-lion-700: #724f1b;
  --color-lion-800: #5b3c0c;
  --color-lion-900: #472d04;
  --color-lion-950: #2d1b01;
  --color-burning-flame: #ffb05d;
  --color-burning-flame-50: #fff4eb;
  --color-burning-flame-100: #ffe8d4;
  --color-burning-flame-200: #ffcfa2;
  --color-burning-flame-300: #ffb05d;
  --color-burning-flame-400: #da9141;
  --color-burning-flame-500: #be7412;
  --color-burning-flame-600: #9b5c00;
  --color-burning-flame-700: #7c4800;
  --color-burning-flame-800: #613700;
  --color-burning-flame-900: #4b2a00;
  --color-burning-flame-950: #301900;
}