{"id":657,"date":"2021-01-10T21:24:46","date_gmt":"2021-01-10T21:24:46","guid":{"rendered":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/?page_id=657"},"modified":"2021-01-10T21:44:12","modified_gmt":"2021-01-10T21:44:12","slug":"colors","status":"publish","type":"page","link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/colors\/","title":{"rendered":"Colors"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a06f5f95d4ab\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a06f5f95d4ab\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/colors\/#Foreground_Color\" >Foreground Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/colors\/#Background_Color\" >Background Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/colors\/#System_Colors\" >System Colors<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>What would GUI programming be without the ability to control <em>colors<\/em>?<\/p>\n\n\n\n<p>Naturally, Java provides support for this, via a class called&nbsp;<code><strong>Color<\/strong><\/code>.&nbsp; (There are other color-related classes, but they are not as frequently used.)<\/p>\n\n\n\n<p>As with any Java class, you can learn a lot from going to the&nbsp;<code>Color<\/code>&nbsp;class&#8217;s&nbsp;<a href=\"https:\/\/docs.oracle.com\/javase\/1.5.0\/docs\/api\/java\/awt\/Color.html\" target=\"_blank\" rel=\"noreferrer noopener\">javadoc page<\/a>.<\/p>\n\n\n\n<p>The primary color model that you will tend to use is the&nbsp;<strong><em>RGB (Red, Green, Blue) model<\/em><\/strong>, although there are others.&nbsp; With the RGB model, every color is represented in terms of its red, green and blue components, each within a range of 0 through 255.&nbsp;&nbsp; 0 means no contribution from a given color component, while 255 means 100% contribution from a given color component.<\/p>\n\n\n\n<p>The class&nbsp;<code><strong>Color<\/strong><\/code>&nbsp;predefines (as class variables) a set of commonly used colors. Here is an image of a Java application that shows the colors, their names, and their (R,G,B) components:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img decoding=\"async\" width=\"310\" height=\"146\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/ShowColors.gif\" alt=\"\" class=\"wp-image-661\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The above names can be used in a Java program to specify a particular color.&nbsp; For example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Color.MAGENTA<\/strong><\/pre>\n\n\n\n<p>Prior to JDK 1.4, the predefined colors were given only lowercase names:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Color.magenta<\/strong><\/pre>\n\n\n\n<p>and you can still use the lowercase names if you wish. However, all new code should use the uppercase versions.<\/p>\n\n\n\n<p>Note that those (newer) names with an underscore have (older) lowercase equivalents in &#8220;bumpy case&#8221;:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Color.DARK_GRAY &lt;-&gt; Color.darkGray<\/strong><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Color.LIGHT_GRAY &lt;-&gt; Color.lightGray<\/strong><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Foreground_Color\"><\/span>Foreground Color<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We can use the&nbsp;<em><strong>foreground color<\/strong><\/em>&nbsp;to change the color of text, and other drawable items.&nbsp; Here&#8217;s an example:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Note that we change the color for the&nbsp;<code>Graphics<\/code>&nbsp;object, not the panel!<\/p><\/blockquote>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; auto-links: false; highlight: [3,9,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56]; title: ; quick-code: false; notranslate\" title=\"\">\npackage swingExamples;\n\nimport java.awt.Color;\nimport java.awt.Container;\nimport java.awt.Dimension;\nimport java.awt.Font;\nimport java.awt.FontMetrics;\nimport java.awt.Graphics;\nimport java.awt.Insets;\n\nimport javax.swing.JFrame;\nimport javax.swing.JPanel;\n\nclass ColorTextDisplayPanel extends JPanel\n{\n  public void paintComponent(Graphics g)\n  {\n    if (fm == null)\n    {\n      fm = g.getFontMetrics(f);\n      fim = g.getFontMetrics(fi);\n    }\n    \n    String s1 = &quot;Greetings from &quot;;\n    String s2 = &quot;JavaLand&quot;;\n    String s3 = &quot; !&quot;;\n    int w1 = fm.stringWidth(s1);\n    int w2 = fim.stringWidth(s2);\n    int w3 = fm.stringWidth(s3);\n    \/\/ Determine the size of the client area\n    Dimension d = getSize();\n    Insets   in = getInsets();\n    int client_width  = d.width - in.right - in.left;\n    int client_height = d.height - in.bottom - in.top;\n    int cx = (client_width - w1 - w2 - w3)\/2;\n    int cy = client_height\/2;\n    \/\/ Draw a green rectangle\n    \/\/ Save the current color so we can later reset it.\n    Color originalColor = g.getColor();\n    g.setColor(Color.GREEN);\n    g.drawRect(10, 10, client_width - 20, client_height - 20);\n    \/\/ Restore the original color\n    g.setColor(originalColor);\n    \/\/ Now draw the first part of the string in the default color\n    g.setFont(f);\n    g.drawString(s1, cx, cy);\n    cx += w1;\n    \/\/ Draw the second part of the string in magenta\n    g.setColor(Color.MAGENTA);\n    g.setFont(fi);\n    g.drawString(s2, cx, cy);\n    cx += w2;\n    \/\/ Draw the third part of the string in the original color\n    g.setColor(originalColor);\n    g.setFont(f);\n    g.drawString(s3, cx, cy);\n  }\n  \n  private Font f = new Font(&quot;Serif&quot;, Font.BOLD, 16);\n  private Font fi = new Font(&quot;Serif&quot;, Font.BOLD | Font.ITALIC, 16);\n  private FontMetrics fm;\n  private FontMetrics fim;\n}\n\nclass ColorTextDisplayFrame extends JFrame\n{\n  public ColorTextDisplayFrame()\n  {\n    setTitle(&quot;ColorTextDisplay&quot;);\n    setSize(300, 200);\n    setDefaultCloseOperation(EXIT_ON_CLOSE);\n    Container contentPane = getContentPane();\n    contentPane.add( new ColorTextDisplayPanel() );\n  }\n}\n\npublic class ColorTextDisplay\n{\n  public static void main(String&#x5B;] args)\n  {\n    ColorTextDisplayFrame frame = new ColorTextDisplayFrame();\n    frame.setVisible(true);\n  }\n}\n<\/pre><\/div>\n\n\n<p>which produces:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/Foregr12.jpg\" alt=\"\" class=\"wp-image-662\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Or, we can specify the color to be used, via its red, green and blue components, by replacing the line:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>g.setColor(Color.MAGENTA);<\/strong><\/pre>\n\n\n\n<p>with:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>g.setColor( new Color(<\/strong><strong>200, 150, 50<\/strong><strong>) ); \/\/ red, green, blue<\/strong><\/pre>\n\n\n\n<p>to produce:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/Foregr13.jpg\" alt=\"\" class=\"wp-image-663\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Background_Color\"><\/span>Background Color<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We can set the&nbsp;<em>background color<\/em>, too, by calling the <strong>setBackground<\/strong> method:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; auto-links: false; highlight: [18]; title: ; quick-code: false; notranslate\" title=\"\">\npackage swingExamples;\n\nimport java.awt.Color;\nimport java.awt.Container;\nimport java.awt.Dimension;\nimport java.awt.Font;\nimport java.awt.FontMetrics;\nimport java.awt.Graphics;\nimport java.awt.Insets;\n\nimport javax.swing.JFrame;\nimport javax.swing.JPanel;\n\nclass BackgroundColorDisplayPanel extends JPanel\n{\n  public BackgroundColorDisplayPanel()\n  {\n    setBackground(Color.yellow);\n  }\n}\n\nclass BackgroundColorDisplayFrame extends JFrame\n{\n  public BackgroundColorDisplayFrame()\n  {\n    setTitle(&quot;Background Color Display&quot;);\n    setSize(300, 200);\n    setDefaultCloseOperation(EXIT_ON_CLOSE);\n    Container contentPane = getContentPane();\n    contentPane.add(new BackgroundColorDisplayPanel());\n  }\n}\n\npublic class BackgroundColorDisplay\n{\n  public static void main(String&#x5B;] args)\n  {\n    BackgroundColorDisplayFrame frame =\n        new BackgroundColorDisplayFrame();\n    frame.setVisible(true);\n  }\n}\n<\/pre><\/div>\n\n\n<p>which produces:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/BackgroundColorDisplay.gif\" alt=\"\" class=\"wp-image-671\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Note that, in the above program, we set the background color for the&nbsp;<code><strong>BackgroundColorDisplayPanel<\/strong><\/code>&nbsp;class,&nbsp;<em><strong><u>not<\/u><\/strong><\/em>&nbsp;for the <code><strong>BackgroundColorDisplayFrame<\/strong><\/code>&nbsp;class.<\/p>\n\n\n\n<p>Why?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"System_Colors\"><\/span>System Colors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Java also provides a set of colors based on your system&#8217;s current set of GUI colors.&nbsp; Access to these colors is provided via the&nbsp;<code><strong>SystemColor<\/strong><\/code>&nbsp;class.<\/p>\n\n\n\n<p>Here&#8217;s what I get when I display those colors on my home Windows system, which I run with the default Windows style and default color scheme:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"450\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/ShowSystemColors.gif\" alt=\"\" class=\"wp-image-667\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When I switch the Windows color scheme to <strong>Olive Green<\/strong>, and run the above program again, it gives me:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"450\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/ShowSystemColorsOlive.gif\" alt=\"\" class=\"wp-image-668\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Note that the&nbsp;<code><strong>SystemColor<\/strong><\/code>&nbsp;class extends from the&nbsp;<code><strong>Color<\/strong><\/code>&nbsp;class.<\/p>\n\n\n\n<p>In addition, note that the uppercase versions of the names for these system colors are not synonymous with the lowercase versions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Lowercase names refer to an instance of&nbsp;<code><strong>SystemColor<\/strong><\/code><\/li><li>Uppercase names provide an integer value, which is an index into an array of&nbsp;<code><strong>SystemColor<\/strong><\/code>s contained within the&nbsp;<code><strong>SystemColor<\/strong><\/code>&nbsp;class<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What would GUI programming be without the ability to control colors? Naturally, Java provides support for this, via a class called&nbsp;Color.&nbsp; (There are other color-related classes, but they are not as frequently used.) As with any Java class, you can learn a lot from going to the&nbsp;Color&nbsp;class&#8217;s&nbsp;javadoc page. The primary color model that you will [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":67,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","ocean_post_layout":"left-sidebar","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"ocs-course-topics-sidebar","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-657","page","type-page","status-publish","hentry","entry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"Bryan Higgs","author_link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/author\/bryan\/"},"uagb_comment_info":0,"uagb_excerpt":"What would GUI programming be without the ability to control colors? Naturally, Java provides support for this, via a class called&nbsp;Color.&nbsp; (There are other color-related classes, but they are not as frequently used.) As with any Java class, you can learn a lot from going to the&nbsp;Color&nbsp;class&#8217;s&nbsp;javadoc page. The primary color model that you will&hellip;","_links":{"self":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/comments?post=657"}],"version-history":[{"count":6,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/657\/revisions"}],"predecessor-version":[{"id":673,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/657\/revisions\/673"}],"up":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/67"}],"wp:attachment":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/media?parent=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}