This content originally appeared on DEV Community and was authored by Jamie Mc Manus
Scenario
You decide to let the users of your application set the preferred colour of an item - this could anything from a simple card to an list item on a Kanban board. This is a straightforward feature and common enough but it can wreak havoc on any foreground text that we place over it, like what happens if our text is white and they choose a light colour ?
Your text will have the visibility of a ghost ?.
This isn't good. Our foreground text is gone and its because we gave the user an input in the application style, but fear not, the battle hasn't been lost yet.
Le Solution
What if we could check how dark / bright the colour the user selected is ?
We could change the colour of the foreground text dynamically to be visible. To do this we need to find the Luminosity of the background colour, which is a measure of how bright or dark a hue is.
Code
Create a Service folder in your project and create a new class Luminosity.cs . Within this class we'll keep our helper methods for the task.
We need to first get the luminance of the background colour , then using this value return a colour between white and black. The Luminance will be a double between 0 (black) and 1(white), and we'll then translate this into an RGB value.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
namespace sampleproject.Services
{
public static class Luminosity
{
public static double GetLuminosity(string colour)
{
//Convert html colour to Color Object
Color color = ColorTranslator.FromHtml(colour);
//Get the Luminancce value from the converted color.
double luminance = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B) / 255;
return luminance;
}
public static string GetColour(string colour)
{
double luminance = GetLuminosity(colour);
// Translate the luminance to RGB values
int c = (255 - Convert.ToInt32( luminance * 255)) ;
var color = $"rgb({c},{c},{c})";
return color;
}
}
}
Razor View
Now within the Razor View we can use the helper method to change the value of the foreground text.
@using sampleproject.Services;
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="card-container">
@foreach (var item in Model)
{
var style = "";
style = "background-color:" + item.Primarycolor + ";color:"+Luminosity.GetColour(item.Primarycolor)+";";
<div class="card" style="@style">
.....card content
</div>
}
</div>
The Result
With the above code we should get a result roughly like the below.
The colour of the foreground text should always be on the opposite end of the scale to the background text.
Credits
Cover Photo by Ruvim Noga on Unsplash
This content originally appeared on DEV Community and was authored by Jamie Mc Manus
Jamie Mc Manus | Sciencx (2021-05-09T21:07:22+00:00) Changing text colour based on background colour luminosity. Retrieved from https://www.scien.cx/2021/05/09/changing-text-colour-based-on-background-colour-luminosity/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.