동적 색상 생성: 디자인 시스템을 위한 알고리즘

// Naive approach — do NOT do this
function hslShades(hue, saturation, steps = 10) {
  return Array.from({ length: steps }, (_, i) => {
    const lightness = 5 + (i / (steps - 1)) * 90;
    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
  });
}

// OKLCH-based shade generation
function oklchShades(baseHex) {
  const { L, C, H } = hexToOklch(baseHex);

  // Lightness stops for a 11-step scale (50–950)
  const lightnessStops = [0.97, 0.93, 0.86, 0.78, 0.68, 0.58, 0.48, 0.39, 0.30, 0.22, 0.15];

  // Chroma curve: peaks at the base color's chroma, tapers toward extremes
  const chromaStops = lightnessStops.map(l => {
    const distance = Math.abs(l - L);
    const falloff = Math.max(0, 1 - distance * 1.5);
    return C * falloff;
  });

  return lightnessStops.map((l, i) => ({
    oklch: `oklch(${l} ${chromaStops[i].toFixed(3)} ${H})`,
    hex: oklchToHex(l, chromaStops[i], H),
  }));
}

// Add subtle hue rotation
function shadeWithHueShift(L_target, C_target, H_base, L_base) {
  const lightnessDelta = L_target - L_base;
  // Shift up to ±10 degrees: warm (−) for light shades, cool (+) for dark
  const hueShift = -lightnessDelta * 15;
  return { L: L_target, C: C_target, H: H_base + hueShift };
}

function findAccessibleTextShade(backgroundHex, shadeScale) {
  const bgLuminance = relativeLuminance(backgroundHex);

  for (const shade of shadeScale) {
    const shadeLuminance = relativeLuminance(shade.hex);
    const ratio = contrastRatio(bgLuminance, shadeLuminance);
    if (ratio >= 4.5) {
      return shade; // First shade that passes
    }
  }
  return shadeScale[shadeScale.length - 1]; // Darkest available
}

function contrastRatio(L1, L2) {
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}

function generateAccessiblePairs(shadeScale) {
  const pairs = {};

  shadeScale.forEach((shade, index) => {
    // Find passing text colors for this background
    const passingShades = shadeScale.filter(textShade => {
      const ratio = contrastRatio(
        relativeLuminance(shade.hex),
        relativeLuminance(textShade.hex)
      );
      return ratio >= 4.5;
    });

    pairs[shade.name] = {
      background: shade.hex,
      textPrimary: passingShades[passingShades.length - 1]?.hex,  // Darkest passing
      textSecondary: passingShades[passingShades.length - 3]?.hex, // Slightly lighter
    };
  });

  return pairs;
}

function deriveNeutralScale(brandOklch) {
  const { H } = brandOklch;
  // Use the brand hue at very low chroma — just enough to feel warm/cool
  const neutralBaseChroma = 0.010;  // Nearly gray, slight hue influence

  return generateOklchShades({
    L: 0.55, C: neutralBaseChroma, H: H
  });
}

:root {
  /* Generated from brand blue #2563EB */
  --color-primary-50:  /* blue scale 50 */;
  --color-primary-600: /* blue scale 600 = brand color */;
  --color-primary-900: /* blue scale 900 */;

  /* Generated from brand hue + desaturated (warm neutral) */
  --color-neutral-50:  /* neutral scale 50 */;
  --color-neutral-900: /* neutral scale 900 */;

  /* Semantic assignments */
  --color-bg-base:           var(--color-neutral-50);
  --color-text-primary:      var(--color-neutral-900);
  --color-action-primary:    var(--color-primary-600);
  --color-action-primary-hover: var(--color-primary-700);
  --color-action-primary-text:  #FFFFFF;
}

function generateCompanions(brandOklch, scheme = 'triadic') {
  const { L, C, H } = brandOklch;
  const rotations = {
    complementary: [180],
    triadic: [120, 240],
    analogous: [30, -30],
    split_complementary: [150, 210],
  };

  return rotations[scheme].map(rotation => ({
    L, C,
    H: (H + rotation + 360) % 360
  }));
}

// Light mode: background uses light shades, text uses dark shades
// Dark mode: invert the background/text relationship

const LIGHT_TO_DARK_MAP = {
  // Background shades: reflect
  50:  900, 100: 800, 200: 700,
  // Mid-range shades: adjust slightly
  300: 700, 400: 600, 500: 500,
  600: 400, 700: 300, 800: 200,
  // Text shades: reflect
  900: 100, 950: 50,
};

function generateDarkTokens(lightTokens, shadeScale) {
  return Object.entries(lightTokens).reduce((dark, [token, shade]) => {
    const darkShadeIndex = LIGHT_TO_DARK_MAP[shade.index];
    dark[token] = shadeScale[darkShadeIndex];
    return dark;
  }, {});
}

function darkSurfaceColor(oklch) {
  return {
    ...oklch,
    L: oklch.L * 0.3,        // Much darker
    C: oklch.C * 0.6,        // Reduce chroma to avoid harshness
  };
}

function darkInteractiveColor(oklch) {
  return {
    ...oklch,
    L: Math.min(0.75, oklch.L + 0.15),  // Lighter for visibility
    C: oklch.C,               // Keep full chroma for vibrancy
  };
}

:root {
  /* Light mode */
  --color-bg-base:       oklch(0.97 0.01 264);
  --color-bg-surface:    oklch(1.00 0.00 0);
  --color-text-primary:  oklch(0.18 0.03 264);
  --color-action-primary: oklch(0.55 0.21 264);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Auto-generated dark mode */
    --color-bg-base:       oklch(0.16 0.02 264);
    --color-bg-surface:    oklch(0.22 0.02 264);
    --color-text-primary:  oklch(0.93 0.01 264);
    --color-action-primary: oklch(0.70 0.21 264);
  }
}

npm install @radix-ui/colors

import { blue, blueDark } from '@radix-ui/colors';
// blue.blue9 — the most vivid blue, light mode
// blueDark.blue9 — the equivalent in dark mode

import { oklch, formatHex, interpolate, samples } from 'culori';

const brandOklch = oklch('#2563EB');
const scale = samples(11).map(t => ({
  t,
  color: formatHex({
    mode: 'oklch',
    l: 0.15 + t * 0.82,    // L from 0.15 (dark) to 0.97 (light)
    c: brandOklch.c * Math.sin(t * Math.PI),  // Chroma peaks at mid-tone
    h: brandOklch.h,
  })
}));

{
  "color": {
    "primary": {
      "600": { "value": "oklch(0.55 0.21 264)", "comment": "Brand blue" }
    }
  }
}