Search code examples
c#csscolorsblazorblazor-webassembly

Getting Colour from HTML Element

I'm trying to create a re-usable component on my Blazor Application, that allows another developer to input one colour (for the background), and then colour when rendering the component will calculate the text and other colours that are needed for the component. At the moment, I can input the Background Colour, but then I can't find out how to convert the colour (string format) to a HSL to use any Css calc() tricks on.

/// <summary>
/// Define the colour of the card. It can accept any string value. The default is #DEF4F58C Hexadecimal.
/// </summary>
[Parameter] public string BackgroundColour { get; set; } = "#DEF4F58C";

This is the parameter that is passed, but I need help understanding how to get this colour into a HSL format for reusability.

Solution

  • You can apply HEX to HSL transformation, described for JS here Alternatively, you can use a NuGet like this one: ColorHelper