FE 'tkGooie' Utilities

'Flat' group

Make a

using an 'external'
Color Selector GUI
to specify 2 colors

(FE = Freedom Environment)

FE 'tkGooie' interface for a
maker of color-shaded (2 color)
using an external RGB
color-selector GUI to
specify 2 colors
and using 2 radiobuttons to
specify gradient direction
(x or y)

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

tkGooie Page

Tcl-Tk Code for a GUI to
'Make a Color-Gradient RECTANGLE
(using an 'external' Color Selector)'

I am interested in making nice images for 'toolchest' and 'drawer' backgrounds, as I have indicated on pages about

These two pages were originally published in 2012 on pages titled

  • "Experiments in making embellished GUI's"
  • "A color-gradient-button-maker GUI"

at wiki.tcl.tk/36780 and wiki.tcl.tk/36749.

I have created several different 'color-gradient-button-maker GUI' scripts, trying to find a fastest-way to set the 2 gradient colors, since one might wish to experiment with a large number of different color combinations.

The script variations that I devised are on pages about making

The main 'drawing' proc in all these scripts is based on a 'DrawGradient' proc at the page titled 'Drawing Gradients on a Canvas' at wiki.tcl.tk --- which uses 'create line' commands on a 'canvas' widget to generate the color gradients --- with either horizontal or vertical lines.

These scripts can be used to make small or large rectangular image files (like GIF or PNG files) that contain a color gradient, given 2 colors.

Probably the script that is fastest at setting colors is the one that uses 6 scale widgets --- BUT that is the one that takes the most 'screen real-estate'.

The script with 6 spinboxes offers a fairly compact GUI, but the spinboxes 'turn over' rather slowly, in going from 0 to 255.

The script with 6 'miniscale' widgets offered a way of getting fast 'turn over' without using as much real-estate as 6 scale widgets.

The script using a single entry widget is compact, but it suffers from the need to provide rigorous editing of the input to make sure the user enters valid data --- AND it is a slow way of entering the 6 RGB color numbers.

On this page, I offer one more way of setting the colors --- it is reasonably fast and is quite conservative with screen real-estate.

This method depends on using an EXTERNAL color selector GUI.

You can make that color-selector script by cutting-and-pasting the code from the page that offers a non-obfuscated color selector GUI on this site.

The GUI (a screenshot)

Based on the goals described above, here is an image of the resulting 2-color-buttons GUI.

This GUI shows the two currently selected colors as hex-color-codes in a label at the top of the GUI --- to the right of the two color selector buttons.

Since hex-codes may not be (quickly) meaningful to users, the labels holding the two hex-codes are given the color of the hex-code displayed.

    (In addition to putting the colors on label widgets, we could put the colors on the buttons. Or, if all those colors look too 'busy', we could put the color on the buttons only --- INSTEAD OF on the labels.)


I present the code for the '2-color-buttons' GUI below.

I follow my usual 'canonical' structure for Tk code, for this Tk script:

  0) Set general window & widget parms (win-name, win-position,
     win-color-scheme, fonts, widget-geometry-parms, win-size-control).

  1a) Define ALL frames and sub-frames.
  1b) Pack   ALL framesand sub-frames.

  2) Define & pack all widgets in the frames, frame by frame.

  3) Define keyboard and mouse/touchpad/touch-sensitive-screen action
     BINDINGS, if needed.

  4) Define PROCS, if needed.

  5) Additional GUI initialization (typically with one or more of
     the procs), if needed.

This Tk coding structure is discussed in more detail on the page A Canonical Structure for Tk Code --- and variations.

This makes it easy for me to find code sections --- while generating and testing this script, and when looking for code snippets to include in other scripts (code re-use).

Experimenting with the GUI

As in all my scripts that use the 'pack' geometry manager (which is all of my scripts, so far), I have put the four main 'pack' parameters --- '-side', '-anchor', '-fill', '-expand' --- on the 'pack' command for the various frames and widgets.

Tcler's can experiment with these parameters if they want to change the behavior of the GUI when window size is changed.

Alternatively, Tcler's can activate the commented statement

wm resizeable . 0 0

to make the canvas a fixed size and avoid any confusion that might be caused by allowing the window to be resized.

However, I wanted to be able to make a rectangle/button of almost any desired size, by resizing the window and having the canvas resize automatically.

So I did not fix the size of the window.

The Tcl-Tk CODE

Here is a link to CODE for the Tk script


I may return to this script someday and (as I mentioned above) put the colors on the 2 color-buttons, instead of on the 2 separate labels beside the buttons.

This will conserve some real estate on the GUI.


You may find this rectangle/button rather plain, even though you can get some nice color gradients.

Rectangular buttons with 'shaded edges' may be more to your liking. If so, have a look at an 'IMAGEcreators - Shaded, 3D' page about a

To get 'rounded corners' as well as 'shaded edges', try a

and use a large exponent to get 'sharp' edges.

Bottom of this page for
presenting Tcl-Tk code for a GUI to
Make a Color-Gradient RECTANGLE
(with an 'external' Color Selector)
--- a utility in the FE 'tkGooies' system,
in the 'IMAGEcreatorsFlat' group.

To return to a previously visited web page location, click on the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Top of Page, above. >

Page history:

The code was created in 2012 --- and posted 2012 Nov 03 at

This FE web page was created 2014 May 15 --- as a backup and alternative to the wiki.tcl.tk page.

This page was changed 2015 Oct 07.
(Small changes.)

Page was changed 2016 Oct 05.
(Added some links.)

Page was changed 2019 Mar 03.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jun 14.
(Specified image widths in percents to size the images according to width of the browser window.)

The code here MAY BECOME more 'up-to-date' than the code posted on the Tcler's Wiki ---
wiki.tcl-lang.org --- formerly wiki.tcl.tk.