Making a colour field

[Leo_Red]

Hi, I was making a pixel editor in python using pygame. So, I was checking sites to how to do specific things before starting and I did not find a way to make a colour field using pygame or any other libs I can use with pygame (Not sure with GUI libs). I could just stick with a simple RGB slider, but that is very annoying to use and not very intuitive to use. Alpha value would also be useful (RGBA). I am like using a colour field, but a colour field would also be fine.I would really need some help with this as I am not an expert. If you are cunfused what a "colour field" is, here is a photo(Because I was),

colour field:
https://www.google.com/search?q=RGBA+col...B_DG1lnt2M

colour wheel:
https://www.google.com/search?q=RGBA+col...9kLsFH4D-M

[BashBedlam]

This code originally ran in python2 but it still works. Get a picture of the color field of your choice and name it img.bmp (converting to bmp of course) or change the line :

image = pygame.image.loadi ("./img.bmp")

to whatever the name of your image is. Put it in the same folder with this and run the code. It will print out the RGBA (RGB plus Alpha) of the pixel that you clicked on. Hope this helps.

import sys, pygame
pygame.init ()
size = width, height = 320, 240
screen = pygame.display.set_modei (size)
image = pygame.image.load ("./img.bmp")
image_rect = image.get_rect()

screen.fill ((0,0,0))
screen.blit (image, image_rect)
screensurf = pygame.display.get_surface ()

looking_for_color = True
while looking_for_color:
	for event in pygame.event.get ():
		if event.type == pygame.QUIT :
			looking_for_color = False
		if event.type == pygame.MOUSEBUTTONDOWN :
			mouse = pygame.mouse.get_pos()
			pxarray = pygame.PixelArray(screensurf)
			pixel = pygame.Color(pxarray[mouse[0],mouse[1]])
			print (pixel)
			print (screensurf.get_at(mouse))
	pygame.display.flip()

[Leo_Red]

This code originally ran in python2 but it still works. Get a picture of the color field of your choice and name it img.bmp (converting to bmp of course) or change the line :

image = pygame.image.loadi ("./img.bmp")

to whatever the name of your image is. Put it in the same folder with this and run the code. It will print out the RGBA (RGB plus Alpha) of the pixel that you clicked on. Hope this helps.

import sys, pygame
pygame.init ()
size = width, height = 320, 240
screen = pygame.display.set_modei (size)
image = pygame.image.load ("./img.bmp")
image_rect = image.get_rect()

screen.fill ((0,0,0))
screen.blit (image, image_rect)
screensurf = pygame.display.get_surface ()

looking_for_color = True
while looking_for_color:
	for event in pygame.event.get ():
		if event.type == pygame.QUIT :
			looking_for_color = False
		if event.type == pygame.MOUSEBUTTONDOWN :
			mouse = pygame.mouse.get_pos()
			pxarray = pygame.PixelArray(screensurf)
			pixel = pygame.Color(pxarray[mouse[0],mouse[1]])
			print (pixel)
			print (screensurf.get_at(mouse))
	pygame.display.flip()

Thank you so much, it works perfectly!! I was not able to find a image of a colour field (Mostly because I don't know it's exact name) But, I was able to find a colour wheel. One other doubt about it, how can I get the RGB value of all the pixels in the colour wheel? I need this as I am trying to also be able to enter a HEX value and it will move the colour picker(The circle thingy that shows which colour is selected on the colour wheel) on the colour wheel to that entered colour , To put easliy, show the colour value entered (HEX), on the colour wheel by moving the colour picker cursour to that colour. Other ideas of doing it would also be helpful. Sorry, for asking alot. I can't really search this question as it is very specific. But, really thank you for this, this is very cool and I could have not done it without your help

[BashBedlam]

What you’re asking for in your second question will require that you to map out every pixel in your color field image. It seems to me that there are easier ways to accomplish selecting a color from a hex entry but if that’s what you want, you could do it with a ‘for’ loop and a modified version of the color picker code that I just posted.

[Leo_Red]

What you’re asking for in your second question will require that you to map out every pixel in your color field image. It seems to me that there are easier ways to accomplish selecting a color from a hex entry but if that’s what you want, you could do it with a ‘for’ loop and a modified version of the color picker code that I just posted.

Really thanks, I have reached a state where I can find that colour from the array. But, I don't know that colour value's position in the colour wheel (so that I can move the colour picker cursour to that colour position). I am really sorry if it is getting repetitive, 😞 I am not understanding the pygame docs well, I think I am missing something. Thanks for still helping ❤️

[BashBedlam]

But, I don't know that colour value's position in the colour wheel (so that I can move the colour picker cursour to that colour position)

The variable mouse contains the cursor location when you click on a color. Try adding print (mouse) along with the other print statements.

[Leo_Red]

But, I don't know that colour value's position in the colour wheel (so that I can move the colour picker cursour to that colour position)

The variable mouse contains the cursor location when you click on a color. Try adding print (mouse) along with the other print statements.

I don't think you get what I mean. So, I am also adding a option to chose a colour using HEX too as a colour field cannot always be used to accurately choose a colour. So, when I input a HEX value, I want the colour field to show that colour from it. Like, if I input a colour I don't want the HEX value to show red and the colour field still be showing something like green, which will make a user confused. I want it to be uniformed. So, what I have made till now is, the colour field can find the HEX value from the colour field. But, I am not able to find where the colour is located in the colour field. I have some ideas to find it, but haven't tried if it works. Sorry, if it is getting repetitive. Thanks for helping <3

[BashBedlam]

What do you mean when you say "the color field is still showing green"? Did you change the image to show only green? Is the cursor on a green pixel? Clicking on a pixel does not change anything it only reports the position and color values. Entering hex values does not change the color field image.

[Leo_Red]

What do you mean when you say "the color field is still showing green"? Did you change the image to show only green? Is the cursor on a green pixel? Clicking on a pixel does not change anything it only reports the position and color values. Entering hex values does not change the color field image.

Yes, I want the cursor on that pixel. Here is a image of what I need:

First image: https://drive.google.com/file/d/15aYWuf-...sp=sharing
This is the colour wheel in GIMP

Second image: https://drive.google.com/file/d/1dfyIodQ...sp=sharing
When I change the RGB slider, the wheel changes to show that colour. In my case, it is HEX value instead of the RGB slider.

So, I have also found a way to get the location of the pixel on the colour wheel. Now, another problem, all the images I used don't have pure values, like it does not have 0, 255, 0 (green) instead it is 1, 255, 3. So, if the user inputs 0, 255, 0 (HEX: #00FF00), the program wouldn't be able to find that colour and give an error. I tried making one using the PIL lib and then saving that created image, still not fixed. So, is there a format that retain all the pixel values or any way to draw one on a surface in pygame? Really thank for helping

[BashBedlam]

A single image with every color value would have to contain at least 16,581,375 pixels. In your illustration of the gimp color selector the outer ring selects the basic color and the inner triangle selects the hue. I've never attempted anything like that so I don't think I can help. I can say that if you want that small ring indicating where on the triangle the hex value will land, you will have to use a list or dictionary to map out every pixel on that triangle and then use those coordinates to place the indicator.
A less ambitious approach would be to offer a pallet of ten or twenty colors with the option to add ten or twenty "cumtom" colors entered by the user as hex values. Something like this : [Image: palette.png]