Queen of Trees to Bubbles color palette

2D3B1AQueen of Trees 674198Poppy Pompadour 798517Olive 00B8D3Aquarius FFAF93Discreet Orange E5FCFFBubbles

Open in generator Export PNG, PDF, ASE…

About this palette

Queen of Trees to Bubbles is a 6-color cool palette: #2D3B1A (Queen of Trees), #674198 (Poppy Pompadour), #798517 (Olive), #00B8D3 (Aquarius), #FFAF93 (Discreet Orange), #E5FCFF (Bubbles). It mixes green, purple, turquoise, orange, white tones and feels cool overall. The strongest text pairing is #2D3B1A on #E5FCFF with a contrast ratio of 11.24:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queen of Trees	rgb(45, 59, 26)	hsl(85, 39%, 17%)
Poppy Pompadour	rgb(103, 65, 152)	hsl(266, 40%, 43%)
Olive	rgb(121, 133, 23)	hsl(67, 71%, 31%)
Aquarius	rgb(0, 184, 211)	hsl(188, 100%, 41%)
Discreet Orange	rgb(255, 175, 147)	hsl(16, 100%, 79%)
Bubbles	rgb(229, 252, 255)	hsl(187, 100%, 95%)

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.

Aa11.24:1 Very good#2D3B1A on #E5FCFF
Aa11.24:1 Very good#E5FCFF on #2D3B1A
Aa7.07:1 Very good#674198 on #E5FCFF
Aa7.07:1 Very good#E5FCFF on #674198
Aa6.74:1 Good#2D3B1A on #FFAF93
Aa6.74:1 Good#FFAF93 on #2D3B1A
Aa5.02:1 Good#2D3B1A on #00B8D3
Aa5.02:1 Good#00B8D3 on #2D3B1A

Color blindness preview

CSS variables

/* Queen of Trees to Bubbles — https://swatchly.xyz/palette/2d3b1a-674198-798517-00b8d3-ffaf93-e5fcff */
:root {
  --queen-of-trees: #2d3b1a;
  --poppy-pompadour: #674198;
  --olive: #798517;
  --aquarius: #00b8d3;
  --discreet-orange: #ffaf93;
  --bubbles: #e5fcff;
}

Tailwind CSS v4

/* Queen of Trees to Bubbles — https://swatchly.xyz/palette/2d3b1a-674198-798517-00b8d3-ffaf93-e5fcff */
@theme {
  --color-queen-of-trees: #2d3b1a;
  --color-queen-of-trees-50: #effae4;
  --color-queen-of-trees-100: #e4f0d8;
  --color-queen-of-trees-200: #cfddc0;
  --color-queen-of-trees-300: #b8c7a6;
  --color-queen-of-trees-400: #98a985;
  --color-queen-of-trees-500: #7d8e6a;
  --color-queen-of-trees-600: #647451;
  --color-queen-of-trees-700: #4f5d3d;
  --color-queen-of-trees-800: #3d4a2e;
  --color-queen-of-trees-900: #2d3b1a;
  --color-queen-of-trees-950: #1d2413;
  --color-poppy-pompadour: #674198;
  --color-poppy-pompadour-50: #f7f3ff;
  --color-poppy-pompadour-100: #efe6ff;
  --color-poppy-pompadour-200: #e0ceff;
  --color-poppy-pompadour-300: #cfb1ff;
  --color-poppy-pompadour-400: #b28ee8;
  --color-poppy-pompadour-500: #9872ce;
  --color-poppy-pompadour-600: #7d58b0;
  --color-poppy-pompadour-700: #674198;
  --color-poppy-pompadour-800: #513279;
  --color-poppy-pompadour-900: #3f2461;
  --color-poppy-pompadour-950: #281440;
  --color-olive: #798517;
  --color-olive-50: #f0fac4;
  --color-olive-100: #e4efb1;
  --color-olive-200: #cedb90;
  --color-olive-300: #b6c36d;
  --color-olive-400: #95a240;
  --color-olive-500: #798517;
  --color-olive-600: #616b00;
  --color-olive-700: #4d5500;
  --color-olive-800: #3c4300;
  --color-olive-900: #2e3400;
  --color-olive-950: #1d2100;
  --color-aquarius: #00b8d3;
  --color-aquarius-50: #e6faff;
  --color-aquarius-100: #cbf5ff;
  --color-aquarius-200: #8eeafe;
  --color-aquarius-300: #66d5ec;
  --color-aquarius-400: #00b8d3;
  --color-aquarius-500: #0099b0;
  --color-aquarius-600: #007b8e;
  --color-aquarius-700: #006271;
  --color-aquarius-800: #004c58;
  --color-aquarius-900: #003a44;
  --color-aquarius-950: #00242b;
  --color-discreet-orange: #ffaf93;
  --color-discreet-orange-50: #fff5f2;
  --color-discreet-orange-100: #ffe9e1;
  --color-discreet-orange-200: #ffcfbe;
  --color-discreet-orange-300: #ffaf93;
  --color-discreet-orange-400: #da9076;
  --color-discreet-orange-500: #bd7359;
  --color-discreet-orange-600: #9f583f;
  --color-discreet-orange-700: #82422b;
  --color-discreet-orange-800: #68311c;
  --color-discreet-orange-900: #522312;
  --color-discreet-orange-950: #361408;
  --color-bubbles: #e5fcff;
  --color-bubbles-50: #e5fcff;
  --color-bubbles-100: #e2f0f1;
  --color-bubbles-200: #ccdcde;
  --color-bubbles-300: #b3c6c8;
  --color-bubbles-400: #92a7a9;
  --color-bubbles-500: #768b8e;
  --color-bubbles-600: #5c7073;
  --color-bubbles-700: #47595b;
  --color-bubbles-800: #364648;
  --color-bubbles-900: #283637;
  --color-bubbles-950: #182122;
}