Queen of Trees to Fail Whale color palette

243F1DQueen of Trees 905332Ancient Chest 9E83A2Hatoba Pigeon 80AFCAOpen Seas 98D2F2Fail Whale

About this palette

Queen of Trees to Fail Whale is a 5-color cool palette: #243F1D (Queen of Trees), #905332 (Ancient Chest), #9E83A2 (Hatoba Pigeon), #80AFCA (Open Seas), #98D2F2 (Fail Whale). It mixes green, brown, purple, blue tones and feels cool overall. The strongest text pairing is #243F1D on #98D2F2 with a contrast ratio of 7.12:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queen of Trees	rgb(36, 63, 29)	hsl(108, 37%, 18%)
Ancient Chest	rgb(144, 83, 50)	hsl(21, 48%, 38%)
Hatoba Pigeon	rgb(158, 131, 162)	hsl(292, 14%, 57%)
Open Seas	rgb(128, 175, 202)	hsl(202, 41%, 65%)
Fail Whale	rgb(152, 210, 242)	hsl(201, 78%, 77%)

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.12:1 Very good#243F1D on #98D2F2
Aa7.12:1 Very good#98D2F2 on #243F1D
Aa4.94:1 Good#243F1D on #80AFCA
Aa4.94:1 Good#80AFCA on #243F1D
Aa3.70:1 Poor#905332 on #98D2F2
Aa3.70:1 Poor#98D2F2 on #905332
Aa3.45:1 Poor#243F1D on #9E83A2
Aa3.45:1 Poor#9E83A2 on #243F1D

Color blindness preview

CSS variables

/* Queen of Trees to Fail Whale — https://swatchly.xyz/palette/243f1d-905332-9e83a2-80afca-98d2f2 */
:root {
  --queen-of-trees: #243f1d;
  --ancient-chest: #905332;
  --hatoba-pigeon: #9e83a2;
  --open-seas: #80afca;
  --fail-whale: #98d2f2;
}

Tailwind CSS v4

/* Queen of Trees to Fail Whale — https://swatchly.xyz/palette/243f1d-905332-9e83a2-80afca-98d2f2 */
@theme {
  --color-queen-of-trees: #243f1d;
  --color-queen-of-trees-50: #e9fce5;
  --color-queen-of-trees-100: #def2d9;
  --color-queen-of-trees-200: #c8e0c1;
  --color-queen-of-trees-300: #afcaa8;
  --color-queen-of-trees-400: #8eac87;
  --color-queen-of-trees-500: #73926c;
  --color-queen-of-trees-600: #5a7853;
  --color-queen-of-trees-700: #46613f;
  --color-queen-of-trees-800: #364d30;
  --color-queen-of-trees-900: #243f1d;
  --color-queen-of-trees-950: #182714;
  --color-ancient-chest: #905332;
  --color-ancient-chest-50: #fff2ec;
  --color-ancient-chest-100: #ffe3d6;
  --color-ancient-chest-200: #fdc8ad;
  --color-ancient-chest-300: #e9ae8f;
  --color-ancient-chest-400: #cb8b6a;
  --color-ancient-chest-500: #ae6e4d;
  --color-ancient-chest-600: #905332;
  --color-ancient-chest-700: #754023;
  --color-ancient-chest-800: #5e3016;
  --color-ancient-chest-900: #4b240d;
  --color-ancient-chest-950: #301505;
  --color-hatoba-pigeon: #9e83a2;
  --color-hatoba-pigeon-50: #fdf2ff;
  --color-hatoba-pigeon-100: #f9e7fb;
  --color-hatoba-pigeon-200: #e8d3eb;
  --color-hatoba-pigeon-300: #d5bdd8;
  --color-hatoba-pigeon-400: #b89ebc;
  --color-hatoba-pigeon-500: #9e83a2;
  --color-hatoba-pigeon-600: #816785;
  --color-hatoba-pigeon-700: #68506b;
  --color-hatoba-pigeon-800: #523d55;
  --color-hatoba-pigeon-900: #3f2e42;
  --color-hatoba-pigeon-950: #271b29;
  --color-open-seas: #80afca;
  --color-open-seas-50: #eff9ff;
  --color-open-seas-100: #ddf2ff;
  --color-open-seas-200: #bfe2f6;
  --color-open-seas-300: #a5cde4;
  --color-open-seas-400: #80afca;
  --color-open-seas-500: #6492ac;
  --color-open-seas-600: #49768f;
  --color-open-seas-700: #345e74;
  --color-open-seas-800: #24495d;
  --color-open-seas-900: #183848;
  --color-open-seas-950: #0b222e;
  --color-fail-whale: #98d2f2;
  --color-fail-whale-50: #f3fbff;
  --color-fail-whale-100: #e1f4ff;
  --color-fail-whale-200: #bde5fc;
  --color-fail-whale-300: #98d2f2;
  --color-fail-whale-400: #7bb0cd;
  --color-fail-whale-500: #5b93b1;
  --color-fail-whale-600: #3f7793;
  --color-fail-whale-700: #2a5e78;
  --color-fail-whale-800: #1a4960;
  --color-fail-whale-900: #0f374a;
  --color-fail-whale-950: #062230;
}