{"id":7070,"date":"2026-10-27T21:12:26","date_gmt":"2026-10-27T21:12:26","guid":{"rendered":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/?page_id=7070"},"modified":"2026-10-28T03:26:38","modified_gmt":"2026-10-28T03:26:38","slug":"web-design","status":"publish","type":"page","link":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/web-design\/","title":{"rendered":"Web Design"},"content":{"rendered":"\n
<\/div><\/span>
\n

Color Wheel Basics<\/strong><\/p>\n\n\n\n

The color wheel is made up of different colors that can be grouped and organized based on how they relate to each other.<\/p>\n<\/div><\/div>\n\n\n\n

\n
\n
\n

01<\/h3>\n\n\n\n

Primary Colors<\/strong><\/h4>\n\n\n\n

The basic colors used to create other colors. For digital screens, these are red, green, and blue (RGB).<\/p>\n<\/div>\n\n\n\n

\n

02<\/h3>\n\n\n\n

Secondary Colors<\/strong><\/h4>\n\n\n\n

Colors created by combining two primary colors. In RGB, these are cyan, magenta, and yellow.<\/p>\n<\/div>\n\n\n\n

\n

03<\/h3>\n\n\n\n

Tertiary Colors<\/strong><\/h4>\n\n\n\n

Colors created by combining a primary and secondary color. Examples include orange, violet, and spring green.<\/p>\n<\/div>\n\n\n\n

\n

04<\/h3>\n\n\n\n

Warm Colors<\/h4>\n\n\n\n

Warm colors include red, orange, and yellow. These colors often remind people of sunshine or fire and can make a design feel warm, energetic, or inviting.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div><\/span>
\n

Color Combinations<\/strong><\/p>\n\n\n\n

There are different ways to combine colors using the color wheel. Each combination creates a different look depending on where the colors are located and how they’re used together.<\/p>\n<\/div><\/div>\n\n\n\n

\n
\n
\n

Complementary Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Complementary colors are two colors on opposite sides of the color wheel. When used together, they create a lot of contrast and make each color stand out more.<\/p>\n<\/div>\n\n\n\n

\n

Monochromatic Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Monochromatic colors are different shades, tints, and tones of the same color. They work well together and create a simple, consistent look.<\/p>\n<\/div>\n\n\n\n

\n

Analogous Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Analogous colors are three colors next to each other on the color wheel. They usually work well together, especially when one is the main color and the others are used as accents.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n
\n
\n
\n

Triadic Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Triadic colors are three colors evenly spaced around the color wheel. They create a colorful, balanced look with plenty of contrast, but not as much as complementary colors.<\/p>\n<\/div>\n\n\n\n

\n

Tetradic Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Tetradic colors are four colors evenly spaced around the color wheel. They can create bold designs, but using too many colors equally can make the design look overwhelming.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div><\/span>
\n

Color Properties<\/strong><\/p>\n\n\n\n

Colors can be adjusted to make them lighter, darker, brighter, or more muted. These changes can affect how colors look and feel in a design.<\/p>\n<\/div><\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

Shades, Tints, & Tones<\/h3>\n\n\n\n
\n
\n
\n

Shades<\/strong><\/h2>\n\n\n\n

Shades are created by adding black to a color, making it darker.<\/p>\n<\/div>\n\n\n\n

\n

Tints<\/strong><\/h2>\n\n\n\n

Tints are created by adding white to a color, making it lighter.<\/p>\n<\/div>\n\n\n\n

\n

Tones<\/strong><\/h2>\n\n\n\n

Tones are created by adding gray to a color, making it softer and less intense.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
\n<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

Hues, Saturation, and Luminance<\/h3>\n\n\n\n
\n
\n
\n

Hue<\/strong><\/strong><\/h2>\n\n\n\n

Hue is the actual color, like red, blue, or green.<\/p>\n<\/div>\n\n\n\n

\n

Saturation<\/strong><\/strong><\/h2>\n\n\n\n

Saturation is how strong or vibrant a color is.<\/p>\n<\/div>\n\n\n\n

\n

Luminance<\/strong><\/strong><\/h2>\n\n\n\n

Luminance is how bright or light a color appears.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
<\/div><\/span>
\n

Exploring Colors Palettes<\/strong><\/p>\n<\/div><\/div>\n\n\n\n

\n
\n

Exploring Color Palettes in Paletton<\/h2>\n\n\n\n

Using Paletton<\/a><\/em><\/strong>, I experimented with three different types of color palettes: monochromatic<\/em>, adjacent<\/em>, and triadic<\/em>. <\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

Monochromatic<\/h3>\n\n\n\n

Base Color #FF0070\u00a0<\/p>\n\n\n\n

View Page Layouts<\/strong><\/em><\/summary>\n
\"\"
Negative Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Positive Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Dark Page<\/figcaption><\/figure>\n\n\n\n
\"\"
White Page<\/figcaption><\/figure>\n<\/details>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n

Adjacent<\/h3>\n\n\n\n

Base Color #73C7DA<\/p>\n\n\n\n

View Page Layouts<\/strong><\/em><\/summary>\n
\"\"
Negative Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Positive Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Dark Page<\/figcaption><\/figure>\n\n\n\n
\"\"
White Page<\/figcaption><\/figure>\n<\/details>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n

Triadic<\/h3>\n\n\n\n

Base Color #DE5290<\/p>\n\n\n\n

View Page Layouts<\/strong><\/em><\/summary>\n
\"\"
Negative Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Positive Design<\/figcaption><\/figure>\n\n\n\n
\"\"
Dark Page<\/figcaption><\/figure>\n\n\n\n
\"\"
White Page<\/figcaption><\/figure>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n

My Experience Using Paletton<\/strong>

I liked using Paletton to try out different color combinations. This was my first time hearing about it and using it. I liked the three palettes I chose, but I wasn’t really a fan of how they looked on the example websites.<\/p>\n\n\n\n

After looking at the different page layouts, I felt like there was too much color being used. I liked the lighter backgrounds with darker text because they were easier to read. I think the brighter colors would have looked better if they were used for smaller details instead of the whole page. It made me realize that just because colors look good together doesn’t mean they’ll look good on a website.<\/p>\n<\/blockquote>\n\n\n\n

<\/div>\n\n\n\n
<\/div><\/span>
\n

Canva Color Options<\/strong><\/p>\n<\/div><\/div>\n\n\n\n

\n
\n

Exploring Color Combinations in Canva<\/h2>\n\n\n\n

After exploring Canva’s article, 100 Color Combinations,<\/a><\/strong><\/em> I chose three color palettes that stood out to me.<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

Orange Accent #78<\/h3>\n\n\n\n

I like how the orange stands out against the other colors without being too bright.<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n

Shabby Chic Neutrals #80<\/h3>\n\n\n\n

I like the soft, neutral colors and how clean they look together.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Classic Metallics #85<\/h3>\n\n\n\n

I like how the gold stands out against the darker colors.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\n
\n
\n

Additional Resources<\/h2>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

Color Picker Tool: How It Enhances Your Web Design Process<\/h2>\n\n\n\n

This article explains how color picker tools can make choosing colors for a website easier. It discusses finding colors that work well together, keeping a consistent design, and making sure text is easy to read.<\/p>\n\n\n\n

\n
View Article<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n

Writing for Websites \u2014 Grammarly<\/h2>\n\n\n\n

This article gives tips for writing content for websites. It explains how headings, shorter paragraphs, and simple language can make a website easier to read and understand.<\/p>\n\n\n\n

\n
View Article<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

01 Primary Colors The basic colors used to create other colors. For digital screens, these are red, green, and blue (RGB). 02 Secondary Colors Colors created by combining two primary colors. In RGB, these are cyan, magenta, and yellow. 03 Tertiary Colors Colors created by combining a primary and secondary color. Examples include orange, violet, … <\/p>\n

Read more “Web Design”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"inspiro_hide_featured_image":false,"footnotes":""},"class_list":["post-7070","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/pages\/7070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/comments?post=7070"}],"version-history":[{"count":11,"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/pages\/7070\/revisions"}],"predecessor-version":[{"id":7128,"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/pages\/7070\/revisions\/7128"}],"wp:attachment":[{"href":"https:\/\/gilliannaftali.webhostingforstudents.com\/cis1410\/wp-json\/wp\/v2\/media?parent=7070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}