{"id":1624,"date":"2020-12-11T02:43:42","date_gmt":"2020-12-11T02:43:42","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=1624"},"modified":"2022-05-13T00:30:29","modified_gmt":"2022-05-13T00:30:29","slug":"tkinter-color-chooser","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-color-chooser\/","title":{"rendered":"Tkinter Color Chooser"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn how to display a color chooser dialog using the <code>askcolor()<\/code> function from the <code>tkinter.colorchooser<\/code> module.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-the-tkinter-color-chooser-dialog'>Introduction to the Tkinter color chooser dialog <a href=\"#introduction-to-the-tkinter-color-chooser-dialog\" class=\"anchor\" id=\"introduction-to-the-tkinter-color-chooser-dialog\" title=\"Anchor for Introduction to the Tkinter color chooser dialog\">#<\/a><\/h2>\n\n\n\n<p>To display a native color chooser dialog, you use the <code>tkinter.colorchooser<\/code> module.<\/p>\n\n\n\n<p>First, import the <code>askcolor()<\/code> function from the <code>tkinter.colorchooser<\/code> module:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">from<\/span> tkinter.colorchooser <span class=\"hljs-keyword\">import<\/span> askcolor<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Second, call the <code>askcolor()<\/code> function to display the color chooser dialog:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">askcolor(color=<span class=\"hljs-literal\">None<\/span>, **options)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you select a color, the <code>askcolor()<\/code> function returns a tuple that contains two values that represent the selected color:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The first value is the RGB representation.<\/li><li>The second value is a hexadecimal representation.<\/li><\/ul>\n\n\n\n<p>For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">((<span class=\"hljs-number\">255.99609375<\/span>, <span class=\"hljs-number\">0.0<\/span>, <span class=\"hljs-number\">255.99609375<\/span>), <span class=\"hljs-string\">'#ff00ff'<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you don&#8217;t select any color from the color chooser dialog, the <code>askcolor()<\/code> function returns <code>None<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='tkinter-color-chooser-example'>Tkinter color chooser example <a href=\"#tkinter-color-chooser-example\" class=\"anchor\" id=\"tkinter-color-chooser-example\" title=\"Anchor for Tkinter color chooser example\">#<\/a><\/h2>\n\n\n\n<p>The following program illustrates how to use the color chooser dialog. The background of the root window will change to the selected color.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\r\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\r\n<span class=\"hljs-keyword\">from<\/span> tkinter.colorchooser <span class=\"hljs-keyword\">import<\/span> askcolor\r\n\r\n\r\nroot = tk.Tk()\r\nroot.title(<span class=\"hljs-string\">'Tkinter Color Chooser'<\/span>)\r\nroot.geometry(<span class=\"hljs-string\">'300x150'<\/span>)\r\n\r\n\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">change_color<\/span><span class=\"hljs-params\">()<\/span>:<\/span>\r\n    colors = askcolor(title=<span class=\"hljs-string\">\"Tkinter Color Chooser\"<\/span>)\r\n    root.configure(bg=colors&#91;<span class=\"hljs-number\">1<\/span>])\r\n\r\n\r\nttk.Button(\r\n    root,\r\n    text=<span class=\"hljs-string\">'Select a Color'<\/span>,\r\n    command=change_color).pack(expand=<span class=\"hljs-literal\">True<\/span>)\r\n\r\n\r\nroot.mainloop()\r\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"501\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Color-Chooser.png\" alt=\"\" class=\"wp-image-1625\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Color-Chooser.png 535w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Color-Chooser-300x281.png 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><\/figure>\n\n\n\n<p>How it works.<\/p>\n\n\n\n<p>First, import <code>tkinter<\/code> and <code>colorchooser<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n<span class=\"hljs-keyword\">from<\/span> tkinter.colorchooser <span class=\"hljs-keyword\">import<\/span> askcolor<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Second, create the root window:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">root = tk.Tk()\nroot.title(<span class=\"hljs-string\">'Tkinter Color Chooser'<\/span>)\nroot.geometry(<span class=\"hljs-string\">'300x150'<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Third, define a function that will be executed when the <code>'Select a Color'<\/code> Button is clicked:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">change_color<\/span><span class=\"hljs-params\">()<\/span>:<\/span>\n    colors = askcolor(title=<span class=\"hljs-string\">\"Tkinter Color Chooser\"<\/span>)\n    root.configure(bg=colors&#91;<span class=\"hljs-number\">1<\/span>])<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Fourth, create a button and assign the <code>change_color()<\/code> function to its command option:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">ttk.Button(\n    root,\n    text=<span class=\"hljs-string\">'Select a Color'<\/span>,\n    command=change_color).pack(expand=<span class=\"hljs-literal\">True<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Finally, run the <code>mainloop()<\/code> method of the root window:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">root<\/span><span class=\"hljs-selector-class\">.mainloop<\/span>()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Use the <code>askcolor()<\/code> function from <code>tkinter.colorchooser<\/code> module to display a color chooser dialog.<\/li><li>The <code>askcolor()<\/code> function returns a tuple of the selected color or None.<\/li><\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"1624\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-color-chooser\/\"\n\t\t\t\tdata-post-title=\"Tkinter Color Chooser\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"1624\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-color-chooser\/\"\n\t\t\t\tdata-post-title=\"Tkinter Color Chooser\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how to display a color chooser dialog using the askcolor() function from the tkinter.colorchooser module.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1232,"menu_order":36,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1624","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":0,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1624\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1232"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}