Beyond the Stars to Jurassic Park Color Palette

About this palette

Beyond the Stars to Jurassic Park is a 5-color dark, cool palette: #103054 (Beyond the Stars), #070D4F (Ravenclaw), #005235 (Moor-Monster), #000A13 (Black Knight), #456845 (Jurassic Park). It mixes blue, green, black tones and feels cool overall. The strongest text pairing is #000A13 on #456845 with a contrast ratio of 3.15:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beyond the Stars	rgb(16, 48, 84)	hsl(212, 68%, 20%)
Ravenclaw	rgb(7, 13, 79)	hsl(235, 84%, 17%)
Moor-Monster	rgb(0, 82, 53)	hsl(159, 100%, 16%)
Black Knight	rgb(0, 10, 19)	hsl(208, 100%, 4%)
Jurassic Park	rgb(69, 104, 69)	hsl(120, 20%, 34%)

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.

Aa3.15:1 Poor#000A13 on #456845
Aa3.15:1 Poor#456845 on #000A13

Color blindness preview

CSS variables

/* Beyond the Stars to Jurassic Park — https://swatchly.xyz/palette/103054-070d4f-005235-000a13-456845 */
:root {
  --beyond-the-stars: #103054;
  --ravenclaw: #070d4f;
  --moor-monster: #005235;
  --black-knight: #000a13;
  --jurassic-park: #456845;
}

Tailwind CSS v4

/* Beyond the Stars to Jurassic Park — https://swatchly.xyz/palette/103054-070d4f-005235-000a13-456845 */
@theme {
  --color-beyond-the-stars: #103054;
  --color-beyond-the-stars-50: #eff6ff;
  --color-beyond-the-stars-100: #deedff;
  --color-beyond-the-stars-200: #bfdafc;
  --color-beyond-the-stars-300: #a5c4ea;
  --color-beyond-the-stars-400: #81a4cd;
  --color-beyond-the-stars-500: #6587b1;
  --color-beyond-the-stars-600: #4b6c94;
  --color-beyond-the-stars-700: #375578;
  --color-beyond-the-stars-800: #27415f;
  --color-beyond-the-stars-900: #103054;
  --color-beyond-the-stars-950: #0e1d2f;
  --color-ravenclaw: #070d4f;
  --color-ravenclaw-50: #f1f5ff;
  --color-ravenclaw-100: #e3ebff;
  --color-ravenclaw-200: #c7d7ff;
  --color-ravenclaw-300: #a7bfff;
  --color-ravenclaw-400: #849ee8;
  --color-ravenclaw-500: #6781cb;
  --color-ravenclaw-600: #4e65ac;
  --color-ravenclaw-700: #394e8d;
  --color-ravenclaw-800: #293a71;
  --color-ravenclaw-900: #1d2b57;
  --color-ravenclaw-950: #070d4f;
  --color-moor-monster: #005235;
  --color-moor-monster-50: #dcffec;
  --color-moor-monster-100: #cdf7e0;
  --color-moor-monster-200: #b3e5ca;
  --color-moor-monster-300: #97d1b2;
  --color-moor-monster-400: #72b392;
  --color-moor-monster-500: #549777;
  --color-moor-monster-600: #3a7c5d;
  --color-moor-monster-700: #266548;
  --color-moor-monster-800: #005235;
  --color-moor-monster-900: #0c3e29;
  --color-moor-monster-950: #042818;
  --color-black-knight: #000a13;
  --color-black-knight-50: #ebf7ff;
  --color-black-knight-100: #e0edf6;
  --color-black-knight-200: #cbdae4;
  --color-black-knight-300: #b2c4cf;
  --color-black-knight-400: #91a5b1;
  --color-black-knight-500: #718491;
  --color-black-knight-600: #536570;
  --color-black-knight-700: #3a4a54;
  --color-black-knight-800: #26333a;
  --color-black-knight-900: #171f25;
  --color-black-knight-950: #000a13;
  --color-jurassic-park: #456845;
  --color-jurassic-park-50: #e7fce6;
  --color-jurassic-park-100: #dbf3da;
  --color-jurassic-park-200: #c6e2c5;
  --color-jurassic-park-300: #aecfad;
  --color-jurassic-park-400: #8eb18d;
  --color-jurassic-park-500: #739772;
  --color-jurassic-park-600: #5a7e5a;
  --color-jurassic-park-700: #456845;
  --color-jurassic-park-800: #345234;
  --color-jurassic-park-900: #263f26;
  --color-jurassic-park-950: #162816;
}