ometimes, deciding on a color scheme for a site is more of a problem than is implementing it. I’ve sat on committees intended to design Web sites by consensus and I can tell you from experience: Getting more than two people to settle on a color scheme is no easy task! A little programming helps though. You can simplify color scheme selection by letting people see how their color preferences interact on-screen.
Although displaying a Web-safe color palette is relatively easy, simply displaying the colors doesn’t give users an easy way to see how selected colors interact with each other. How can you get people to choose and agree on sensible colors for a site?
Make the Web-safe color display interactive, using JavaScript to apply selected colors to some sample content and let users see immediately how their chosen colors look together. Figure 1 shows how the completed application looks.
![]() |
Create a Web-safe Palette This solution has two goals?displaying the Web-safe palette and making it interactive. Displaying the palette is easy; you use some nested loops and a simple array to build a table whose cells each represent a different entry in the palette. A pair of radio buttons on the page lets users choose whether they’re selecting a foreground or a background color. Finally, to make the display interactive, you can connect the onClick event for each colored cell in the table to a function that applies the selected color to either the foreground or background color of a separate display?based on the currently selected radio button. Simple event handlers for the radio buttons maintain the foreground/background value, and a “dummy” tag holds content so users can see the effect of their chosen colors immediately.
To get started, open up your favorite text editor and add the following code:
The CSS Rules shown above position elements on the page. Next, create three tags to hold the color table, the radio button controls, and a test area where the color effects appear. Because each of the
cells will be clickable, the td rule turns the standard cursor into the hand cursor when users move the mouse over a table cell. Note that the rules don’t specify any colors?users will determine the colors in the testArea by clicking on the cells in the palette.
| Add the following between the tags:
The colorTable ‘s content will be generated by a function called createTable(). Also note that the controls
possesses two radio buttons?one to set the foreground color and one to set the background color. Each radio button has an onClick event that sets the value of a flag?colorToSet?in the script to either “fore” or “back”. The function that displays the selected colors in the testArea
will check this flag to see which property to change. The controls
also contains labels that display the current color values of the foreground and background properties of the testArea. Initially, these values are set to black text (#000000) on a white (#ffffff) background. Finally, the testArea
contains some placeholder text so users can see how the colors interact.
Make the Palette Interactive
The preceding code creates a table by using three nested for loops. The colors array holds the hexadecimal color values acceptable for each of the red, green, and blue components of a Web-safe color palette. The code then uses the nested loops to iterate through each of the values. The i loop represents the red component, the j loop represents the green component, and the k loop represents the blue component of the color to be displayed. By including the HTML table markup tags and looping through the acceptable values of the Web-safe palette stored in the colors array, the createTable() function creates a table with 6 colors and 36 rows?the 216 colors of the Web-safe color palette. You may have noticed that as the code constructs the tags, it also adds an onClick event handler that points to a function called setColor(). The setColor() function takes the
| element itself as an argument (the "this" argument). You'll need to add the setColor() function?and the colorToSetFlag mentioned earlier to the page. Add the following to the script:
|
When the page first loads, the colorToTest flag is set to 'fore', but the flag value changes from 'fore' to 'back' as users change the selected radio button. The setColor() function uses DOM properties to access the text stored in the element passed to the function. It then uses that text (the color value) to apply the selected color to either the foreground or background of the testArea
| depending on the current colorToSet flag value. Finally, the setColor() function sets the innerHTML property of either the foreground or background labels to the selected color value.
That's all there is to it! You can use this Web-safe color palette application to help select a color scheme for anything from a single element to an entire site. You could easily extend the application to let users change the font, weight, and size of the text in the test area. In fact, the closer you make the content of the test area to the actual content of the intended site, the more likely it is that the process of selecting a color scheme will go smoothly. ![]() ![]() About Our Editorial ProcessAt DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere. See our full editorial policy. About Our JournalistCharlie Frank
Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.
View Author
![]() ![]() Harris’s VP choice may shape climate agenda
Noah Nguyen
July 26, 2024
5:45 PM
![]() ![]() Salesforce and Workday announce AI partnership
Cameron Wiggins
July 26, 2024
5:18 PM
![]() ![]() Pil partners with WaveBL for eBL digitization
Rashan Dixon
July 26, 2024
1:48 PM
![]() ![]() Musk activates internet in Gaza hospital
Cameron Wiggins
July 26, 2024
1:44 PM
![]() ![]() Experts debate AI impact on cybersecurity
Noah Nguyen
July 26, 2024
1:43 PM
![]() ![]() Palantir and C3.ai: high-potential AI stocks
Rashan Dixon
July 26, 2024
11:35 AM
![]() ![]() Telefónica unveils new quantum security solution
Noah Nguyen
July 26, 2024
11:34 AM
![]() ![]() Musk updates Tesla Roadster production timeline
Cameron Wiggins
July 26, 2024
11:26 AM
![]() ![]() Employees report AI increases their workload
Rashan Dixon
July 26, 2024
11:24 AM
![]() ![]() Protect your online privacy with VPN
Cameron Wiggins
July 26, 2024
11:24 AM
![]() ![]() Amd announces Ryzen AI 9 HX 375
Noah Nguyen
July 26, 2024
11:19 AM
![]() ![]() US faces hurdles to meet climate goals
Cameron Wiggins
July 26, 2024
11:13 AM
![]() ![]() Elon Musk’s xAI launches Memphis supercomputer
Johannah Lopez
July 26, 2024
11:08 AM
![]() ![]() Switzerland mandates open-source software for government
Noah Nguyen
July 26, 2024
8:53 AM
![]() ![]() Reddit blocks most search engines except Google
Cameron Wiggins
July 26, 2024
8:46 AM
![]() ![]() Monday sets record for hottest day
Johannah Lopez
July 26, 2024
8:02 AM
![]() ![]() IBM stock rises on strong Q2 earnings
Johannah Lopez
July 26, 2024
7:47 AM
![]() ![]() Wiz declines $23 billion offer from Alphabet
Cameron Wiggins
July 26, 2024
7:23 AM
![]() ![]() Military crackdown leaves 200 dead in Bangladesh
Johannah Lopez
July 26, 2024
7:19 AM
![]() ![]() Elon Musk attends Netanyahu’s address to Congress
Rashan Dixon
July 26, 2024
7:16 AM
![]() ![]() Ai-powered GR Supras complete tandem drift
April Isaacs
July 26, 2024
7:11 AM
![]() ![]() Mega-cap tech stocks under pressure
April Isaacs
July 25, 2024
5:45 PM
![]() ![]() New IBM cybersecurity certificate at community colleges
April Isaacs
July 25, 2024
5:37 PM
![]() ![]() Eviden unveils Qaptivaâ„¢ quantum emulator for researchers
Johannah Lopez
July 25, 2024
5:29 PM
![]() ![]() Telefónica Tech secures global BBVA cybersecurity deal
Cameron Wiggins
July 25, 2024
5:27 PM
|