CSS Relative Color Generator

/* CSS Relative Color Syntax - Generated by Brix340 Tools */

/* Base Color: #3498db */
/* Transformation: No transformation */

/* Basic Usage */
.element {
  background-color: hsl(from #3498db h s l);
}

/* With CSS Custom Properties */
:root {
  --color-base: #3498db;
  --color-transformed: hsl(from var(--color-base) h s l);
}

/* Common Relative Color Transformations */
.lighten {
  background-color: hsl(from #3498db h s calc(l + 20%));
}

.darken {
  background-color: hsl(from #3498db h s calc(l - 20%));
}

.saturate {
  background-color: hsl(from #3498db h calc(s + 30%) l);
}

.desaturate {
  background-color: hsl(from #3498db h calc(s - 30%) l);
}

.complement {
  background-color: hsl(from #3498db calc(h + 180) s l);
}

/* Advanced Transformations */
.grayscale {
  background-color: hsl(from #3498db h 0% l);
}

.semi-transparent {
  background-color: hsl(from #3498db h s l / 50%);
}

.warmer {
  background-color: oklch(from #3498db l c calc(h - 30));
}

.cooler {
  background-color: oklch(from #3498db l c calc(h + 30));
}

/* Interactive States */
.button {
  --btn-color: #3498db;
  background-color: var(--btn-color);
  transition: background-color 0.2s;
}

.button:hover {
  background-color: hsl(from var(--btn-color) h s calc(l + 10%));
}

.button:active {
  background-color: hsl(from var(--btn-color) h s calc(l - 10%));
}

/* Fallback for Older Browsers */
.element {
  background-color: #3498db; /* Fallback */
  background-color: hsl(from #3498db h s l);
}

/* @supports Feature Detection */
@supports (background: hsl(from red h s l)) {
  .modern-relative-color {
    background-color: hsl(from #3498db h s l);
  }
}