Cyantific to Meteorite Color Palette

About this palette

Cyantific to Meteorite is a 5-color cool, vintage palette: #6FCCC2 (Cyantific), #FED9B3 (Young Apricot), #63506F (Your Majesty), #A67E3D (Chai Tea), #483965 (Meteorite). It mixes turquoise, orange, purple, yellow tones and feels cool overall. The strongest text pairing is #FED9B3 on #483965 with a contrast ratio of 7.71:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cyantific	rgb(111, 204, 194)	hsl(174, 48%, 62%)
Young Apricot	rgb(254, 217, 179)	hsl(30, 97%, 85%)
Your Majesty	rgb(99, 80, 111)	hsl(277, 16%, 37%)
Chai Tea	rgb(166, 126, 61)	hsl(37, 46%, 45%)
Meteorite	rgb(72, 57, 101)	hsl(260, 28%, 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.

Aa7.71:1 Very good#FED9B3 on #483965
Aa7.71:1 Very good#483965 on #FED9B3
Aa5.43:1 Good#FED9B3 on #63506F
Aa5.43:1 Good#63506F on #FED9B3
Aa5.41:1 Good#6FCCC2 on #483965
Aa5.41:1 Good#483965 on #6FCCC2
Aa3.81:1 Poor#6FCCC2 on #63506F
Aa3.81:1 Poor#63506F on #6FCCC2

Color blindness preview

CSS variables

/* Cyantific to Meteorite — https://swatchly.xyz/palette/6fccc2-fed9b3-63506f-a67e3d-483965 */
:root {
  --cyantific: #6fccc2;
  --young-apricot: #fed9b3;
  --your-majesty: #63506f;
  --chai-tea: #a67e3d;
  --meteorite: #483965;
}

Tailwind CSS v4

/* Cyantific to Meteorite — https://swatchly.xyz/palette/6fccc2-fed9b3-63506f-a67e3d-483965 */
@theme {
  --color-cyantific: #6fccc2;
  --color-cyantific-50: #cafdf6;
  --color-cyantific-100: #b9f3ec;
  --color-cyantific-200: #9be0d8;
  --color-cyantific-300: #6fccc2;
  --color-cyantific-400: #52ada4;
  --color-cyantific-500: #30938a;
  --color-cyantific-600: #0b7870;
  --color-cyantific-700: #00605a;
  --color-cyantific-800: #004c47;
  --color-cyantific-900: #003c37;
  --color-cyantific-950: #002622;
  --color-young-apricot: #fed9b3;
  --color-young-apricot-50: #fffaf5;
  --color-young-apricot-100: #fff0e1;
  --color-young-apricot-200: #fed9b3;
  --color-young-apricot-300: #e0c2a4;
  --color-young-apricot-400: #c1a07e;
  --color-young-apricot-500: #a58360;
  --color-young-apricot-600: #876745;
  --color-young-apricot-700: #6d5031;
  --color-young-apricot-800: #563d21;
  --color-young-apricot-900: #432e16;
  --color-young-apricot-950: #2b1c0b;
  --color-your-majesty: #63506f;
  --color-your-majesty-50: #faf2ff;
  --color-your-majesty-100: #f3e5fc;
  --color-your-majesty-200: #e1d1ec;
  --color-your-majesty-300: #ccbad8;
  --color-your-majesty-400: #ae9bbb;
  --color-your-majesty-500: #9480a1;
  --color-your-majesty-600: #796686;
  --color-your-majesty-700: #63506f;
  --color-your-majesty-800: #4e3e57;
  --color-your-majesty-900: #3c2f44;
  --color-your-majesty-950: #261c2c;
  --color-chai-tea: #a67e3d;
  --color-chai-tea-50: #fff3e2;
  --color-chai-tea-100: #ffe7c5;
  --color-chai-tea-200: #f2d2a3;
  --color-chai-tea-300: #dfba84;
  --color-chai-tea-400: #c19a5c;
  --color-chai-tea-500: #a67e3d;
  --color-chai-tea-600: #8a6422;
  --color-chai-tea-700: #704e0b;
  --color-chai-tea-800: #593c00;
  --color-chai-tea-900: #452d00;
  --color-chai-tea-950: #2c1b00;
  --color-meteorite: #483965;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #eee7ff;
  --color-meteorite-200: #dcd0f8;
  --color-meteorite-300: #c6b9e5;
  --color-meteorite-400: #a798c9;
  --color-meteorite-500: #8c7dae;
  --color-meteorite-600: #716391;
  --color-meteorite-700: #5a4d77;
  --color-meteorite-800: #483965;
  --color-meteorite-900: #372c4c;
  --color-meteorite-950: #221b31;
}