nitropage/src/features/admin/css/colors.css

A free and open source, extensible visual page builder based on SolidStart.

/** np-slate
 * https://www.tints.dev/slate/8887A2
 * Value (500): #8887A2
 * Hue: 3
 * Sat: Light: 1 / Dark: 0
 * Lum Max: 104
 * Lum Min: -2
 * Mode: Light: Luminance / Dark: Lightness
 */

/** np-accent
 * https://www.tints.dev/accent/9147ED
 * Value (500): #9147ED
 * Hue: Light: -3 / Dark: 1
 * Sat: Light: +2 / Dark: -2
 * Li Max: 102
 * Li Min: 18
 * Mode: Lightness
 */

:root {
  --np-slate-50: oklch(98.27% 0.003 286.35);
  --np-slate-100: oklch(95.73% 0.007 295.45);
  --np-slate-200: oklch(91.31% 0.015 294.44); /* fine tuned L, Orig = 89.62% */
  --np-slate-300: oklch(83.41% 0.024 293.98);
  --np-slate-400: oklch(74.67% 0.031 289.79);
  --np-slate-500: oklch(63.37% 0.04 286.89);
  --np-slate-600: oklch(52.44% 0.047 289.25);
  --np-slate-700: oklch(42.81% 0.036 291.04);
  --np-slate-800: oklch(32.21% 0.025 294.79);
  --np-slate-900: oklch(21.57% 0.014 298.23); /* fine tuned L, Orig = 20.57% */
  --np-slate-950: oklch(13.95% 0.005 308.45); /* fine tuned L, Orig = 14.21%*/

  --np-slate-400-alt: oklch(74.67% 0.025 289.79); /* fine tuned C */

  --np-gray-50: #f9fafb;
  --np-gray-100: #f3f4f6;
  --np-gray-200: #e5e7eb;
  --np-gray-300: #d1d5db;
  --np-gray-400: #9ca3af;
  --np-gray-500: #6b7280;
  --np-gray-600: #4b5563;
  --np-gray-700: #374151;
  --np-gray-800: #1f2937;
  --np-gray-900: #111827;
  --np-gray-950: #030712;

  --np-accent-50: oklch(97.45% 0.013 295.33);
  --np-accent-100: oklch(92.4% 0.04 296.67);
  --np-accent-200: oklch(81.65% 0.101 298.36);
  --np-accent-300: oklch(72.95% 0.152 298.84);
  --np-accent-400: oklch(65.01% 0.197 299.17);
  --np-accent-500: oklch(57.78% 0.235 299.23);
  --np-accent-600: oklch(51.71% 0.255 297.03);
  --np-accent-700: oklch(45.51% 0.226 297.98);
  --np-accent-800: oklch(39.62% 0.188 299.72);
  --np-accent-900: oklch(32.67% 0.145 302.17);
  --np-accent-950: oklch(29.53% 0.122 304.57);

  /** Tailwind 600 */
  --np-error-foreground: oklch(0.59 0.22 18);
  --np-success-foreground: oklch(0.6 0.13 163);
}