Hello Summer to Olympian Blue color palette

65B3FFHello Summer 2E1D4DSilent Orbit 957EB6Magic Carpet 647B41Ghoul FFC078Cinnamon Buff 004E86Olympian Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Hello Summer to Olympian Blue is a 6-color cool palette: #65B3FF (Hello Summer), #2E1D4D (Silent Orbit), #957EB6 (Magic Carpet), #647B41 (Ghoul), #FFC078 (Cinnamon Buff), #004E86 (Olympian Blue). It mixes blue, purple, green, orange tones and feels cool overall. The strongest text pairing is #2E1D4D on #FFC078 with a contrast ratio of 9.34:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hello Summer	rgb(101, 179, 255)	hsl(210, 100%, 70%)
Silent Orbit	rgb(46, 29, 77)	hsl(261, 45%, 21%)
Magic Carpet	rgb(149, 126, 182)	hsl(265, 28%, 60%)
Ghoul	rgb(100, 123, 65)	hsl(84, 31%, 37%)
Cinnamon Buff	rgb(255, 192, 120)	hsl(32, 100%, 74%)
Olympian Blue	rgb(0, 78, 134)	hsl(205, 100%, 26%)

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.

Aa9.34:1 Very good#2E1D4D on #FFC078
Aa9.34:1 Very good#FFC078 on #2E1D4D
Aa6.75:1 Good#65B3FF on #2E1D4D
Aa6.75:1 Good#2E1D4D on #65B3FF
Aa5.37:1 Good#FFC078 on #004E86
Aa5.37:1 Good#004E86 on #FFC078
Aa4.24:1 Poor#2E1D4D on #957EB6
Aa4.24:1 Poor#957EB6 on #2E1D4D

Color blindness preview

CSS variables

/* Hello Summer to Olympian Blue — https://swatchly.xyz/palette/65b3ff-2e1d4d-957eb6-647b41-ffc078-004e86 */
:root {
  --hello-summer: #65b3ff;
  --silent-orbit: #2e1d4d;
  --magic-carpet: #957eb6;
  --ghoul: #647b41;
  --cinnamon-buff: #ffc078;
  --olympian-blue: #004e86;
}

Tailwind CSS v4

/* Hello Summer to Olympian Blue — https://swatchly.xyz/palette/65b3ff-2e1d4d-957eb6-647b41-ffc078-004e86 */
@theme {
  --color-hello-summer: #65b3ff;
  --color-hello-summer-50: #f5faff;
  --color-hello-summer-100: #e8f3ff;
  --color-hello-summer-200: #c9e3ff;
  --color-hello-summer-300: #a2d0ff;
  --color-hello-summer-400: #65b3ff;
  --color-hello-summer-500: #4794de;
  --color-hello-summer-600: #2677be;
  --color-hello-summer-700: #085d9e;
  --color-hello-summer-800: #00477e;
  --color-hello-summer-900: #003661;
  --color-hello-summer-950: #00203e;
  --color-silent-orbit: #2e1d4d;
  --color-silent-orbit-50: #f6f3ff;
  --color-silent-orbit-100: #ede7ff;
  --color-silent-orbit-200: #dbcffd;
  --color-silent-orbit-300: #c5b8eb;
  --color-silent-orbit-400: #a697cf;
  --color-silent-orbit-500: #8d7db6;
  --color-silent-orbit-600: #75659b;
  --color-silent-orbit-700: #605183;
  --color-silent-orbit-800: #4e406d;
  --color-silent-orbit-900: #3f335b;
  --color-silent-orbit-950: #2e1d4d;
  --color-magic-carpet: #957eb6;
  --color-magic-carpet-50: #f8f4ff;
  --color-magic-carpet-100: #f1e8ff;
  --color-magic-carpet-200: #e2d1fd;
  --color-magic-carpet-300: #cdb9eb;
  --color-magic-carpet-400: #af99d0;
  --color-magic-carpet-500: #957eb6;
  --color-magic-carpet-600: #796398;
  --color-magic-carpet-700: #614c7d;
  --color-magic-carpet-800: #4c3a65;
  --color-magic-carpet-900: #3b2b4f;
  --color-magic-carpet-950: #251933;
  --color-ghoul: #647b41;
  --color-ghoul-50: #edfcd9;
  --color-ghoul-100: #e3f4cd;
  --color-ghoul-200: #cee2b5;
  --color-ghoul-300: #b7cd9a;
  --color-ghoul-400: #98b077;
  --color-ghoul-500: #7d955a;
  --color-ghoul-600: #647b41;
  --color-ghoul-700: #4e622d;
  --color-ghoul-800: #3b4d1d;
  --color-ghoul-900: #2c3b12;
  --color-ghoul-950: #1a2507;
  --color-cinnamon-buff: #ffc078;
  --color-cinnamon-buff-50: #ffebd6;
  --color-cinnamon-buff-100: #ffdcb7;
  --color-cinnamon-buff-200: #ffc078;
  --color-cinnamon-buff-300: #e4ad6f;
  --color-cinnamon-buff-400: #c88e48;
  --color-cinnamon-buff-500: #ae7428;
  --color-cinnamon-buff-600: #925b03;
  --color-cinnamon-buff-700: #764800;
  --color-cinnamon-buff-800: #5e3900;
  --color-cinnamon-buff-900: #492b00;
  --color-cinnamon-buff-950: #2f1a00;
  --color-olympian-blue: #004e86;
  --color-olympian-blue-50: #eef6ff;
  --color-olympian-blue-100: #dcedff;
  --color-olympian-blue-200: #b5daff;
  --color-olympian-blue-300: #8ac3fa;
  --color-olympian-blue-400: #62a1de;
  --color-olympian-blue-500: #4384c0;
  --color-olympian-blue-600: #28679f;
  --color-olympian-blue-700: #004e86;
  --color-olympian-blue-800: #073d67;
  --color-olympian-blue-900: #022f52;
  --color-olympian-blue-950: #001c36;
}