Sort hex colors by gradient

kauan014 · 06 May 2021, 01:35

Would like to ask if someone has any script in which could help sort hex colors by their gradient.

Spoiler

Sample:

Rohwedder · 06 May 2021, 02:38

Hallo,
all single colors have a gradient of 0.
https://en.wikipedia.org/wiki/Color_gradient
To sort by gradients you need at least pairs of colors.

06 May 2021, 06:01

Perhaps this article on sorting colors would be instructive on selecting an approach for this sort.

kauan014 · 06 May 2021, 12:04

Rohwedder wrote: ↑
06 May 2021, 02:38
Hallo,
all single colors have a gradient of 0.
https en.wikipedia.org /wiki/Color_gradient Broken Link for safety
To sort by gradients you need at least pairs of colors.

I read the article you have send, I thought it could be sort by gradient, well any kind of sorting increasing from color 1 light > to color 1 dark, color 2 light > to color 2 dark, etc, would help.

06 May 2021, 13:02

This sorts them in order of increasing overall brightness, with a before and after visual comparison:

Code: Select all

gosub, AssignColorList
Sort, ColorList, F ColorCompare
Gui, Add, Text, w100 Center, Original
Gui, Add, Text, x+20 w100 Center, Sorted
loop, Parse, ColorList, `n
{
	Gui, Add, Progress, % " xm y" (30 + A_Index) " w100 h1 Background" UnsortedList[A_Index]
	Gui, Add, Progress, x+20 yp w100 h1 Background%A_LoopField%
}
ColorList := "#" StrReplace(ColorList, "`n", "`n#")
Gui, Add, Edit, xm+15 r10, % OriginalList
Gui, Add, Edit, xp+115 r10, % ColorList
Gui, Add, Edit, x-200 yp vDummy
GuiControl, Focus, Dummy
Gui, Show
return

GuiClose:
ExitApp

ColorCompare(c1, c2) {
	return Brightness(c1) - Brightness(c2)
}

Brightness(c) {
	r := "0x" SubStr(c, 1, 2), r += 0
	g := "0x" SubStr(c, 3, 2), g += 0
	b := "0x" SubStr(c, 5, 2), b += 0
	return r + g + b
}

AssignColorList:
ColorList =
(
#2CD606
#3BDE12
#50E624
#6BF73E
#8DFB65
#3DAF21
#39AB1E
#3DAE21
#2ED209
#2FC70B
#2FD405
#2FD502
#30D406
#33E212
#34E409
#37A81B
#37AC1B
#37AC1C
#37B11D
#37D918
#38A71C
#38AA1C
#39AA1D
#3B981D
#3BAB1E
#3BDB12
#3BDC17
#3BDD13
#3BDE0F
#3CAE20
#3CDD12
#3CDE10
#3DDC14
#3EAE20
#3EB023
#3EDC10
#3FAD21
#3FB123
#46E726
#4BE721
#4BEB1F
#4CE727
#4FE626
#4FE71F
#50E527
#50E622
#51E525
#53E22A
#53E425
#62F738
#63F636
#68F83C
#69F640
#6AF63C
#6BF640
#6BF643
#6BF741
#6CF442
#6CF542
#70F146
#83FC5D
#88F955
#8BFB64
#8EFB67
#8EFB69
#8EFB6B
#92F96E
#92F96F
#93FA6B
#EA00FF
#907F76
#35B817
#63CCE0
#58ABB7
#6F5F5B
#8D7D71
#918177
#9F8F80
#A49386
#2AD104
#416028
#50A1AC
#5D4E45
#6CA54E
#918275
#52D6F6
#77AF5B
#58BCCF
#32D2FE
#48D8FC
#45652F
#49762D
#413632
#4BD8FC
#56CCE6
#57B8C9
#423C3E
#2C9BBC
#899B7A
#85766A
#5F5150
#688553
#45878C
#58DCFC
#25C8F4
#38D3FC
#20CDFC
#26C8F4
#2895B6
#638B55
#20C0EC
#798C67
#2ACFFC
#36B9DE
#7A8C67
#3DD5FC
#7B8373
#CEC9C8
#3F8297
#413937
#23C4F0
#574F4F
#6F6259
#786964
#3D3333
#8F8D8E
#22CCFA
#28BBE3
#534B49
#B4AEAC
#504445
#847A7A
#B9B7B4
#BCB5B4
#433839
#537D85
#595254
#837B7A
#899B7B
#B7B2AF
#CFC8C8
#D4D4D6
#2B9CBC
#399C21
#5A5355
#675950
#6E6158
#7C8374
#25C9F4
#30849F
#31B5D9
#34B916
#4E4640
#665950
#84756A
#B6ADAD
#B8B9B3
#B9B0B0
#D0D0D2
#27C5EF
#2885A2
#34B9DE
#34BA16
#45652E
#515158
#534B48
#534B4C
#615A5D
#635A56
)
OriginalList := ColorList
ColorList := StrReplace(ColorList, "#")
UnsortedList := StrSplit(ColorList, "`n")
return

Rohwedder · 07 May 2021, 00:36

The rec601 luma (Y') component is computed as:
Y ′ = 0.299 R ′ + 0.587 G ′ + 0.114 B ′
https://en.wikipedia.org/wiki/Grayscale
Better use:

Code: Select all

Brightness(c) {
	r := "0x" SubStr(c, 1, 2), r += 0
	g := "0x" SubStr(c, 3, 2), g += 0
	b := "0x" SubStr(c, 5, 2), b += 0
	return 0.299*r + 0.587*g + 0.114*b
}

07 May 2021, 07:04

Good suggestion. Confirmed visually that it ranks them better.

swagfag · 08 May 2021, 17:48

what even means to sort colors? they all look pretty unsorted to me

: image.png (15.76 KiB) Viewed 1027 times

Code: Select all

ColorCompare(c1, c2) {
	ColorRGBToHLS("0x" c1, h1, l1, s1)
	ColorRGBToHLS("0x" c2, h2, l2, s2)

	if h1 < h2
		return -1
	if h1 > h2
		return 1

	if l1 < l2
		return -1
	if l1 > l2
		return 1

	if s1 < s2
		return -1
	if s1 > s2
		return 1

	return 0 ; both HSL are equal
}

ColorRGBToHLS(rgb, ByRef h, ByRef l, ByRef s) {
	static Shlwapi := DllCall("LoadLibrary", "Str", "Shlwapi.dll", "Ptr")
	static ColorRGBToHLS := DllCall("GetProcAddress", "Ptr", Shlwapi, "AStr", "ColorRGBToHLS", "Ptr")

	r := (rgb & 0xFF0000) >> 16
	g := (rgb & 0x00FF00)
	b := (rgb & 0x0000FF) << 16
	bgr := r | b | g ; COLORREF format is 0x00BBGGRR

	DllCall(ColorRGBToHLS, "UInt", bgr, "UShort*", h := 0, "UShort*", l := 0, "UShort*", s := 0)
}

08 May 2021, 19:07

The "Brightness" and especially "Brightness Weighted" clearly go from darker/dimmer to brighter, at least to my eye. Especially when comparing the colors on the extreme ends to each other, It's not even a question that ones at the bottom are the brightest and the ones at the top are the dimmest.

The "HSL" looks at least grouped by hues, but I can't see a progression like the ones sorted by brightness. I would say that they have clearly been arranged by hue, whether you want to call that a sort or not.

rommmcek · 10 May 2021, 01:36

Here is a formula for Perceived Brightness.

10 May 2021, 06:37

That does result in the smoothest looking brightness gradient.

: brightness sort comparison.png (23.2 KiB) Viewed 964 times

Code: Select all

Brightness(c) {
	r := "0x" SubStr(c, 1, 2), r += 0
	g := "0x" SubStr(c, 3, 2), g += 0
	b := "0x" SubStr(c, 5, 2), b += 0
	return Sqrt(0.241 * r ** 2 + 0.691 * g ** 2 + 0.068 * b ** 2)
}

Sort hex colors by gradient Topic is solved

Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient Topic is solved

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Re: Sort hex colors by gradient

Who is online