About Unique Colors for Dynamic Elements

To ensure color uniqueness for diagrams and other interactive dynamic elements, use hsl() or hsla() colors in CSS, for example:

1
2
3

.django {
    background: hsla(157deg, 67%, 11%, 100%);
}

• h stands for hue. It's a color from a color wheel or spectrum, from 0deg (red) to 360deg (red again).
• s stands for saturation. It's how colorful the color will be, from 0% (grayscale) to 100% (colorful).
• l stands for lightness. It's how light the color will be, from 0% (black) to 100% (white).
• a stands for alpha. It's how opaque the color will be, from 0% (transparent) to 100% (opaque).

You can set those parameters for different interactive elements via JavaScript, or Sass scripts, or Python.