Beau Vert to Dream Vapour color palette

00616BBeau Vert 41858DTurkish Jade F5D29FGranola 3D1E42Purple Void D19AE8Dream Vapour

About this palette

Beau Vert to Dream Vapour is a 5-color cool palette: #00616B (Beau Vert), #41858D (Turkish Jade), #F5D29F (Granola), #3D1E42 (Purple Void), #D19AE8 (Dream Vapour). It mixes turquoise, yellow, purple tones and feels cool overall. The strongest text pairing is #F5D29F on #3D1E42 with a contrast ratio of 9.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beau Vert	rgb(0, 97, 107)	hsl(186, 100%, 21%)
Turkish Jade	rgb(65, 133, 141)	hsl(186, 37%, 40%)
Granola	rgb(245, 210, 159)	hsl(36, 81%, 79%)
Purple Void	rgb(61, 30, 66)	hsl(292, 38%, 19%)
Dream Vapour	rgb(209, 154, 232)	hsl(282, 63%, 76%)

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.98:1 Very good#F5D29F on #3D1E42
Aa9.98:1 Very good#3D1E42 on #F5D29F
Aa6.49:1 Good#3D1E42 on #D19AE8
Aa6.49:1 Good#D19AE8 on #3D1E42
Aa5.00:1 Good#00616B on #F5D29F
Aa5.00:1 Good#F5D29F on #00616B
Aa3.39:1 Poor#41858D on #3D1E42
Aa3.39:1 Poor#3D1E42 on #41858D

Color blindness preview

CSS variables

/* Beau Vert to Dream Vapour — https://swatchly.xyz/palette/00616b-41858d-f5d29f-3d1e42-d19ae8 */
:root {
  --beau-vert: #00616b;
  --turkish-jade: #41858d;
  --granola: #f5d29f;
  --purple-void: #3d1e42;
  --dream-vapour: #d19ae8;
}

Tailwind CSS v4

/* Beau Vert to Dream Vapour — https://swatchly.xyz/palette/00616b-41858d-f5d29f-3d1e42-d19ae8 */
@theme {
  --color-beau-vert: #00616b;
  --color-beau-vert-50: #e0fbff;
  --color-beau-vert-100: #c7f5fb;
  --color-beau-vert-200: #ace3eb;
  --color-beau-vert-300: #8eced7;
  --color-beau-vert-400: #66afb9;
  --color-beau-vert-500: #46939e;
  --color-beau-vert-600: #2a7882;
  --color-beau-vert-700: #00616b;
  --color-beau-vert-800: #014c54;
  --color-beau-vert-900: #003a41;
  --color-beau-vert-950: #002529;
  --color-turkish-jade: #41858d;
  --color-turkish-jade-50: #d7fbff;
  --color-turkish-jade-100: #c4f0f5;
  --color-turkish-jade-200: #a7dbe2;
  --color-turkish-jade-300: #88c3cb;
  --color-turkish-jade-400: #60a3ab;
  --color-turkish-jade-500: #41858d;
  --color-turkish-jade-600: #2a6c74;
  --color-turkish-jade-700: #18575e;
  --color-turkish-jade-800: #0b454b;
  --color-turkish-jade-900: #04363b;
  --color-turkish-jade-950: #012326;
  --color-granola: #f5d29f;
  --color-granola-50: #fff4e4;
  --color-granola-100: #fee8c9;
  --color-granola-200: #f5d29f;
  --color-granola-300: #dabc92;
  --color-granola-400: #bc9c6d;
  --color-granola-500: #a18050;
  --color-granola-600: #856637;
  --color-granola-700: #6c5024;
  --color-granola-800: #563d16;
  --color-granola-900: #432f0c;
  --color-granola-950: #2b1c04;
  --color-purple-void: #3d1e42;
  --color-purple-void-50: #fdf0ff;
  --color-purple-void-100: #fae2fe;
  --color-purple-void-200: #e9ccee;
  --color-purple-void-300: #d5b4da;
  --color-purple-void-400: #b692bb;
  --color-purple-void-500: #99759e;
  --color-purple-void-600: #7c5a81;
  --color-purple-void-700: #624467;
  --color-purple-void-800: #4b324f;
  --color-purple-void-900: #3d1e42;
  --color-purple-void-950: #221425;
  --color-dream-vapour: #d19ae8;
  --color-dream-vapour-50: #f8e7ff;
  --color-dream-vapour-100: #f2d5ff;
  --color-dream-vapour-200: #e5b8f8;
  --color-dream-vapour-300: #d19ae8;
  --color-dream-vapour-400: #b37ec9;
  --color-dream-vapour-500: #9965af;
  --color-dream-vapour-600: #7f4e93;
  --color-dream-vapour-700: #683b7a;
  --color-dream-vapour-800: #552d64;
  --color-dream-vapour-900: #442152;
  --color-dream-vapour-950: #2c1335;
}