🌐
Hack the Web
  • Welcome to Hack the Web
  • Getting Started
    • 🔥Course Overview
    • Why This is Important
    • 🛠️What We Will Build
  • Build with the Basics
    • Build with the Basics
    • HTML
    • CSS
    • JavaScript
    • 💥Putting it all together
    • Design Systems and CSS Frameworks
  • Design Basics
    • What Makes Good Design
    • 🏳️‍🌈Colors, Colors, Colors
    • 🔡Typography and Fonts
    • 🌀Graphics for Your Site
      • Types of Images
      • Where to Find Graphics
      • Image Formats
      • Other Media Formats
    • 🦄Icons
  • Don't Start From Scratch
    • ▶️Template Walkthrough
  • Misc Topics
    • Search Engine Optimization
    • ⭐Favicons
    • ☑️HTML & CSS Validation
    • 📊Performance Testing
    • Markdown
    • Mobile Responsive Design
  • Advanced Topics
    • Hosting Sites
    • ↔️Backend vs Frontend Development
    • ⚙️Browser Built-In Web Tools
  • Real-World Applications
    • 💼Career Paths in Web Design
    • Wordpress, Drupal, Website Builders
  • Conclusion
    • 🎉Course Recap
    • 📝Quiz for Certificate
    • 🦉Keep on Learning
  • SouthHills Info Request
Powered by GitBook
On this page
  • Color Theory
  • Some Web Tools for Color Ideas & Palettes
  • Understanding RGB and CMYK
  • Some extra color terms:
  1. Design Basics

Colors, Colors, Colors

PreviousWhat Makes Good DesignNextTypography and Fonts

Last updated 6 months ago

Color Theory

Color theory is a framework that guides the use of color in art and design. It consists of principles and guidelines that help artists and designers effectively mix, match, and apply colors to create visually appealing compositions. Some key concepts include:

  • Primary Colors: The foundational colors (red, blue, yellow) that cannot be created by mixing other colors.

  • Secondary Colors: Colors formed by mixing two primary colors (green, orange, purple).

  • Complementary Colors: Colors located directly opposite each other on the color wheel, offering high contrast and vibrant visuals when paired.

  • Warm Colors: Colors like red, orange, and yellow that evoke warmth and energy.

  • Cool Colors: Colors such as blue, green, and purple that create a calming and soothing effect.

Understanding these concepts helps in creating balanced designs that appear to go together naturally.

Some Web Tools for Color Ideas & Palettes

Understanding RGB and CMYK

RGB (Red, Green, Blue): The RGB color model is used mainly for digital screens. It combines red, green, and blue light in various ways to produce a broad spectrum of colors. Colors are represented as combinations of these three primary colors, commonly in the format rgb(red, green, blue).

CMYK (Cyan, Magenta, Yellow, Black): CMYK is a subtractive color model used in color printing. It uses the colors cyan, magenta, yellow, and black to produce a wide range of colors on physical media. Each color value is a percentage that adjusts the level of each ink during the printing process.

Using RGB in CSS

In CSS, you can apply colors using the RGB color model with the rgb() function. Here's an example:

.element {
  background-color: rgb(255, 0, 0); /* Pure red */
}

.text {
  color: rgb(0, 128, 0); /* Dark green */
}

CSS also allows an RGBA format, adding an alpha channel for transparency:

.overlay {
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

Some extra color terms:

Cool colors, Warm colors, Contrast, Complementary, Primary, Secondary, Mixed, Neutral, Hue, Tint. Tone, Shade, Value, Tertiary, Monochromatic, Analogous, Saturation, Chroma/Chromaticity, Triads, Split complementary, Intensity, Arbitrary color, Optical color, Mass tone, Quanternary, Complex colors, Harmony

🏳️‍🌈
Color Hunt - Color Palettes for Designers and Artistscolorhunters
https://color.adobe.com/explore
Color
Logo
Logo
Logo