Fabric of Space to Greenivorous color palette

2E1455Fabric of Space 8D0E1EBarbera 607400Topiary Green E2594EBlossoming Dynasty 00C8CDSea Serpent CDE140Greenivorous

Open in generator Export PNG, PDF, ASE…

About this palette

Fabric of Space to Greenivorous is a 6-color vibrant, cool palette: #2E1455 (Fabric of Space), #8D0E1E (Barbera), #607400 (Topiary Green), #E2594E (Blossoming Dynasty), #00C8CD (Sea Serpent), #CDE140 (Greenivorous). It mixes purple, red, green, turquoise tones and feels cool overall. The strongest text pairing is #2E1455 on #CDE140 with a contrast ratio of 10.72:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fabric of Space	rgb(46, 20, 85)	hsl(264, 62%, 21%)
Barbera	rgb(141, 14, 30)	hsl(352, 82%, 30%)
Topiary Green	rgb(96, 116, 0)	hsl(70, 100%, 23%)
Blossoming Dynasty	rgb(226, 89, 78)	hsl(4, 72%, 60%)
Sea Serpent	rgb(0, 200, 205)	hsl(181, 100%, 40%)
Greenivorous	rgb(205, 225, 64)	hsl(67, 73%, 57%)

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.

Aa10.72:1 Very good#2E1455 on #CDE140
Aa10.72:1 Very good#CDE140 on #2E1455
Aa7.53:1 Very good#2E1455 on #00C8CD
Aa7.53:1 Very good#00C8CD on #2E1455
Aa6.52:1 Good#8D0E1E on #CDE140
Aa6.52:1 Good#CDE140 on #8D0E1E
Aa4.58:1 Good#8D0E1E on #00C8CD
Aa4.58:1 Good#00C8CD on #8D0E1E

Color blindness preview

CSS variables

/* Fabric of Space to Greenivorous — https://swatchly.xyz/palette/2e1455-8d0e1e-607400-e2594e-00c8cd-cde140 */
:root {
  --fabric-of-space: #2e1455;
  --barbera: #8d0e1e;
  --topiary-green: #607400;
  --blossoming-dynasty: #e2594e;
  --sea-serpent: #00c8cd;
  --greenivorous: #cde140;
}

Tailwind CSS v4

/* Fabric of Space to Greenivorous — https://swatchly.xyz/palette/2e1455-8d0e1e-607400-e2594e-00c8cd-cde140 */
@theme {
  --color-fabric-of-space: #2e1455;
  --color-fabric-of-space-50: #f6f3ff;
  --color-fabric-of-space-100: #ede7ff;
  --color-fabric-of-space-200: #dbcfff;
  --color-fabric-of-space-300: #c7b5f7;
  --color-fabric-of-space-400: #a893dc;
  --color-fabric-of-space-500: #8e79c2;
  --color-fabric-of-space-600: #7560a6;
  --color-fabric-of-space-700: #604c8c;
  --color-fabric-of-space-800: #4e3b75;
  --color-fabric-of-space-900: #3f2e61;
  --color-fabric-of-space-950: #2e1455;
  --color-barbera: #8d0e1e;
  --color-barbera-50: #fff2f0;
  --color-barbera-100: #ffe4e2;
  --color-barbera-200: #ffc8c4;
  --color-barbera-300: #ffa8a3;
  --color-barbera-400: #f47b78;
  --color-barbera-500: #da5d5d;
  --color-barbera-600: #bc4345;
  --color-barbera-700: #a02e32;
  --color-barbera-800: #8d0e1e;
  --color-barbera-900: #6c1118;
  --color-barbera-950: #49050c;
  --color-topiary-green: #607400;
  --color-topiary-green-50: #eefdc9;
  --color-topiary-green-100: #e3f4b9;
  --color-topiary-green-200: #cee19b;
  --color-topiary-green-300: #b6cb7a;
  --color-topiary-green-400: #95ab50;
  --color-topiary-green-500: #7a8f2d;
  --color-topiary-green-600: #607400;
  --color-topiary-green-700: #4c5c00;
  --color-topiary-green-800: #3b4800;
  --color-topiary-green-900: #2d3700;
  --color-topiary-green-950: #1b2200;
  --color-blossoming-dynasty: #e2594e;
  --color-blossoming-dynasty-50: #fff3f1;
  --color-blossoming-dynasty-100: #ffe7e4;
  --color-blossoming-dynasty-200: #ffcdc6;
  --color-blossoming-dynasty-300: #ffada2;
  --color-blossoming-dynasty-400: #fd796c;
  --color-blossoming-dynasty-500: #e2594e;
  --color-blossoming-dynasty-600: #c03b33;
  --color-blossoming-dynasty-700: #a0231f;
  --color-blossoming-dynasty-800: #821010;
  --color-blossoming-dynasty-900: #680306;
  --color-blossoming-dynasty-950: #440002;
  --color-sea-serpent: #00c8cd;
  --color-sea-serpent-50: #ecffff;
  --color-sea-serpent-100: #ccfeff;
  --color-sea-serpent-200: #98f4f6;
  --color-sea-serpent-300: #72e2e5;
  --color-sea-serpent-400: #00c8cd;
  --color-sea-serpent-500: #00a6aa;
  --color-sea-serpent-600: #008589;
  --color-sea-serpent-700: #00696c;
  --color-sea-serpent-800: #005153;
  --color-sea-serpent-900: #003d3f;
  --color-sea-serpent-950: #002526;
  --color-greenivorous: #cde140;
  --color-greenivorous-50: #eefcad;
  --color-greenivorous-100: #e3f298;
  --color-greenivorous-200: #cde140;
  --color-greenivorous-300: #b8c946;
  --color-greenivorous-400: #9aaa00;
  --color-greenivorous-500: #808e00;
  --color-greenivorous-600: #677200;
  --color-greenivorous-700: #525b00;
  --color-greenivorous-800: #404800;
  --color-greenivorous-900: #313700;
  --color-greenivorous-950: #1e2200;
}