Electra to Velour Scar color palette

38B698Electra 794C22Milk Chocolate E1F4FFCotton Boll 432E21Cola DEA1ADSprinkled With Pink 975265Velour Scar

Open in generator Export PNG, PDF, ASE…

About this palette

Electra to Velour Scar is a 6-color warm, vintage palette: #38B698 (Electra), #794C22 (Milk Chocolate), #E1F4FF (Cotton Boll), #432E21 (Cola), #DEA1AD (Sprinkled With Pink), #975265 (Velour Scar). It mixes turquoise, brown, white, pink, red tones and feels warm overall. The strongest text pairing is #E1F4FF on #432E21 with a contrast ratio of 11.25:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Electra	rgb(56, 182, 152)	hsl(166, 53%, 47%)
Milk Chocolate	rgb(121, 76, 34)	hsl(29, 56%, 30%)
Cotton Boll	rgb(225, 244, 255)	hsl(202, 100%, 94%)
Cola	rgb(67, 46, 33)	hsl(23, 34%, 20%)
Sprinkled With Pink	rgb(222, 161, 173)	hsl(348, 48%, 75%)
Velour Scar	rgb(151, 82, 101)	hsl(343, 30%, 46%)

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.

Aa11.25:1 Very good#E1F4FF on #432E21
Aa11.25:1 Very good#432E21 on #E1F4FF
Aa6.48:1 Good#794C22 on #E1F4FF
Aa6.48:1 Good#E1F4FF on #794C22
Aa5.94:1 Good#432E21 on #DEA1AD
Aa5.94:1 Good#DEA1AD on #432E21
Aa5.03:1 Good#38B698 on #432E21
Aa5.03:1 Good#432E21 on #38B698

Color blindness preview

CSS variables

/* Electra to Velour Scar — https://swatchly.xyz/palette/38b698-794c22-e1f4ff-432e21-dea1ad-975265 */
:root {
  --electra: #38b698;
  --milk-chocolate: #794c22;
  --cotton-boll: #e1f4ff;
  --cola: #432e21;
  --sprinkled-with-pink: #dea1ad;
  --velour-scar: #975265;
}

Tailwind CSS v4

/* Electra to Velour Scar — https://swatchly.xyz/palette/38b698-794c22-e1f4ff-432e21-dea1ad-975265 */
@theme {
  --color-electra: #38b698;
  --color-electra-50: #d5fff1;
  --color-electra-100: #b6fae5;
  --color-electra-200: #96e9d0;
  --color-electra-300: #72d4b9;
  --color-electra-400: #38b698;
  --color-electra-500: #009a7d;
  --color-electra-600: #007c65;
  --color-electra-700: #006350;
  --color-electra-800: #004e3e;
  --color-electra-900: #003c30;
  --color-electra-950: #00261d;
  --color-milk-chocolate: #794c22;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d2;
  --color-milk-chocolate-200: #f7d0af;
  --color-milk-chocolate-300: #e4b894;
  --color-milk-chocolate-400: #c8986f;
  --color-milk-chocolate-500: #ad7c53;
  --color-milk-chocolate-600: #91623a;
  --color-milk-chocolate-700: #794c22;
  --color-milk-chocolate-800: #5f3b18;
  --color-milk-chocolate-900: #4b2c0e;
  --color-milk-chocolate-950: #311a05;
  --color-cotton-boll: #e1f4ff;
  --color-cotton-boll-50: #e1f4ff;
  --color-cotton-boll-100: #ddeaf1;
  --color-cotton-boll-200: #c9d7df;
  --color-cotton-boll-300: #b2c1cb;
  --color-cotton-boll-400: #92a3ad;
  --color-cotton-boll-500: #778892;
  --color-cotton-boll-600: #5e6f78;
  --color-cotton-boll-700: #495860;
  --color-cotton-boll-800: #38454c;
  --color-cotton-boll-900: #2a353b;
  --color-cotton-boll-950: #192125;
  --color-cola: #432e21;
  --color-cola-50: #fff2eb;
  --color-cola-100: #f9e7dd;
  --color-cola-200: #e7d3c7;
  --color-cola-300: #d3bcae;
  --color-cola-400: #b59c8d;
  --color-cola-500: #9a8172;
  --color-cola-600: #7e6658;
  --color-cola-700: #665144;
  --color-cola-800: #513e33;
  --color-cola-900: #432e21;
  --color-cola-950: #281d16;
  --color-sprinkled-with-pink: #dea1ad;
  --color-sprinkled-with-pink-50: #ffe8ec;
  --color-sprinkled-with-pink-100: #ffd6de;
  --color-sprinkled-with-pink-200: #f0bdc7;
  --color-sprinkled-with-pink-300: #dea1ad;
  --color-sprinkled-with-pink-400: #bf8590;
  --color-sprinkled-with-pink-500: #a46c77;
  --color-sprinkled-with-pink-600: #895460;
  --color-sprinkled-with-pink-700: #71414c;
  --color-sprinkled-with-pink-800: #5c323c;
  --color-sprinkled-with-pink-900: #4a262f;
  --color-sprinkled-with-pink-950: #30161c;
  --color-velour-scar: #975265;
  --color-velour-scar-50: #fff1f4;
  --color-velour-scar-100: #ffe3e9;
  --color-velour-scar-200: #ffc5d2;
  --color-velour-scar-300: #eeabbb;
  --color-velour-scar-400: #d1899b;
  --color-velour-scar-500: #b46c7f;
  --color-velour-scar-600: #975265;
  --color-velour-scar-700: #7b3e4f;
  --color-velour-scar-800: #632e3d;
  --color-velour-scar-900: #4e212f;
  --color-velour-scar-950: #33131c;
}