Medium Roast to Paolo Veronese Green color palette

3B230DMedium Roast 5BB8FAHello Summer 882842Blood Oath FFE3EBSweetly 009E7DPaolo Veronese Green

About this palette

Medium Roast to Paolo Veronese Green is a 5-color vintage palette: #3B230D (Medium Roast), #5BB8FA (Hello Summer), #882842 (Blood Oath), #FFE3EB (Sweetly), #009E7D (Paolo Veronese Green). It mixes brown, blue, red, white, turquoise tones and feels balanced overall. The strongest text pairing is #3B230D on #FFE3EB with a contrast ratio of 12.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Medium Roast	rgb(59, 35, 13)	hsl(29, 64%, 14%)
Hello Summer	rgb(91, 184, 250)	hsl(205, 94%, 67%)
Blood Oath	rgb(136, 40, 66)	hsl(344, 55%, 35%)
Sweetly	rgb(255, 227, 235)	hsl(343, 100%, 95%)
Paolo Veronese Green	rgb(0, 158, 125)	hsl(167, 100%, 31%)

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.

Aa12.18:1 Super#3B230D on #FFE3EB
Aa12.18:1 Super#FFE3EB on #3B230D
Aa7.18:1 Very good#882842 on #FFE3EB
Aa7.18:1 Very good#FFE3EB on #882842
Aa6.76:1 Good#3B230D on #5BB8FA
Aa6.76:1 Good#5BB8FA on #3B230D
Aa4.32:1 Poor#3B230D on #009E7D
Aa4.32:1 Poor#009E7D on #3B230D

Color blindness preview

CSS variables

/* Medium Roast to Paolo Veronese Green — https://swatchly.xyz/palette/3b230d-5bb8fa-882842-ffe3eb-009e7d */
:root {
  --medium-roast: #3b230d;
  --hello-summer: #5bb8fa;
  --blood-oath: #882842;
  --sweetly: #ffe3eb;
  --paolo-veronese-green: #009e7d;
}

Tailwind CSS v4

/* Medium Roast to Paolo Veronese Green — https://swatchly.xyz/palette/3b230d-5bb8fa-882842-ffe3eb-009e7d */
@theme {
  --color-medium-roast: #3b230d;
  --color-medium-roast-50: #fff3e9;
  --color-medium-roast-100: #fbe7d7;
  --color-medium-roast-200: #ead3bf;
  --color-medium-roast-300: #d6bba6;
  --color-medium-roast-400: #b69982;
  --color-medium-roast-500: #997c64;
  --color-medium-roast-600: #7b604a;
  --color-medium-roast-700: #614935;
  --color-medium-roast-800: #493525;
  --color-medium-roast-900: #3b230d;
  --color-medium-roast-950: #20150c;
  --color-hello-summer: #5bb8fa;
  --color-hello-summer-50: #f5fbff;
  --color-hello-summer-100: #e7f4ff;
  --color-hello-summer-200: #c6e6ff;
  --color-hello-summer-300: #9cd4ff;
  --color-hello-summer-400: #5bb8fa;
  --color-hello-summer-500: #3b99d8;
  --color-hello-summer-600: #0d7bb9;
  --color-hello-summer-700: #006194;
  --color-hello-summer-800: #004b74;
  --color-hello-summer-900: #003859;
  --color-hello-summer-950: #002238;
  --color-blood-oath: #882842;
  --color-blood-oath-50: #fff1f3;
  --color-blood-oath-100: #ffe3e7;
  --color-blood-oath-200: #ffc5ce;
  --color-blood-oath-300: #fea0b1;
  --color-blood-oath-400: #e07b8f;
  --color-blood-oath-500: #c35d73;
  --color-blood-oath-600: #a24359;
  --color-blood-oath-700: #882842;
  --color-blood-oath-800: #6a2033;
  --color-blood-oath-900: #541526;
  --color-blood-oath-950: #370a16;
  --color-sweetly: #ffe3eb;
  --color-sweetly-50: #fff1f5;
  --color-sweetly-100: #ffe3eb;
  --color-sweetly-200: #e6d2d7;
  --color-sweetly-300: #d1bac1;
  --color-sweetly-400: #b39aa1;
  --color-sweetly-500: #977f86;
  --color-sweetly-600: #7c646b;
  --color-sweetly-700: #644f55;
  --color-sweetly-800: #4f3d42;
  --color-sweetly-900: #3d2e33;
  --color-sweetly-950: #271c1f;
  --color-paolo-veronese-green: #009e7d;
  --color-paolo-veronese-green-50: #dafff1;
  --color-paolo-veronese-green-100: #b9fce5;
  --color-paolo-veronese-green-200: #99ecd0;
  --color-paolo-veronese-green-300: #75d7b8;
  --color-paolo-veronese-green-400: #43ba98;
  --color-paolo-veronese-green-500: #009e7d;
  --color-paolo-veronese-green-600: #007f64;
  --color-paolo-veronese-green-700: #00654f;
  --color-paolo-veronese-green-800: #004f3d;
  --color-paolo-veronese-green-900: #003d2f;
  --color-paolo-veronese-green-950: #00261c;
}