Add this property editor to an Image Media Type in Umbraco to automatically extract colour information from your images.

Add the package to an existing Umbraco website (v15+) from nuget:

dotnet add package OC.MediaColourFinderV2

Once the package is installed, you will have a new property editor which should then be added to a Media Type of "Image". When you upload an image, you can select a focal point (optional) and the package will then calculate the average color, brightest color, opposite colour and text colour. If no focal point is set, the colours are calculated from the entire image.

The calculated colours are then available as properties on the media item, which can be accessed in your views. For example, if you call the new property on the media type "colour finder" it will have an alias colourfinder and can be accessed like :

@{
    var colours = (Model?.Image?.Content as Image)?.ColourFinder;
}

@if (colours != null)
{
    @colours.Average <span style="background-color: @colours.Average;">Average</span>
    <br />
    @colours.Brightest <span style="background-color: @colours.Brightest;">Brightest</span>
    <br />
    @colours.TextColour <span style="background-color: @colours.TextColour;">TextColour</span>
    <br />
    @colours.Opposite <span style="background-color: @(string.IsNullOrEmpty(colours.Opposite) ? "#fff" : colours.Opposite);">Opposite</span>
}

The output will be in HEX format, e.g. #FFFFFF which can then be used in your CSS.

Contributions to this package are most welcome! Please feel free to fork the repository and submit a pull request with your changes.

Thanks to Lee Kelleher for his help with the initial thought process and build of this new version. #h5yr