Session Spotlight

Sarah Shook

Camp Counselor

Decoding Colors: A Deep Dive into Hex and RGB(A) Color Models

Event Logo

Wednesday, July 31, 2024 - 2:30 PM CDT, for 1 hour.

Regular, 60 minute presentation

Room: African 20

CSS
Colors
Accessibility
RGB
Hex

If you’re a developer (or a former MySpace user), there’s a 99.999% chance you’ve added a hex color to your site, and you’ve likely used RGBA to add a color with opacity. Color pickers provide a convenient way to select colors in the format(s) you need, but have you ever wondered what the letters and numbers in hexes represent, and how they translate to RGB? Having a deeper comprehension of CSS color theory will improve your development, accessibility, and design skills. During this talk we’ll discuss: - An overview of the Red Green Blue (and Alpha) model - An explanation of the hex model and what the letters and numbers in a hex represent (and how they relate to the RGB model). - Why colors are important for accessibility. - The formula used to dynamically create consistent color schemes with RGB. - How to programmatically convert between the RGB and hex models. - Practical examples of the concepts, including: - Determining text or element color based on the background. - Creating components with multiple colors while maintaining a specific (and accessible) color ratio. You’ll leave this talk with a deeper understanding of the hex and RGB(A) color models, along with advanced techniques for color manipulation and how to use these techniques to ensure your components have accessible colors. A repository link to the code examples will be provided so you can further explore the concepts discussed.

Prerequisites

While this talk is for all levels, it will be assumed that you have a basic understanding of CSS and Javascript.

Take Aways

  • Deep understanding of hex and RGB(A) color models
  • Learn the formula for using RGB to create different colored components with a consistent ratio.
  • Learn how to convert hex colors to RGB and vice versa
  • Practical examples of how to apply color conversion and ratio concepts
  • Understand why colors are important for accessibility
favorited by:
Matthew Ives Serena Rue Ellie Zubrowski Jason Torres Chris Nowicki Adam Morsa Kevin Powell Micha Rodriguez Joel Keyser Michael Larocca Kevin Hakanson Don Nelson Josh Gretz Shashi Lo Roxana Rodriguez-Becker Abbey Perini