Colors in OKCLH

colors.css

:root {
  /* Colors from: https://oklch.fyi/color-palettes */

  /* Gray */
  --gray-1: oklch(0.993 0 0);
  --gray-2: oklch(0.982 0 0);
  --gray-3: oklch(0.961 0 0);
  --gray-4: oklch(0.94 0 0);
  --gray-5: oklch(0.918 0 0);
  --gray-6: oklch(0.894 0 0);
  --gray-7: oklch(0.865 0 0);
  --gray-8: oklch(0.818 0 0);
  --gray-9: oklch(0.649 0 0);
  --gray-10: oklch(0.606 0 0);
  --gray-11: oklch(0.503 0 0);
  --gray-12: oklch(0.375 0 0);

  /* Slate */
  --slate-1: oklch(0.993 0.002 256);
  --slate-2: oklch(0.982 0.002 256);
  --slate-3: oklch(0.959 0.004 256);
  --slate-4: oklch(0.936 0.006 256);
  --slate-5: oklch(0.914 0.008 256);
  --slate-6: oklch(0.889 0.01 256);
  --slate-7: oklch(0.859 0.012 256);
  --slate-8: oklch(0.811 0.016 256);
  --slate-9: oklch(0.645 0.018 256);
  --slate-10: oklch(0.601 0.02 256);
  --slate-11: oklch(0.501 0.018 256);
  --slate-12: oklch(0.378 0.016 256);

  /* Red */
  --red-1: oklch(0.99 0.007 17);
  --red-2: oklch(0.982 0.013 17);
  --red-3: oklch(0.965 0.036 17);
  --red-4: oklch(0.946 0.051 17);
  --red-5: oklch(0.924 0.067 17);
  --red-6: oklch(0.895 0.083 17);
  --red-7: oklch(0.856 0.101 17);
  --red-8: oklch(0.802 0.124 17);
  --red-9: oklch(0.647 0.176 17);
  --red-10: oklch(0.61 0.186 17);
  --red-11: oklch(0.49 0.155 17);
  --red-12: oklch(0.367 0.102 17);

  /* Blue */
  --blue-1: oklch(0.989 0.008 252);
  --blue-2: oklch(0.978 0.014 252);
  --blue-3: oklch(0.958 0.035 252);
  --blue-4: oklch(0.936 0.053 252);
  --blue-5: oklch(0.912 0.071 252);
  --blue-6: oklch(0.88 0.09 252);
  --blue-7: oklch(0.836 0.112 252);
  --blue-8: oklch(0.772 0.142 252);
  --blue-9: oklch(0.629 0.187 252);
  --blue-10: oklch(0.587 0.193 252);
  --blue-11: oklch(0.471 0.155 252);
  --blue-12: oklch(0.353 0.103 252);

  /* Green */
  --green-1: oklch(0.989 0.01 145);
  --green-2: oklch(0.978 0.018 145);
  --green-3: oklch(0.956 0.042 145);
  --green-4: oklch(0.931 0.062 145);
  --green-5: oklch(0.902 0.082 145);
  --green-6: oklch(0.868 0.102 145);
  --green-7: oklch(0.823 0.125 145);
  --green-8: oklch(0.762 0.153 145);
  --green-9: oklch(0.623 0.178 145);
  --green-10: oklch(0.579 0.179 145);
  --green-11: oklch(0.464 0.143 145);
  --green-12: oklch(0.348 0.095 145);

  /* Yellow */
  --yellow-1: oklch(0.991 0.01 91);
  --yellow-2: oklch(0.985 0.021 91);
  --yellow-3: oklch(0.972 0.049 91);
  --yellow-4: oklch(0.96 0.074 91);
  --yellow-5: oklch(0.943 0.098 91);
  --yellow-6: oklch(0.92 0.122 91);
  --yellow-7: oklch(0.886 0.147 91);
  --yellow-8: oklch(0.835 0.176 91);
  --yellow-9: oklch(0.725 0.187 91);
  --yellow-10: oklch(0.667 0.177 91);
  --yellow-11: oklch(0.527 0.136 91);
  --yellow-12: oklch(0.385 0.088 91);

  /* Orange */
  --orange-1: oklch(0.991 0.009 55);
  --orange-2: oklch(0.983 0.017 55);
  --orange-3: oklch(0.967 0.042 55);
  --orange-4: oklch(0.95 0.063 55);
  --orange-5: oklch(0.928 0.084 55);
  --orange-6: oklch(0.9 0.105 55);
  --orange-7: oklch(0.861 0.128 55);
  --orange-8: oklch(0.804 0.156 55);
  --orange-9: oklch(0.67 0.185 55);
  --orange-10: oklch(0.626 0.187 55);
  --orange-11: oklch(0.505 0.15 55);
  --orange-12: oklch(0.377 0.099 55);

  /* Purple */
  --purple-1: oklch(0.991 0.009 295);
  --purple-2: oklch(0.982 0.015 295);
  --purple-3: oklch(0.963 0.036 295);
  --purple-4: oklch(0.942 0.054 295);
  --purple-5: oklch(0.917 0.072 295);
  --purple-6: oklch(0.886 0.091 295);
  --purple-7: oklch(0.843 0.113 295);
  --purple-8: oklch(0.78 0.141 295);
  --purple-9: oklch(0.637 0.185 295);
  --purple-10: oklch(0.594 0.191 295);
  --purple-11: oklch(0.478 0.154 295);
  --purple-12: oklch(0.358 0.102 295);

  /* Pink */
  --pink-1: oklch(0.99 0.009 343);
  --pink-2: oklch(0.981 0.016 343);
  --pink-3: oklch(0.963 0.038 343);
  --pink-4: oklch(0.943 0.057 343);
  --pink-5: oklch(0.919 0.076 343);
  --pink-6: oklch(0.889 0.095 343);
  --pink-7: oklch(0.847 0.117 343);
  --pink-8: oklch(0.785 0.144 343);
  --pink-9: oklch(0.641 0.185 343);
  --pink-10: oklch(0.599 0.191 343);
  --pink-11: oklch(0.483 0.154 343);
  --pink-12: oklch(0.361 0.102 343);

  /* Cyan */
  --cyan-1: oklch(0.989 0.01 210);
  --cyan-2: oklch(0.978 0.018 210);
  --cyan-3: oklch(0.956 0.042 210);
  --cyan-4: oklch(0.931 0.062 210);
  --cyan-5: oklch(0.902 0.082 210);
  --cyan-6: oklch(0.868 0.102 210);
  --cyan-7: oklch(0.823 0.125 210);
  --cyan-8: oklch(0.762 0.153 210);
  --cyan-9: oklch(0.623 0.178 210);
  --cyan-10: oklch(0.579 0.179 210);
  --cyan-11: oklch(0.464 0.143 210);
  --cyan-12: oklch(0.348 0.095 210);

  /* Teal */
  --teal-1: oklch(0.989 0.011 180);
  --teal-2: oklch(0.977 0.019 180);
  --teal-3: oklch(0.954 0.044 180);
  --teal-4: oklch(0.928 0.065 180);
  --teal-5: oklch(0.898 0.086 180);
  --teal-6: oklch(0.863 0.107 180);
  --teal-7: oklch(0.817 0.131 180);
  --teal-8: oklch(0.755 0.16 180);
  --teal-9: oklch(0.618 0.182 180);
  --teal-10: oklch(0.574 0.182 180);
  --teal-11: oklch(0.461 0.146 180);
  --teal-12: oklch(0.346 0.097 180);

  /* Indigo */
  --indigo-1: oklch(0.99 0.008 275);
  --indigo-2: oklch(0.979 0.014 275);
  --indigo-3: oklch(0.96 0.034 275);
  --indigo-4: oklch(0.939 0.051 275);
  --indigo-5: oklch(0.914 0.069 275);
  --indigo-6: oklch(0.883 0.088 275);
  --indigo-7: oklch(0.84 0.11 275);
  --indigo-8: oklch(0.776 0.139 275);
  --indigo-9: oklch(0.632 0.185 275);
  --indigo-10: oklch(0.59 0.191 275);
  --indigo-11: oklch(0.474 0.154 275);
  --indigo-12: oklch(0.355 0.102 275);

  /* Amber */
  --amber-1: oklch(0.991 0.011 75);
  --amber-2: oklch(0.985 0.022 75);
  --amber-3: oklch(0.973 0.052 75);
  --amber-4: oklch(0.961 0.078 75);
  --amber-5: oklch(0.944 0.103 75);
  --amber-6: oklch(0.921 0.128 75);
  --amber-7: oklch(0.887 0.154 75);
  --amber-8: oklch(0.837 0.184 75);
  --amber-9: oklch(0.733 0.194 75);
  --amber-10: oklch(0.676 0.184 75);
  --amber-11: oklch(0.534 0.141 75);
  --amber-12: oklch(0.389 0.091 75);

  /* Lime */
  --lime-1: oklch(0.99 0.012 120);
  --lime-2: oklch(0.981 0.024 120);
  --lime-3: oklch(0.965 0.055 120);
  --lime-4: oklch(0.947 0.082 120);
  --lime-5: oklch(0.925 0.108 120);
  --lime-6: oklch(0.897 0.134 120);
  --lime-7: oklch(0.859 0.162 120);
  --lime-8: oklch(0.805 0.193 120);
  --lime-9: oklch(0.703 0.205 120);
  --lime-10: oklch(0.651 0.195 120);
  --lime-11: oklch(0.512 0.149 120);
  --lime-12: oklch(0.373 0.096 120);

  /* Mint */
  --mint-1: oklch(0.989 0.012 165);
  --mint-2: oklch(0.977 0.021 165);
  --mint-3: oklch(0.953 0.048 165);
  --mint-4: oklch(0.926 0.071 165);
  --mint-5: oklch(0.895 0.094 165);
  --mint-6: oklch(0.859 0.117 165);
  --mint-7: oklch(0.811 0.143 165);
  --mint-8: oklch(0.747 0.175 165);
  --mint-9: oklch(0.609 0.192 165);
  --mint-10: oklch(0.565 0.192 165);
  --mint-11: oklch(0.454 0.154 165);
  --mint-12: oklch(0.341 0.102 165);

  /* Tomato */
  --tomato-1: oklch(0.99 0.008 25);
  --tomato-2: oklch(0.982 0.015 25);
  --tomato-3: oklch(0.966 0.038 25);
  --tomato-4: oklch(0.948 0.057 25);
  --tomato-5: oklch(0.926 0.076 25);
  --tomato-6: oklch(0.898 0.096 25);
  --tomato-7: oklch(0.859 0.118 25);
  --tomato-8: oklch(0.803 0.145 25);
  --tomato-9: oklch(0.657 0.183 25);
  --tomato-10: oklch(0.615 0.189 25);
  --tomato-11: oklch(0.497 0.152 25);
  --tomato-12: oklch(0.372 0.1 25);

  /* --------------------------------
    Pallettes
  ----------------------------------- */

  /* Olive Garden */
  --olive-garden-1: oklch(0.24 0.03 115);
  --olive-garden-2: oklch(0.45 0.06 110);
  --olive-garden-3: oklch(0.68 0.07 105);
  --olive-garden-4: oklch(0.97 0.03 95);
  --olive-garden-5: oklch(0.72 0.11 65);
  --olive-garden-6: oklch(0.57 0.13 50);

  /* Forest */
  --forest-1: oklch(0.87 0.01 95);
  --forest-2: oklch(0.73 0.05 125);
  --forest-3: oklch(0.56 0.08 135);
  --forest-4: oklch(0.41 0.06 145);
  --forest-5: oklch(0.35 0.05 150);

  /* Steel */
  --steel-1: oklch(0.98 0.001 240);
  --steel-2: oklch(0.94 0.002 240);
  --steel-3: oklch(0.9 0.003 240);
  --steel-4: oklch(0.85 0.004 240);
  --steel-5: oklch(0.75 0.005 240);
  --steel-6: oklch(0.54 0.006 240);
  --steel-7: oklch(0.4 0.005 240);
  --steel-8: oklch(0.3 0.004 240);
  --steel-9: oklch(0.2 0.003 240);

  /* Deep Sea */
  --deep-sea-1: oklch(0.48 0.14 255);
  --deep-sea-2: oklch(0.42 0.13 255);
  --deep-sea-3: oklch(0.34 0.11 255);
  --deep-sea-4: oklch(0.24 0.08 255);
  --deep-sea-5: oklch(0.18 0.06 255);
  --deep-sea-6: oklch(0.14 0.05 255);
  --deep-sea-7: oklch(0.32 0.04 250);
  --deep-sea-8: oklch(0.47 0.03 250);
  --deep-sea-9: oklch(0.57 0.02 250);
  --deep-sea-10: oklch(0.65 0.02 250);

  /* Sand */
  --sand-1: oklch(0.94 0.005 85);
  --sand-2: oklch(0.84 0.02 65);
  --sand-3: oklch(0.94 0.02 70);
  --sand-4: oklch(0.87 0.03 55);
  --sand-5: oklch(0.79 0.04 45);

  /* Ocean Breeze */
  --ocean-breeze-1: oklch(0.4 0.15 220);
  --ocean-breeze-2: oklch(0.45 0.15 230);
  --ocean-breeze-3: oklch(0.55 0.18 235);
  --ocean-breeze-4: oklch(0.6 0.16 238);
  --ocean-breeze-5: oklch(0.65 0.15 240);
  --ocean-breeze-6: oklch(0.7 0.13 243);
  --ocean-breeze-7: oklch(0.75 0.12 245);
  --ocean-breeze-8: oklch(0.85 0.08 250);

  /* Sunset Vibes */
  --sunset-vibes-1: oklch(0.3 0.15 25);
  --sunset-vibes-2: oklch(0.4 0.18 30);
  --sunset-vibes-3: oklch(0.5 0.2 35);
  --sunset-vibes-4: oklch(0.6 0.22 40);
  --sunset-vibes-5: oklch(0.65 0.22 45);
  --sunset-vibes-6: oklch(0.7 0.2 48);
  --sunset-vibes-7: oklch(0.75 0.18 50);
  --sunset-vibes-8: oklch(0.85 0.12 55);

  /* Forest Fresh */
  --forest-fresh-1: oklch(0.3 0.1 145);
  --forest-fresh-2: oklch(0.35 0.12 150);
  --forest-fresh-3: oklch(0.45 0.15 155);
  --forest-fresh-4: oklch(0.5 0.16 158);
  --forest-fresh-5: oklch(0.55 0.18 160);
  --forest-fresh-6: oklch(0.6 0.16 163);
  --forest-fresh-7: oklch(0.65 0.15 165);
  --forest-fresh-8: oklch(0.75 0.12 170);

  /* Neon Nights */
  --neon-nights-1: oklch(0.5 0.22 295);
  --neon-nights-2: oklch(0.55 0.25 300);
  --neon-nights-3: oklch(0.58 0.27 305);
  --neon-nights-4: oklch(0.6 0.28 310);
  --neon-nights-5: oklch(0.63 0.29 315);
  --neon-nights-6: oklch(0.65 0.3 320);
  --neon-nights-7: oklch(0.7 0.25 330);
  --neon-nights-8: oklch(0.75 0.2 340);

  /* Earthy Tones */
  --earthy-tones-1: oklch(0.35 0.06 55);
  --earthy-tones-2: oklch(0.4 0.08 60);
  --earthy-tones-3: oklch(0.45 0.09 58);
  --earthy-tones-4: oklch(0.5 0.1 55);
  --earthy-tones-5: oklch(0.55 0.11 53);
  --earthy-tones-6: oklch(0.6 0.12 50);
  --earthy-tones-7: oklch(0.7 0.1 45);
  --earthy-tones-8: oklch(0.8 0.08 40);

  /* Cherry Blossom */
  --cherry-blossom-1: oklch(0.75 0.1 350);
  --cherry-blossom-2: oklch(0.78 0.11 355);
  --cherry-blossom-3: oklch(0.82 0.12 0);
  --cherry-blossom-4: oklch(0.85 0.13 5);
  --cherry-blossom-5: oklch(0.87 0.11 10);
  --cherry-blossom-6: oklch(0.88 0.09 15);
  --cherry-blossom-7: oklch(0.9 0.07 20);
  --cherry-blossom-8: oklch(0.92 0.05 25);

  /* Midnight Blue */
  --midnight-blue-1: oklch(0.25 0.08 250);
  --midnight-blue-2: oklch(0.3 0.1 255);
  --midnight-blue-3: oklch(0.35 0.12 260);
  --midnight-blue-4: oklch(0.4 0.14 265);
  --midnight-blue-5: oklch(0.45 0.15 270);
  --midnight-blue-6: oklch(0.5 0.16 273);
  --midnight-blue-7: oklch(0.55 0.15 275);
  --midnight-blue-8: oklch(0.65 0.12 280);

  /* Lavender Fields */
  --lavender-fields-1: oklch(0.6 0.12 290);
  --lavender-fields-2: oklch(0.65 0.13 292);
  --lavender-fields-3: oklch(0.7 0.14 295);
  --lavender-fields-4: oklch(0.75 0.15 298);
  --lavender-fields-5: oklch(0.78 0.14 300);
  --lavender-fields-6: oklch(0.82 0.12 302);
  --lavender-fields-7: oklch(0.85 0.1 305);
  --lavender-fields-8: oklch(0.88 0.08 308);

  /* Coral Reef */
  --coral-reef-1: oklch(0.55 0.18 15);
  --coral-reef-2: oklch(0.6 0.19 18);
  --coral-reef-3: oklch(0.65 0.2 20);
  --coral-reef-4: oklch(0.68 0.21 22);
  --coral-reef-5: oklch(0.72 0.2 25);
  --coral-reef-6: oklch(0.75 0.18 28);
  --coral-reef-7: oklch(0.8 0.15 30);
  --coral-reef-8: oklch(0.85 0.12 32);

  /* Autumn Leaves */
  --autumn-leaves-1: oklch(0.4 0.15 35);
  --autumn-leaves-2: oklch(0.45 0.17 38);
  --autumn-leaves-3: oklch(0.5 0.18 40);
  --autumn-leaves-4: oklch(0.55 0.2 42);
  --autumn-leaves-5: oklch(0.6 0.2 45);
  --autumn-leaves-6: oklch(0.65 0.18 48);
  --autumn-leaves-7: oklch(0.7 0.16 50);
  --autumn-leaves-8: oklch(0.75 0.14 52);

  /* Arctic Frost */
  --arctic-frost-1: oklch(0.7 0.08 200);
  --arctic-frost-2: oklch(0.75 0.09 205);
  --arctic-frost-3: oklch(0.8 0.1 210);
  --arctic-frost-4: oklch(0.82 0.11 215);
  --arctic-frost-5: oklch(0.85 0.1 220);
  --arctic-frost-6: oklch(0.87 0.09 225);
  --arctic-frost-7: oklch(0.9 0.07 230);
  --arctic-frost-8: oklch(0.93 0.05 235);

  /* Vintage Rose */
  --vintage-rose-1: oklch(0.5 0.1 340);
  --vintage-rose-2: oklch(0.55 0.11 345);
  --vintage-rose-3: oklch(0.6 0.12 350);
  --vintage-rose-4: oklch(0.65 0.13 355);
  --vintage-rose-5: oklch(0.7 0.14 0);
  --vintage-rose-6: oklch(0.75 0.12 5);
  --vintage-rose-7: oklch(0.8 0.1 10);
  --vintage-rose-8: oklch(0.85 0.08 15);

  /* Tropical Paradise */
  --tropical-paradise-1: oklch(0.5 0.2 140);
  --tropical-paradise-2: oklch(0.55 0.21 145);
  --tropical-paradise-3: oklch(0.6 0.22 150);
  --tropical-paradise-4: oklch(0.65 0.22 155);
  --tropical-paradise-5: oklch(0.68 0.2 160);
  --tropical-paradise-6: oklch(0.72 0.18 165);
  --tropical-paradise-7: oklch(0.75 0.16 170);
  --tropical-paradise-8: oklch(0.8 0.14 175);

  /* Desert Sand */
  --desert-sand-1: oklch(0.5 0.1 70);
  --desert-sand-2: oklch(0.55 0.11 68);
  --desert-sand-3: oklch(0.6 0.12 65);
  --desert-sand-4: oklch(0.65 0.13 62);
  --desert-sand-5: oklch(0.7 0.14 60);
  --desert-sand-6: oklch(0.75 0.12 58);
  --desert-sand-7: oklch(0.8 0.1 55);
  --desert-sand-8: oklch(0.85 0.08 52);

  /* Berry Burst */
  --berry-burst-1: oklch(0.4 0.18 330);
  --berry-burst-2: oklch(0.45 0.2 335);
  --berry-burst-3: oklch(0.5 0.22 340);
  --berry-burst-4: oklch(0.55 0.23 345);
  --berry-burst-5: oklch(0.6 0.22 350);
  --berry-burst-6: oklch(0.65 0.2 355);
  --berry-burst-7: oklch(0.7 0.18 0);
  --berry-burst-8: oklch(0.75 0.15 5);

  /* Pastel Dreamland Adventure */
  --pastel-dreamland-adventure-1: oklch(0.82 0.08 285);
  --pastel-dreamland-adventure-2: oklch(0.85 0.08 300);
  --pastel-dreamland-adventure-3: oklch(0.88 0.06 320);
  --pastel-dreamland-adventure-4: oklch(0.86 0.09 340);
  --pastel-dreamland-adventure-5: oklch(0.85 0.1 350);
  --pastel-dreamland-adventure-6: oklch(0.87 0.07 10);
  --pastel-dreamland-adventure-7: oklch(0.88 0.05 220);
  --pastel-dreamland-adventure-8: oklch(0.85 0.07 240);
}