How would i be able to get the dominant colors in a image?

Help and Feedback Scripting Support
#1

hello, i am trying to make a gui but i want the UI color to be based off the most dominant colors on the players avatar, i’ve looked at the other post about this, but it got me no where. any help appreciated

#2

if you want to see the color of the shirt, i personally think it would be to much trouble for the outcome. Although i am no expert in how roblox handles their data or if there is any other methods, i do have a suggestion. I think this would require a third party application to get the most common color. Im sure there is already tons of apis out there to solve this problem

#3

If you can get the image id of the shirt, you can create an EditableImage using it. Then with that you can read the pixel data and get the average color, or sort the most popular similar colors into a table.

Edit: id just like to add on, if performance is an issue, you can loop through only every other pixel to sample from, or even every 3rd pixel, etc

#4

Load the clothing textures as editable images using AssetService:CreateEditableImageAsync(textureId) and then call ReadPixels on the image to get the pixels in a one dimensional RGBA array with float numbers from 0 to 1. Then based on that array you can perform calculations with the pixels themselves to find out the most dominant color.

PS: If you plan to use this for specific clothing assets, such as shirts and pants, make sure to only add the visible colors in the algorithm that will give you the dominant color and not the template colors(that may contain group trademarks, etc) that aren’t visible when a player wears said shirt/pants.

1 Like
#6

could i do it using the players avatar image?

#7

This is what I would do:

local function getVisibleColors(pixels: {number}): {Color3}
	local colors = {}
	for i = 1, #pixels, 4 do
		if pixels[i+3] == 0 then continue end
		local c = Color3.new(pixels[i], pixels[i+1], pixels[i+2]) 
		table.insert(colors, c)
	end
	return colors 
end

local userId = 1
local thumbnailType = Enum.ThumbnailType.HeadShot 
--we intentionally fetch a very small version of the image 
--also those functions may fail and need error handling
local avatarUrl = game.Players:GetUserThumbnailAsync(userId, thumbnailType, Enum.ThumbnailSize.Size48x48)
local image = game.AssetService:CreateEditableImageAsync(avatarUrl)

local pixels = image:ReadPixels(Vector2.zero, image.Size)
local visibleColors = getVisibleColors(pixels)

--This is a list of all the visible color3s in the image
--You can use them to determine the dominant color based on some algorithm
print(#visibleColors)

You still need to implement an algorithm for determining the dominant color based on a list of color3s.

1 Like