Cold Lips to Soothing Sapphire color palette

A49BFFCold Lips 5F8300Enchanted Forest FF9E5BBittersweet 73B000Extra Life 9972FFPeriwinkle 007BDESoothing Sapphire

Open in generator Export PNG, PDF, ASE…

About this palette

Cold Lips to Soothing Sapphire is a 6-color vibrant, cool palette: #A49BFF (Cold Lips), #5F8300 (Enchanted Forest), #FF9E5B (Bittersweet), #73B000 (Extra Life), #9972FF (Periwinkle), #007BDE (Soothing Sapphire). It mixes purple, green, orange, blue tones and feels cool overall. The strongest text pairing is #5F8300 on #FF9E5B with a contrast ratio of 2.17:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Lips	rgb(164, 155, 255)	hsl(245, 100%, 80%)
Enchanted Forest	rgb(95, 131, 0)	hsl(76, 100%, 26%)
Bittersweet	rgb(255, 158, 91)	hsl(25, 100%, 68%)
Extra Life	rgb(115, 176, 0)	hsl(81, 100%, 35%)
Periwinkle	rgb(153, 114, 255)	hsl(257, 100%, 72%)
Soothing Sapphire	rgb(0, 123, 222)	hsl(207, 100%, 44%)

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.

Color blindness preview

CSS variables

/* Cold Lips to Soothing Sapphire — https://swatchly.xyz/palette/a49bff-5f8300-ff9e5b-73b000-9972ff-007bde */
:root {
  --cold-lips: #a49bff;
  --enchanted-forest: #5f8300;
  --bittersweet: #ff9e5b;
  --extra-life: #73b000;
  --periwinkle: #9972ff;
  --soothing-sapphire: #007bde;
}

Tailwind CSS v4

/* Cold Lips to Soothing Sapphire — https://swatchly.xyz/palette/a49bff-5f8300-ff9e5b-73b000-9972ff-007bde */
@theme {
  --color-cold-lips: #a49bff;
  --color-cold-lips-50: #f7f7ff;
  --color-cold-lips-100: #eeeeff;
  --color-cold-lips-200: #dad9ff;
  --color-cold-lips-300: #c3c0ff;
  --color-cold-lips-400: #a49bff;
  --color-cold-lips-500: #887ede;
  --color-cold-lips-600: #6d61be;
  --color-cold-lips-700: #56499f;
  --color-cold-lips-800: #423681;
  --color-cold-lips-900: #322767;
  --color-cold-lips-950: #1e1643;
  --color-enchanted-forest: #5f8300;
  --color-enchanted-forest-50: #e8ffc9;
  --color-enchanted-forest-100: #def8b9;
  --color-enchanted-forest-200: #c9e89d;
  --color-enchanted-forest-300: #b2d47d;
  --color-enchanted-forest-400: #92b753;
  --color-enchanted-forest-500: #789d2f;
  --color-enchanted-forest-600: #5f8300;
  --color-enchanted-forest-700: #4b6800;
  --color-enchanted-forest-800: #3a5100;
  --color-enchanted-forest-900: #2b3e00;
  --color-enchanted-forest-950: #1a2700;
  --color-bittersweet: #ff9e5b;
  --color-bittersweet-50: #ffede2;
  --color-bittersweet-100: #ffdfca;
  --color-bittersweet-200: #ffc29b;
  --color-bittersweet-300: #ff9e5b;
  --color-bittersweet-400: #dc813f;
  --color-bittersweet-500: #c1651a;
  --color-bittersweet-600: #a04f00;
  --color-bittersweet-700: #813e00;
  --color-bittersweet-800: #673000;
  --color-bittersweet-900: #512500;
  --color-bittersweet-950: #351500;
  --color-extra-life: #73b000;
  --color-extra-life-50: #e0ffc3;
  --color-extra-life-100: #cdf8a3;
  --color-extra-life-200: #b4e67e;
  --color-extra-life-300: #98cf56;
  --color-extra-life-400: #73b000;
  --color-extra-life-500: #5f9300;
  --color-extra-life-600: #4c7600;
  --color-extra-life-700: #3b5e00;
  --color-extra-life-800: #2e4a00;
  --color-extra-life-900: #233a00;
  --color-extra-life-950: #142500;
  --color-periwinkle: #9972ff;
  --color-periwinkle-50: #f7f6ff;
  --color-periwinkle-100: #efedff;
  --color-periwinkle-200: #ded8ff;
  --color-periwinkle-300: #cabfff;
  --color-periwinkle-400: #af98ff;
  --color-periwinkle-500: #9972ff;
  --color-periwinkle-600: #7d53dd;
  --color-periwinkle-700: #653abb;
  --color-periwinkle-800: #4f279a;
  --color-periwinkle-900: #3d187c;
  --color-periwinkle-950: #260a52;
  --color-soothing-sapphire: #007bde;
  --color-soothing-sapphire-50: #ebf4ff;
  --color-soothing-sapphire-100: #d6e9ff;
  --color-soothing-sapphire-200: #b0d5ff;
  --color-soothing-sapphire-300: #83bdff;
  --color-soothing-sapphire-400: #389afd;
  --color-soothing-sapphire-500: #007bde;
  --color-soothing-sapphire-600: #0063b4;
  --color-soothing-sapphire-700: #004e91;
  --color-soothing-sapphire-800: #003d74;
  --color-soothing-sapphire-900: #00305c;
  --color-soothing-sapphire-950: #001e3e;
}