0%
Golden Ratio

A constant hue step of approximately 137.5°, which is derived from the golden ratio. This creates the most uniform distribution of points around a circle.

Choose Presets
Naming Pack
Number of Colors
warp fern
50
100
200
300
400
500 ★
600
700
800
900
950
lunar slime
50
100
200
300
400
500
600
700
800
900
950
ultra bubblegum
50
100
200
300
400
500
600
700
800
900
950
neon chartreuse
50
100
200
300
400
500
600
700
800
900
950
Tailwind CSS Variables
:root{
  --color-warp-fern-50: #D6FFD5;
  --color-warp-fern-100: #70FF76;
  --color-warp-fern-200: #00F139;
  --color-warp-fern-300: #00DC33;
  --color-warp-fern-400: #00C82D;
  --color-warp-fern-500: #4CAF50;
  --color-warp-fern-600: #009D21;
  --color-warp-fern-700: #00851B;
  --color-warp-fern-800: #006F15;
  --color-warp-fern-900: #00590E;
  --color-warp-fern-950: #004409;

  --color-lunar-slime-50: #D5FFD6;
  --color-lunar-slime-100: #B2E9B4;
  --color-lunar-slime-200: #8ED591;
  --color-lunar-slime-300: #67C26E;
  --color-lunar-slime-400: #41AE4E;
  --color-lunar-slime-500: #259838;
  --color-lunar-slime-600: #1F812F;
  --color-lunar-slime-700: #22692B;
  --color-lunar-slime-800: #205225;
  --color-lunar-slime-900: #183E1C;
  --color-lunar-slime-950: #0C2C10;

  --color-ultra-bubblegum-50: #F1F0FF;
  --color-ultra-bubblegum-100: #D7D1FF;
  --color-ultra-bubblegum-200: #C0B5FF;
  --color-ultra-bubblegum-300: #AB97FF;
  --color-ultra-bubblegum-400: #9878FF;
  --color-ultra-bubblegum-500: #8462E7;
  --color-ultra-bubblegum-600: #6F53C4;
  --color-ultra-bubblegum-700: #5B469C;
  --color-ultra-bubblegum-800: #473A78;
  --color-ultra-bubblegum-900: #352C5A;
  --color-ultra-bubblegum-950: #251D42;

  --color-neon-chartreuse-50: #FFEFDA;
  --color-neon-chartreuse-100: #FFCF89;
  --color-neon-chartreuse-200: #F5B244;
  --color-neon-chartreuse-300: #E09A00;
  --color-neon-chartreuse-400: #C48700;
  --color-neon-chartreuse-500: #A97400;
  --color-neon-chartreuse-600: #8F6100;
  --color-neon-chartreuse-700: #765000;
  --color-neon-chartreuse-800: #5F3F00;
  --color-neon-chartreuse-900: #482F00;
  --color-neon-chartreuse-950: #332000;

}