Lonestar to Poseidon Jr. color palette

501E20Lonestar 2A5126Moor-Monster A95BB1Prickly Purple 7CBB7FFrog Pond 6AE7FBPoseidon Jr.

About this palette

Lonestar to Poseidon Jr. is a 5-color cool, earthy palette: #501E20 (Lonestar), #2A5126 (Moor-Monster), #A95BB1 (Prickly Purple), #7CBB7F (Frog Pond), #6AE7FB (Poseidon Jr.). It mixes brown, green, pink, turquoise tones and feels cool overall. The strongest text pairing is #501E20 on #6AE7FB with a contrast ratio of 9.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(80, 30, 32)	hsl(358, 45%, 22%)
Moor-Monster	rgb(42, 81, 38)	hsl(114, 36%, 23%)
Prickly Purple	rgb(169, 91, 177)	hsl(294, 36%, 53%)
Frog Pond	rgb(124, 187, 127)	hsl(123, 32%, 61%)
Poseidon Jr.	rgb(106, 231, 251)	hsl(188, 95%, 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.

Aa9.33:1 Very good#501E20 on #6AE7FB
Aa9.33:1 Very good#6AE7FB on #501E20
Aa6.27:1 Good#2A5126 on #6AE7FB
Aa6.27:1 Good#6AE7FB on #2A5126
Aa5.99:1 Good#501E20 on #7CBB7F
Aa5.99:1 Good#7CBB7F on #501E20
Aa4.03:1 Poor#2A5126 on #7CBB7F
Aa4.03:1 Poor#7CBB7F on #2A5126

Color blindness preview

CSS variables

/* Lonestar to Poseidon Jr. — https://swatchly.xyz/palette/501e20-2a5126-a95bb1-7cbb7f-6ae7fb */
:root {
  --lonestar: #501e20;
  --moor-monster: #2a5126;
  --prickly-purple: #a95bb1;
  --frog-pond: #7cbb7f;
  --poseidon-jr: #6ae7fb;
}

Tailwind CSS v4

/* Lonestar to Poseidon Jr. — https://swatchly.xyz/palette/501e20-2a5126-a95bb1-7cbb7f-6ae7fb */
@theme {
  --color-lonestar: #501e20;
  --color-lonestar-50: #fff1f1;
  --color-lonestar-100: #ffe4e3;
  --color-lonestar-200: #fbcac8;
  --color-lonestar-300: #e8b1b0;
  --color-lonestar-400: #ca8f8e;
  --color-lonestar-500: #ae7372;
  --color-lonestar-600: #905958;
  --color-lonestar-700: #754343;
  --color-lonestar-800: #5d3232;
  --color-lonestar-900: #501e20;
  --color-lonestar-950: #2e1515;
  --color-moor-monster: #2a5126;
  --color-moor-monster-50: #e5fde1;
  --color-moor-monster-100: #d9f4d5;
  --color-moor-monster-200: #c1e2bd;
  --color-moor-monster-300: #a9cea4;
  --color-moor-monster-400: #87b082;
  --color-moor-monster-500: #6c9567;
  --color-moor-monster-600: #537b4e;
  --color-moor-monster-700: #3f633a;
  --color-moor-monster-800: #2a5126;
  --color-moor-monster-900: #223e1f;
  --color-moor-monster-950: #132711;
  --color-prickly-purple: #a95bb1;
  --color-prickly-purple-50: #feeeff;
  --color-prickly-purple-100: #fcdcff;
  --color-prickly-purple-200: #f9b9ff;
  --color-prickly-purple-300: #e59dec;
  --color-prickly-purple-400: #c779ce;
  --color-prickly-purple-500: #a95bb1;
  --color-prickly-purple-600: #8d4395;
  --color-prickly-purple-700: #73307a;
  --color-prickly-purple-800: #5d2163;
  --color-prickly-purple-900: #4a174f;
  --color-prickly-purple-950: #300b34;
  --color-frog-pond: #7cbb7f;
  --color-frog-pond-50: #e9ffe9;
  --color-frog-pond-100: #d5fbd6;
  --color-frog-pond-200: #bdebbe;
  --color-frog-pond-300: #a3d7a4;
  --color-frog-pond-400: #7cbb7f;
  --color-frog-pond-500: #609d63;
  --color-frog-pond-600: #448048;
  --color-frog-pond-700: #2f6734;
  --color-frog-pond-800: #1e5124;
  --color-frog-pond-900: #133e18;
  --color-frog-pond-950: #08270b;
  --color-poseidon-jr: #6ae7fb;
  --color-poseidon-jr-50: #d7f9ff;
  --color-poseidon-jr-100: #b3f4ff;
  --color-poseidon-jr-200: #6ae7fb;
  --color-poseidon-jr-300: #66cedf;
  --color-poseidon-jr-400: #2fb1c3;
  --color-poseidon-jr-500: #0095a6;
  --color-poseidon-jr-600: #007887;
  --color-poseidon-jr-700: #00606c;
  --color-poseidon-jr-800: #004c55;
  --color-poseidon-jr-900: #003a42;
  --color-poseidon-jr-950: #00242a;
}