Tailwind + CIELAB

Attention needed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.

There were 2 errors with your submission

Your password must be at least 8 characters
Your password must include at least one pro wrestling finishing move

Order completed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Order completed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Code

    
  const labred = chroma.lab(50, 100, 100);
  const labpink = chroma.lab(50, 100, 0);
  const labyellow = chroma.lab(50, 0, 100);
  const labgreen = chroma.lab(50, -100, 100);
  const labsky = chroma.lab(50, -100, -100);
  const labblue = chroma.lab(50, 0, -100);
  const labpurple = chroma.lab(50, 100, -100);
  const labgray = chroma.lab(50, 0, 0);

  const tailwindColors = (chromaObject) => {
    return {
      50: chromaObject.brighten(2.5).hex(),
      100: chromaObject.brighten(2.0).hex(),
      200: chromaObject.brighten(1.5).hex(),
      300: chromaObject.brighten(1.0).hex(),
      400: chromaObject.brighten(0.5).hex(),
      500: chromaObject.brighten(0.0).hex(),
      600: chromaObject.brighten(-0.5).hex(),
      700: chromaObject.brighten(-1.0).hex(),
      800: chromaObject.brighten(-1.5).hex(),
      900: chromaObject.brighten(-2.0).hex(),
    }
  }

  const tailwindLinearGradientColors = (colorName) => {
    const colorObjects = {
      labred,
      labpink,
      labyellow,
      labgreen,
      labsky,
      labblue,
      labpurple,
      labgray,
    }

    const results = {}
    results[colorName + 'lg-50'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].brighten(2.5).hex() + ', ' + colorObjects[colorName].brighten(2.0).hex() + ')'
    results[colorName + 'lg-100'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].brighten(2.0).hex() + ', ' + colorObjects[colorName].brighten(1.5).hex() + ')'
    results[colorName + 'lg-200'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].brighten(1.5).hex() + ', ' + colorObjects[colorName].brighten(1.0).hex() + ')'
    results[colorName + 'lg-300'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].brighten(1.0).hex() + ', ' + colorObjects[colorName].brighten(0.5).hex() + ')'
    results[colorName + 'lg-400'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].brighten(0.5).hex() + ', ' + colorObjects[colorName].hex() + ')'
    results[colorName + 'lg-500'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].hex() + ', ' + colorObjects[colorName].darken(0.5).hex() + ')'
    results[colorName + 'lg-600'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].darken(0.5).hex() + ', ' + colorObjects[colorName].darken(1.0).hex() + ')'
    results[colorName + 'lg-700'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].darken(1.0).hex() + ', ' + colorObjects[colorName].darken(1.5).hex() + ')'
    results[colorName + 'lg-800'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].darken(1.5).hex() + ', ' + colorObjects[colorName].darken(2.0).hex() + ')'
    results[colorName + 'lg-900'] = 'linear-gradient(to bottom, ' + colorObjects[colorName].darken(2.0).hex() + ', ' + colorObjects[colorName].darken(2.5).hex() + ')'

    return results;
  }

  tailwind.config = {
    theme: {
      extend: {
        colors: {
          labred: tailwindColors(labred),
          labpink: tailwindColors(labpink),
          labyellow: tailwindColors(labyellow),
          labgreen: tailwindColors(labgreen),
          labsky: tailwindColors(labsky),
          labblue: tailwindColors(labblue),
          labpurple: tailwindColors(labpurple),
          labgray: tailwindColors(labgray)
        },
        backgroundImage: {
          ...tailwindLinearGradientColors('labred'),
          ...tailwindLinearGradientColors('labpink'),
          ...tailwindLinearGradientColors('labyellow'),
          ...tailwindLinearGradientColors('labgreen'),
          ...tailwindLinearGradientColors('labsky'),
          ...tailwindLinearGradientColors('labblue'),
          ...tailwindLinearGradientColors('labpurple'),
          ...tailwindLinearGradientColors('labgray'),
        }
      }
    }
  }