Cape Verde to Ghost White color palette

005150Cape Verde 4A6700Serrano Pepper 009397Java FA6981Kisses and Hugs C1DE91Sage Sensation F9F6FFGhost White

Open in generator Export PNG, PDF, ASE…

About this palette

Cape Verde to Ghost White is a 6-color cool palette: #005150 (Cape Verde), #4A6700 (Serrano Pepper), #009397 (Java), #FA6981 (Kisses and Hugs), #C1DE91 (Sage Sensation), #F9F6FF (Ghost White). It mixes turquoise, green, red, white tones and feels cool overall. The strongest text pairing is #005150 on #F9F6FF with a contrast ratio of 8.57:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 81, 80)	hsl(179, 100%, 16%)
Serrano Pepper	rgb(74, 103, 0)	hsl(77, 100%, 20%)
Java	rgb(0, 147, 151)	hsl(182, 100%, 30%)
Kisses and Hugs	rgb(250, 105, 129)	hsl(350, 94%, 70%)
Sage Sensation	rgb(193, 222, 145)	hsl(83, 54%, 72%)
Ghost White	rgb(249, 246, 255)	hsl(260, 100%, 98%)

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.

Aa8.57:1 Very good#005150 on #F9F6FF
Aa8.57:1 Very good#F9F6FF on #005150
Aa6.16:1 Good#005150 on #C1DE91
Aa6.16:1 Good#C1DE91 on #005150
Aa6.08:1 Good#4A6700 on #F9F6FF
Aa6.08:1 Good#F9F6FF on #4A6700
Aa4.37:1 Poor#4A6700 on #C1DE91
Aa4.37:1 Poor#C1DE91 on #4A6700

Color blindness preview

CSS variables

/* Cape Verde to Ghost White — https://swatchly.xyz/palette/005150-4a6700-009397-fa6981-c1de91-f9f6ff */
:root {
  --cape-verde: #005150;
  --serrano-pepper: #4a6700;
  --java: #009397;
  --kisses-and-hugs: #fa6981;
  --sage-sensation: #c1de91;
  --ghost-white: #f9f6ff;
}

Tailwind CSS v4

/* Cape Verde to Ghost White — https://swatchly.xyz/palette/005150-4a6700-009397-fa6981-c1de91-f9f6ff */
@theme {
  --color-cape-verde: #005150;
  --color-cape-verde-50: #dafefc;
  --color-cape-verde-100: #ccf5f3;
  --color-cape-verde-200: #b2e2e1;
  --color-cape-verde-300: #96cecc;
  --color-cape-verde-400: #72b0ae;
  --color-cape-verde-500: #549593;
  --color-cape-verde-600: #3a7b79;
  --color-cape-verde-700: #256362;
  --color-cape-verde-800: #005150;
  --color-cape-verde-900: #0b3e3d;
  --color-cape-verde-950: #032727;
  --color-serrano-pepper: #4a6700;
  --color-serrano-pepper-50: #eafece;
  --color-serrano-pepper-100: #def5bf;
  --color-serrano-pepper-200: #cae4a4;
  --color-serrano-pepper-300: #b2d087;
  --color-serrano-pepper-400: #92b260;
  --color-serrano-pepper-500: #789841;
  --color-serrano-pepper-600: #5f7d25;
  --color-serrano-pepper-700: #4a6700;
  --color-serrano-pepper-800: #395100;
  --color-serrano-pepper-900: #2b3e00;
  --color-serrano-pepper-950: #1a2700;
  --color-java: #009397;
  --color-java-50: #d2feff;
  --color-java-100: #b6f7f9;
  --color-java-200: #96e5e7;
  --color-java-300: #72cfd2;
  --color-java-400: #40b0b3;
  --color-java-500: #009397;
  --color-java-600: #00767a;
  --color-java-700: #005e61;
  --color-java-800: #004a4c;
  --color-java-900: #00393b;
  --color-java-950: #002425;
  --color-kisses-and-hugs: #fa6981;
  --color-kisses-and-hugs-50: #fff1f2;
  --color-kisses-and-hugs-100: #ffe3e5;
  --color-kisses-and-hugs-200: #ffc6cb;
  --color-kisses-and-hugs-300: #ffa2ac;
  --color-kisses-and-hugs-400: #fa6981;
  --color-kisses-and-hugs-500: #da4c67;
  --color-kisses-and-hugs-600: #b92f4e;
  --color-kisses-and-hugs-700: #9a173a;
  --color-kisses-and-hugs-800: #7e032b;
  --color-kisses-and-hugs-900: #640020;
  --color-kisses-and-hugs-950: #420012;
  --color-sage-sensation: #c1de91;
  --color-sage-sensation-50: #e7f9cd;
  --color-sage-sensation-100: #dbefbd;
  --color-sage-sensation-200: #c1de91;
  --color-sage-sensation-300: #aec785;
  --color-sage-sensation-400: #8fa961;
  --color-sage-sensation-500: #748e44;
  --color-sage-sensation-600: #5c742b;
  --color-sage-sensation-700: #485d18;
  --color-sage-sensation-800: #374a0a;
  --color-sage-sensation-900: #293903;
  --color-sage-sensation-950: #192400;
  --color-ghost-white: #f9f6ff;
  --color-ghost-white-50: #f9f6ff;
  --color-ghost-white-100: #eeecf2;
  --color-ghost-white-200: #dad8de;
  --color-ghost-white-300: #c3c1c8;
  --color-ghost-white-400: #a3a1a9;
  --color-ghost-white-500: #88858d;
  --color-ghost-white-600: #6d6a72;
  --color-ghost-white-700: #56545b;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #333237;
  --color-ghost-white-950: #201e22;
}