Pine to Mykonos Color Palette

About this palette

Pine to Mykonos is a 6-color cool palette: #295D23 (Pine), #830021 (Oxblood), #327FFF (Azure), #FFCBCF (Love Fumes), #86C171 (Dollar Bill), #487CB9 (Mykonos). It mixes green, red, blue, pink tones and feels cool overall. The strongest text pairing is #830021 on #FFCBCF with a contrast ratio of 7.40:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine	rgb(41, 93, 35)	hsl(114, 45%, 25%)
Oxblood	rgb(131, 0, 33)	hsl(345, 100%, 26%)
Azure	rgb(50, 127, 255)	hsl(217, 100%, 60%)
Love Fumes	rgb(255, 203, 207)	hsl(355, 100%, 90%)
Dollar Bill	rgb(134, 193, 113)	hsl(104, 39%, 60%)
Mykonos	rgb(72, 124, 185)	hsl(212, 45%, 50%)

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.

Aa7.40:1 Very good#830021 on #FFCBCF
Aa7.40:1 Very good#FFCBCF on #830021
Aa5.47:1 Good#295D23 on #FFCBCF
Aa5.47:1 Good#FFCBCF on #295D23
Aa4.97:1 Good#830021 on #86C171
Aa4.97:1 Good#86C171 on #830021
Aa3.68:1 Poor#295D23 on #86C171
Aa3.68:1 Poor#86C171 on #295D23

Color blindness preview

CSS variables

/* Pine to Mykonos — https://swatchly.xyz/palette/295d23-830021-327fff-ffcbcf-86c171-487cb9 */
:root {
  --pine: #295d23;
  --oxblood: #830021;
  --azure: #327fff;
  --love-fumes: #ffcbcf;
  --dollar-bill: #86c171;
  --mykonos: #487cb9;
}

Tailwind CSS v4

/* Pine to Mykonos — https://swatchly.xyz/palette/295d23-830021-327fff-ffcbcf-86c171-487cb9 */
@theme {
  --color-pine: #295d23;
  --color-pine-50: #e2ffdd;
  --color-pine-100: #d4f7cf;
  --color-pine-200: #bae4b4;
  --color-pine-300: #9ece97;
  --color-pine-400: #7aae73;
  --color-pine-500: #5c9255;
  --color-pine-600: #42753c;
  --color-pine-700: #295d23;
  --color-pine-800: #20481c;
  --color-pine-900: #163812;
  --color-pine-950: #0b2308;
  --color-oxblood: #830021;
  --color-oxblood-50: #fff1f1;
  --color-oxblood-100: #ffe4e3;
  --color-oxblood-200: #ffc7c7;
  --color-oxblood-300: #ffa5a6;
  --color-oxblood-400: #f0787d;
  --color-oxblood-500: #d45962;
  --color-oxblood-600: #b43e49;
  --color-oxblood-700: #962936;
  --color-oxblood-800: #830021;
  --color-oxblood-900: #620e1b;
  --color-oxblood-950: #41040e;
  --color-azure: #327fff;
  --color-azure-50: #f0f6ff;
  --color-azure-100: #e0ecff;
  --color-azure-200: #c2d9ff;
  --color-azure-300: #9dc2ff;
  --color-azure-400: #68a0ff;
  --color-azure-500: #327fff;
  --color-azure-600: #1462de;
  --color-azure-700: #004bba;
  --color-azure-800: #003a94;
  --color-azure-900: #002c74;
  --color-azure-950: #001b4d;
  --color-love-fumes: #ffcbcf;
  --color-love-fumes-50: #fff4f5;
  --color-love-fumes-100: #ffe7e8;
  --color-love-fumes-200: #ffcbcf;
  --color-love-fumes-300: #e2b7ba;
  --color-love-fumes-400: #c49599;
  --color-love-fumes-500: #a8797d;
  --color-love-fumes-600: #8b5f63;
  --color-love-fumes-700: #71494d;
  --color-love-fumes-800: #5a373b;
  --color-love-fumes-900: #47292c;
  --color-love-fumes-950: #2d181b;
  --color-dollar-bill: #86c171;
  --color-dollar-bill-50: #f0ffeb;
  --color-dollar-bill-100: #dbfecf;
  --color-dollar-bill-200: #c5efb7;
  --color-dollar-bill-300: #acdc9b;
  --color-dollar-bill-400: #86c171;
  --color-dollar-bill-500: #69a254;
  --color-dollar-bill-600: #4c8437;
  --color-dollar-bill-700: #366a20;
  --color-dollar-bill-800: #255310;
  --color-dollar-bill-900: #183f05;
  --color-dollar-bill-950: #0b2701;
  --color-mykonos: #487cb9;
  --color-mykonos-50: #ebf4ff;
  --color-mykonos-100: #d6e9ff;
  --color-mykonos-200: #b1d4ff;
  --color-mykonos-300: #8bbcf6;
  --color-mykonos-400: #669ad8;
  --color-mykonos-500: #487cb9;
  --color-mykonos-600: #32639c;
  --color-mykonos-700: #224f82;
  --color-mykonos-800: #163e6a;
  --color-mykonos-900: #0d3055;
  --color-mykonos-950: #051e39;
}