Create an RGB Color Designer Application using Python!

what's going on you guys welcome back to the channel and today's video is going to be designing this rgb color designer app inside of python [Music] okay so the purpose of this app is almost every application whether using c-sharp or python or a plug-in or anything else most colors in the computer are either hexadecimal or rgb rgb being essentially this just list of three coordinates that can be zero to two five five zero to two five five zero to two five five for an r value a g value and a b value meaning red green and blue and needing to know specific colors and design for your colors is a really useful tool and then this is a fun python exercise as well to understand how colors and designing colors works so this project is going to be basically divided up into three main pieces we're going to start by setting up our pi game module and just creating kind of the framework that will allow us to have a graphical user interface the second piece is going to be drawing all of the specific things we'll need for our application into the window and then the third piece which is going to go pretty quickly is just handling the user input so that you can actually interact and change your colors so without any further ado let's get into it all right so the first part is setting up the pie game game and to start you always are just going to import pie game you may need to run pip to install it if you want to use something else like tkinter or kivi to do this same type of project you can pi game is just super user friendly and so if you're going to do it on a computer then this is not a bad way to go about it and then do pygame. in it to initialize it and what i always like to do is drop a few colors just right away so i know this is a color app designer so it might not make sense but actually i think if we just make like white black and uh let's do red green and blue real quick that's gonna give us a few colors so that when we want to type these things onto the screen we don't have to put an rgb value we can just reference the variable that's storing it and that'll make more sense in just a second when we get to the piece of actually writing stuff onto the screen but okay a few things you're going to do every time you do a pie game project you're going to want to create a font if you're going to have any text at all in the game which almost every game is and to do that you do whatever variable name you're giving it i just call mine font pie game dot font dot font with a capital f and that only needs two arguments it needs the font file name and i like to use freesands bold because it's built in with python at least my python install but you can import a ttf file for your own font and then a font size so i'll give it 40 and then that's going to be pretty big so i will also just make a small font and this is what you're going to have to do if you want different text sizes so like you want some key title text and then you also want some secondary text you have to make separate fonts for each of those so it's just the exact same pie game.font.font and then give it a name freesandsbold.ttf and we'll make this one 20 we'll make it half the size of the other one okay and now we're going to do pygame dot display dot set caption so this is the text that pops up at the top of your window and you just want to give it a title that'll you know tell tell the person what kind of uh app they're in and so this will be an rgb color picker and then uh the next piece is you wanna create your actual screen so the size um of the window that you're gonna have pygame.display mode and then all you have to do is in these square brackets for a list all you have to do is give it a width and a height now you could just type values in here i like to make my window scalable so i usually put width and height into variables and i like doing it that way so we'll do width of 700 height of 600 and we'll you can kind of see after we design this as long as we design it the right way you can just come up here change those variables and as long as everything's positioned in our window is referencing those variables then we can immediately resize it without having to change the layout so that's a super useful tip and then uh last thing before we get into actually like having the screen on screen is you want to set up a timer and you want to set that equal to pi game dot clock with a capital c i believe pygame dot time dot clock with a capital c um and this clock is going to be what controls the speed of your game along with you could just type punch it in again but i'm gonna put a frame rate in fps in a variable and we're going to use that right away so let's go ahead and actually create the game loop now set this variable running equal to true when your game starts up and then say wall running so this is uh oop you don't need to call in there so this is how you set up what i like to call the main game loop and you're going to do this for every pi game game you're going to whatever conditions there may be you want a menu to load up when the game starts and you don't actually start until you hit like the start button on that menu whatever it is once that button has been initialized you use a while loop and everything inside of the while loop is going to be like your main game actions okay and so just to get a screen up we'll do timer.tick at our frame rate and then we'll do screen dot fill and here's where you could just type in because all you need to do here is give it a color you could just type in zero zero zero but i like to especially for troubleshooting i like to immediately be able to look back and see like well what did i say would be going in here and all these different variables so we're just gonna say screen.fill with black and then uh let's just kind of get the game to a point where we can open the screen up and then we can start building it from there we'll kind of enter the second phase of the build so we're going to create um what's called like event handling and so it'll be for game in uh for event in pygame.event.get and uh if event dot type so the event.get is getting everything that's happening in your computer internally and externally if it's something that you can change so mouse button clicks keyboard button clicks special characters function buttons pygame.event.get is is grabbing all of those events so we need to start parsing it out into different ones and the the x button the button that automatically pops up in your screen window at the top right is called pygame.quit and so we want if you hit the quit button we want to set running that variable that controls whether or not our game is active we just want to set that equal to false and then the last things we need to do to get our screen ready is just pygame dot display dot flip let me verify anything is pi game dot display dot flip yep and then uh pi game dot quit just like that uh when i hit play unless i've made a mistake which is possible yep we get a 700 by 600 window i accidentally minimized python but we get a 700 by 600 window and now we have pi games set up we have a frame rate we have a screen with adjustable width and height we have some colors we have a timer we have fonts and we're ready to enter phase two which is actually drawing our window for color designing okay so uh my thinking for rgb color design is obviously we want to show the rg and b values on the screen and they're going to act exactly the same as one another so what i want to do is i want to create a class that i'll call color button so i'm just going to say class capital c color capital b button classes usually get the capital treatment even though nothing else in python really does and then to initialize it it's always def and then underscore underscore in it underscore underscore and here's where you start passing in variables so for a button we'll want it to you always are going to start with self um but for a button we'll want to give it a color we'll want to give it an x position that we want to get drawn at a y position we want to get drawn at we'll say how wide we want the button we'll say how tall we want the button and we'll give it some text and i think for now that's where we'll start so those are things that every button is going to need to share in common okay and so in this init function all we're really going to do is take those variables that we'll be passing in and set them equal to things that we can use inside the function without having to put self before it every time oh when i got my indentations wrong there we go so you just can do self dot and then every variable uh that we just said will be getting passed in every parameter just do self dot that parameter and set it equal to essentially the same name something logical that you can use inside of your function and you'll see why this is nice once we get to the drawing piece of it okay self dot tall and you could say width and height it's just typically i um i uh try to avoid using the same verbiage in the outside world that i use inside of my classes just to keep straight where each thing is coming from okay and now let's go down into define uh so one thing i want every button to be able to do i just want it to be able to draw itself by just calling it so i'm going to say define draw and then self and what we want is we want to say self.rect so so we want to draw a rectangle for each button and set it equal to this built-in pi game function of pygame.draw.rect and then we want everything to go onto the screen and now we start giving it some of the variables that we made so self dot color that's gonna be what color it goes at and then the rectangle takes four arguments it takes an x position it takes a y position and you probably see where this is going it takes a width self dot wide and it takes a height self dot tall okay so it's not an accident that we created this class to pass in the exact variables we're going to need to draw this class but then the next things we do if you want it to be solid for width because that's edge width you just put a 0 and that's going to mean that that's going to mean it's a completely solid object if you put a value in there it's going to be a hollow rectangle and then we'll give it rounded edges because that looks nice i suppose okay and let's go ahead and do one more thing let's say button text is equal to the font dot render so here's now how you draw text on the screen it's a two-piece process first you um self dot text first you set your uh text equal to a variable so we'll call this button text but then you do font that font that you set up in the beginning dot render and then you want to make sure whatever it is that you're writing in is going to be a string so hopefully the text that's getting passed in is already in string format if it is adding this str isn't going to hurt it but if it's something else like a number or any kind of special character this will convert into a string so just to be careful i like to add the str there inside of a class inside of a function you never know what you're going to get passed in and so it's not a bad idea to just be careful and make sure it gets converted to a string okay and then true and then we'll say the text will be black and none okay and so now the second piece of how you draw a text onto the screen screen dot blit and then it'll be that button text we just defined and then we'll want to put it in the x position y position just like the button but if you think about text you don't want to be exactly on the edge that looks kind of funky so here's a good spot to play around with your values i'm going to move it to the right 20 and down 20 just to get it off center but you can play around with this and change it more if you want so i think that's enough initial setup let's actually get some buttons on the screen here so after we fill the screen we're gonna create three buttons we're gonna create an r button a g button and a b button okay and we gotta think about the variables we just said we need so the first thing to do is set them equal to the class so it'll be color button that's what we called it and then the first thing is a color and it's even how if you're using a good ide like i'm using pycharm it'll look at that function in that class and it'll tell you what variables it needs so for the r button it needs red and then it says okay we need an x position well let's say this is going to be the first button and we want these three buttons to be title buttons that span the width of the screen this one is going to be our first one so it'll start at 0 0. that's going to be our x position in our y position and then remember i said we should make this to where it's quickly easily scalable for any size we'll do width divided by three so that it's one third of the screen and then we don't have to make it scalable for the height because it's just going to be a title bar so as long as we're sure that 100 pixels looks good for these buttons we don't care how high they make the screen it would actually make it look weird if it was getting stretched too much so we'll do height of a hundred and then for the text i think we should create a variable because this is something we'll be changing as we change colors and we'll call it r value and to start um let's just go up to where we have all of our variables initialize r value and we'll just set them all equal to zero initially so since we're here let's do g value and um you can see right away i'm creating these as numbers because that's how rgbs are going to work we need them to be integers but we want the text to display on screen so right away that str conversion that we're doing is a super useful ad but let's go ahead and copy this and we'll just do the same thing for g and b and hopefully what we'll see is just a red green and blue button all three of them are gonna say zero with the text but they should take up the whole screen so we just have to change the x and the y coordinates a little bit actually we don't have to change any of the x coordinates but what we do have to do the green button we want to start at width over three and the blue button we want to start at two times width over three right if you if you need to you can pull up like a uh a graph and see the grid but this should make sense the first one starts at zero the second one starts at one third of the width of your screen and the last one starts at two thirds the width of your screen so let's just run this and well actually yeah i'll go ahead and run this but you're going to see nothing comes up on the screen yet because we put the drawing in a separate function so it's going to be r button dot draw and you have to if you're going to put drawing something in a separate function than just the root which is the right way to do it just make sure after you create your buttons you also call the draw function and you put them inside the main game loop so that it's happening every iteration so let's go ahead now and see all right that looks pretty good uh we have the rg and the b and so far um you know we haven't made it to where the user can interact with them but we're getting everything in place to start so i think that looks pretty good that's a good start now let's go ahead and display the window so i just a really good way to do um python stuff is to separate as much functionality as you can into sub functions and call them rather than gum up your main game loop with a ton of functions so let's just start drawing the window in a function that we'll call draw window and this needs to be outside of your class it's separate from your button class and i think the reason i did the buttons is going to become clear the buttons as a separate uh thing from this window and instructions and stuff because we're interacting with those and we're not actually directly interacting with the window coffee break okay so to get started let's just um let's start making it feel like an application let's get a line that goes across um right underneath our buttons just to so draw a line screen let's make this one white and let's have it start at 0 100 so that's going to be right at the bottom of the buttons that we just made and let's have it just go to so to draw a line you give it two values you just give it a starting point and an ending point that's all a line needs to fully define its position and then you give it a width so we'll make it three just so it really pops and that right there we should already see a line if i start this up yep and you can see this little white line that just divides the button section from now our operator our operating window okay so we drew a line let's go ahead and draw um the actual window so we're going to put we're going to put the color that you've selected with your rg and b values we're going to put those pygame.draw.rect screen and we'll make a screen that uses those three colors so we'll put it on the screen let's give it a border and let's say it'll be white and then it'll start at let's go divided by 10 and then we'll just see how that looks so that's gonna be one-tenth of the width of the screen just to give it a little cushion on the left side and then we'll say height divided by four so that gives it a little cushion from the top that's just x and y starting position and if you don't like where these are play around with them that's a great uh that's a great exercise in understanding how pi game works and then we'll make it take up eighty percent of the screen so that'll give it a ten percent screen cushion on either side like i said this is going to be just immediately resizable and that'll be a really useful feature okay so with eighty percent of the screen and then let's go ahead and say for the height we'll just make it fifty percent of the screen so height times point five already and now this one i do think we'll want it to be hollow so i'll go ahead instead of putting a zero there i'll put a 10 there and that'll give it a border size of 10. okay and we can put our color now whatever color has been designed with rgbs inside of that rectangle and here we go let's go ahead and copy this pie game.draw.rect and now for this color we actually want to use the r value the g value and the b value so what i'll do is i'll say we're going to pass three variables in here we need to come down to where we call draw window and we need to give it our value g value and b value okay and this is gonna obviously zero zero zero which is what they're at right now is gonna give us black it's not that exciting so i'll just put some values in here so that we can actually see like a color as we get it designed and that's good because we'll see our text change as well but now instead of this second rectangle being drawn on the screen in white we'll want it to be r g and b and what you'll see so we want this one to be solid we want to fill the whole space but what you'll see with what i just did is that's really nasty brown it didn't do that on purpose but okay all we have to do to get our border to come back is change the order of these two things so by putting it above the border now we've got a white rectangle around our full rectangle of color so that's super useful the last thing i want to do in drawing the window before we start handling user inputs is just give some text explanation of what's going on so to do that we'll just start with some text that i'll call i'll just start with this first one i'll call it window text and it's going to say font.render just like before and then you give it the text you want to say and we'll say your color is and then i think it would be useful to show the rgb values altogether so it's clear what it is so actually let's go ahead and make this an f string a formatted string and that means that we can put um variables right inside with with just using these curly brackets so this your color is and then the r value and then comma and then the g value and then comma and then the b value and then close parentheses and that should be all we have to do to get um that text on the screen so we do font.render and then all the text and then just fill in true and then uh what color we want to be let's say white because it's going on black background and then none and then you need the screen dot blit of window text and let's put it on the screen at width divided by three uh that's gonna be a little far right huh let's do width divide by 10 because that's where the window starts at 1 10 and now let's go ahead and say height divided by 4 because that's where the window starts and let's just move it up some so let's move it up 25 pixels so that it should sit right above the window and we'll take a look here i don't know if that's high enough up we might have to uh oh and make sure your coordinates are inside of a second set of parentheses because they're tuple i'm not sure that's high enough up yeah so let's move it up a little bit more let's say 45 because this is big font all right there we go um so it tells you what color it is now let's add some instructions let's just keep in mind to come back to this after we've created the player controls to add some instructions to this space telling them how to use the application because you know as the developer it always seems pretty easy because you built it but as the user if nobody tells you how to use it you're just clicking around blind okay so uh great the next thing i think we should do is uh get it to where you can actually click on and change the values inside of those buttons so to do that let's go ahead and just start checking in our event handling if the mouse clicked on any of those buttons so let's say if event dot type just like we did for the quit except now it's going to be if event dot type equals pi game dot and then this one's mouse button down so that means you've clicked the button and we're going to create a new function inside of our inside of our class our button class to check whether or not the button was just clicked so we'll create some new variables we'll say r active equals and then it'll be r button and we'll create a new function called check click and uh it's going to give us the little error saying that it was it was you know um uh it's it's not real if we tried to run this right now r active g active equals g button dot click check click so if you try to make these variables get set inside of this function but you don't initialize them in the very beginning it's always going to throw an error that it was used before initialization so just make sure you come back up here and we'll just say r active g active and be active are all false to start because why would you be editing right when you open it up if you haven't even clicked on anything all right and so we're going to create a new function that's just going to check whether or not you clicked on these and so all we have to do is say event dot position because the event was a mouse button click and so if we get the event dot position we're getting the coordinates of that mouse button click as it was clicked so what we have to do is we have to come back up into our button class and we have to define a new function that's called check click and it's getting self obviously because it's inside of a class you want to refer to everything that you already have inside of self and then you also want to pass in the event.position which in this place we'll just call coordinates so we're we want to check if self dot wrecked collides with the event position so if self.rect dot and this is where pi game just makes it so easy collide with a point and then um all we have to do is put chords in there so that's it we're just checking if it was clicked and if it does then we want to return true and then else return false and that's literally all we have to do to check if the button was clicked and because we put this in a class we just did that for all three buttons right there um now our active g active and b active aren't doing anything yet because we're not um we're not using it to draw anything excuse me so what we'll do is we'll also pass the r active um g active and be active we'll pass the active values into the variables or into the button class and we're going to use them to check if we should draw like a little yes i'm active rectangle around it so we called that one text we'll call this active and we'll say self dot active equals active okay and now while we're in here drawing the rectangle we should also check if self slap if self.active so if it's true that you've clicked on this button then we should draw another rectangle pygame.draw.rect and it'll basically be the same as the you know main rectangle but oh i copied the whole thing there we go it'll be the same as the main rectangle but we want this to just have a border that will make like eight just so it really pops and instead of self.color we'll just want it to be something that i don't know i guess white might look okay let's take a look at that um excuse me okay but so that should at least let us uh click on a button and see if it's active but then one thing i want to handle outside of the loop is just if r active then i want g active to be equal to false and b active equal to false and this is going to make it to where you can't have um multiple active uh colors at the same time because you don't want to be editing all of your colors at the same time so make this little and there's a way that you could handle this inside the loop but you would then then you'd have to change up a lot more stuff you'd have to reference all three active colors if you want to make it smart to where it could check and see how many different things it had to deactivate this is really a simple piece of code to put out here you could even use these l ifs if you want but three if statements is going to do it fine but that should be all we need so now let's go ahead i click on 100 and we get this deep white border if i click on green if i click on blue it's not just setting that one equal to active it's also saying the other two equal to inactive which is a useful bit of trickery okay so that's cool it's active but we can't edit it yet we haven't made a variable uh we haven't made the value configurable so what we need to do next and i'm just going to do i'm going to add i think um a new value that'll be like the temporary entry so if you've selected one of these then we're going to say we have an active entry and it's just going to be a true false variable that's true if r is active or g is active or b is active so that just means you've selected something but you'll see why that's important when we get into the nitty gritty and so to start because you want to initialize pretty much every one of your variables right up here in the top but what we'll do is we'll say okay now if you're pressing the keyboard so if event dot type event dot type is equal to key down it's pygame dot key down pie game dot key down and active entry okay so if you if you don't have an active entry we don't care if you click the screen if you click buttons it's not going to do anything but if you press a key and we have an active entry then we need to start doing some math so we'll say if event dot unicode dot is digit okay so this is a specific kind of pie game tool to check if what you just pressed was numerical and um we're gonna want a new variable called entry while we're working on the uh while we're working on a new value but you haven't entered it yet because if we just took the character as soon as you clicked it then it would just immediately overwrite but you'd only be able to write single digit values and obviously we want to be able to go zero to two five five so we need to um we need to just check a few things in here so to start we'll have that entry value that's going to be equal to just an empty string okay and then so if you press a numerical code and we'll say the length of entry so we'll make it a string because we can check the length of that a little bit easier but if you press a number and the length of our entry is less than three because that's the most possible characters that something could be that's basically our minimum criteria for checking if it was a valid entry then what we'll do is we'll set entry equal to and then the string of event dot unicode so that's it's that's its number zero through nine and then that's all we're going to have to do for entry but we should also make it to where you can back out so if event dot key and it's yup if event dot key is equal to pi game dot k backspace okay so this is like oop i hit a key i didn't want to hit and the length of the entry this time has to be greater than zero so this means it can't just be an empty string there's got to be something inside of there then what we'll do is we will say entry equals and there's not actually a super easy way in pi game to just pop one character out of a string so what we're gonna do is we're gonna do entry dot replace and this is a python tool for manipulating strings and what we're going to do is we're going to replace all of the entry text with a new string that is equal to the entry from the very beginning to the next to last character so that's what this kind of string manipulation nomenclature is if you're not real familiar with python or object oriented programming there's a whole series on how to manipulate strings in beginner python tutorials on the channel you can check this out if you don't understand it but if you're just following along understand this is how you replace the entire string with the same exact string minus the last character okay so this is going to allow us to enter and then also to backspace and i think the next thing we should do is the actual um if you want to escape so we'll say if event dot key is equal to pygame dot k escape this would be like you didn't mean to change it you don't like the value that you entered and you just want to leave it alone then what we want to do is we want to set active entry equal to false but then we also want all of the individuals to be equal to false so r active g active and b active should all be equal to false in this case and we're just saying like oh i didn't mean to select anything so uh real quick we won't have it change the number just yet but i do want to show somewhere on the screen that what's happening so we'll say if self.active and then we'll also i think we should pass in entry to all of them so to all of our buttons in this class we'll pass in the entry we'll pass in the entry and we'll pass in the entry and the reason we're going to do that is we've already got a check to see if it's active and if it is active then we also want to know what's going on um you know in the outside world like what buttons are being pressed and selected things like that so to do that just underneath this self dot active check where we're already drawing it in what we'll do is we'll say entry text equals and we now have another variable in here so um we'll call this new value i guess i don't love that but whatever self.new value is going to be equal to new value okay and you could just call it entry you're going to get a little like um actually we should initialize self.rect up here too that's fine um it's gonna tell you like uh it shadows the name from the outside world if you call this entry if you call this width if you call it height but you can still do it that way if it's easier for you i like to use different names but that's just me okay so what we'll do is we'll say the entry text is equal to and then we'll say font dot render and now we're drawing on the button so we need to be mindful to avoid our initial text but all we're doing is we're entering a value between 0 and 255 hopefully so we'll make this another formatted we'll do this the other way so you can see two types of string concatenation in here um so what we're gonna say is the new value is is gonna be equal to some brackets so or parentheses not brackets um with the string conversion goodness excuse me with the string conversion of the entry inside of uh inside of these parentheses and then we'll just say true we'll call it black and we'll put it on the screen and then the second piece is always is self.blit entry text and what we'll do is we'll say so we want this to go pretty close to where the other text was but we want to be clear that it's like temporary or it's a work in progress so we'll say self dot x position and we'll move this to the right of fair bit we'll move it 70 pixels to the right and then self.y position and we'll move it down 50 pixels and we'll just see if that looks okay so did i get my parentheses wrong it looks like i did there we go um okay and so this is going to be [Music] only somewhat useful because we haven't created any like code to actually change the entry yet but i just want us to be able to see so color button has no attribute blit what i don't think i did color button blitz a little bit of troubleshooting never hurt anybody oh self.blit um it is screen dot blit so there we go i was trying to draw the whole button okay so if i click on 100 and click 234 and now i'll try to type more numbers and it's not working because we're at our max i'm going to hit backspace it goes back to 2 3 hit backspace again great now if i click over to 5 or whatever i you know i change my number i can only change it up to three which is cool i can go forward i can go back i can change them and we get this temporary looking text i actually think maybe to distinguish between um between like the active text and the text that we're writing let's make a new gray value and um we will go ahead and make the temporary entry so in our button dot draw instead of this being black text we'll make it gray text just to distinguish um but a really important piece now is going to be should we take the change or not should we accept the new value or no and to do that we'll say um if you hit enter then we'll accept the change but if you don't then uh we'll we'll delete the change so let's make a new value a new variable that i'll say take change and it'll be equal to false initially and let's go ahead down to our event handling and we will just say if event dot key equals pi game dot and this has been the bane of many people's existence because there is no k enter its return and that's just because old keyboards that was the return button i think it's actually like a relic from typewriter age uh but it's k return not k enter but then we also want to check that the length of the entry is greater than zero so you've got to enter something more than um you've got to enter something more than zero keys long and all we'll do in there is we'll set take change equal to true okay and now i actually think the best place to handle take change will be inside of our active function right here because it's already handling um you know setting others equal to false so what we'll do is we'll say if length of entry is greater than zero and take change is true uh if the actually let's do it this way and take change is true and the integer conversion of entry so now we've got it as a string making sure there's something in there and the integer entry is less than 256 and the integer version of entry is greater than negative one okay so this is actually we'll do greater than or equal to zero because that negative one looks stupid but this is how we're checking to make sure there's something in the entry value and it's time to accept a value and it's a valid number um so if it's a valid number actually you know what we're going to want to do these ones separate so we'll do if entry is less than so this is checking to make sure it's a valid entry but the reason i wanted to do that is no matter what when it's time to take change we want take change to be set equal to false so equals false okay because because no matter what when we hit enter we want whatever value was in there to get cleared out even if it was a garbage value so now what we'll say is if it was a valid entry which is this first one then we want our value to be equal to the integer conversion of the entry nope i got a nine okay so let me see simplify change the expression yeah that's a better way of doing it um okay so we'll we'll have it take the change and then what else we'll do is we'll set our active equal to false and then we will also clear out the entry so we'll say all right you've done it um and i'm hitting backspace not delete okay so that should be all we have to do but let's go ahead and just copy this whole blurb into all three of them and you may be at the point where you're like hey pete isn't this the sort of thing you said you should do inside of a function and you're like yep it could be um you could definitely move all of this all of this code into a shared function it's just kind of we started building it out down here and it's not particularly hard code and it's not particularly hard to copy paste so you could for sure clean this up and move it into its own section but i'm going to leave it here so let's take a look and see if we actually can change colors now so let's say instead of 100 i want 120 and i'm going to hit enter and change to 120 and the color actually changed so let's say 90 enter alright it's like a vomit i am picking the worst colors okay we got like a nice lavender that's decent at least um so this is sweet we're changing colors that's the whole point here is so that you can design colors and you can you can you know find mint toothpaste if you want um and you can say like oh i'm at 90 it just needs to be a little softer on the reds i'm go down to 70 go down to 80 whatever you can really hone these things in one more really useful piece that i think could take this the extra mile let's say when you press the space bar you want to save the value so if event dot key because that's an important thing here is if you really like a color you should be able to print it to the terminal and then take that color with you so you know like you know if you're using this application to pick colors for a game that you're going to build remembering what colors you really liked are going to be super important going forward so what we'll say is if event dot key equals we're still in the key down space and this one actually won't require active entry so let's go ahead back here and do another line like this and we'll just say if event dot key is key down and pie game and event dot key equals pie game dot k space okay so now we we moved this out because the other keys that you're pressing only matter when there's an active entry but space should be anytime you like the color you hit space it's going to print the current color to the console so we'll just do print and then a formatted string and we'll say f and then curly brackets r value and then comma and then curly brackets g value and then comma curly brackets b value and then close the parenthesis and it would probably look good with some spaces so let's go ahead and test that all right 100 will go up to 180. cool let's say i really like this 180 50 30. 180 50 30 prints out over here on the console when i'm done with my little app checker whatever i can copy all these rgb values i liked and i can move them you know into my game or whatever all we're really doing here is learning some python learning some pygame and you know creating a useful little application so yes there are a million rgb rgb color pickers and color wheels on the internet but this is a really is a nice little way of doing things as well so one more thing that i think would be super useful and i'm actually just going to copy them in because i did this before i think adding some instructions to your window so i'm going to just call this like instructions block and you don't want to sit here for 10 minutes and watch me just type in type in text but i'll explain what i'm doing real quick i want to have them know like just booting up the app it's going to be click the value you want to modify and enter something 0 to 255 press enter to keep the value or escape to cancel it and then press space to print value to terminal and throw them on the screen in that black space at the bottom of the screen i think that's a really useful addition i think that you know that telling people how to use your app is really important they're not the ones who designed it um so with that being said this is really the whole thing um i hope you guys found it useful if you have watched this far thank you so much for following along thank you for watching the channel please consider subscribing like the video it helps me out a ton if you have any questions about anything you saw in here or something you want to see in a future video let me know about in the comments below i really appreciate your support it's been a lot of fun making these videos and i want to keep making stuff for you guys just like this so good luck with your code and thanks for watching thanks bye