/* Background */
background: #FF00FF;

/* Text Color */
color: #FF00FF;

/* Border */
border: 2px solid #FF00FF;

:root {
  --magenta: #FF00FF;
}

.element {
  background: var(--magenta);
}

const primaryColor = "#FF00FF";

<div style={{ color: primaryColor }}>
  Hello World
</div>

<!-- Tailwind -->
<div class="bg-[#FF00FF] text-white p-4">
  Content here
</div>

// Custom Config
module.exports = {
  theme: {
    colors: {
      magenta: '#FF00FF'
    }
  }
}

background: linear-gradient(
  135deg, 
  #FF00FF, 
  #00FFFF
);

background: radial-gradient(
  circle, 
  #FF00FF, 
  transparent
);

.button {
  background: white;
  color: #FF00FF;
  border: 2px solid #FF00FF;
  transition: 0.3s;
}

.button:hover {
  background: #FF00FF;
  color: white;
}