ALL ABOUT COLORS | RAINBOW RANGE

ALL COLORS INTRODUCTION

Let's talk colors for your personal website! Colors are one of the most important parts of a webpage's design philosophy. It sets the tone for the rest of your site. Do you drift toward dark and modern muted colors, or bright and saturated pastels? Each individual has their own unique taste for colors. Everyone's favorite is a slightly different shade. Colors make the world go 'round, and as fellow webmaster vmsh once said to me about frammyjammy.com, "Colors save the world!"

COLOR TALK

How do you choose a color palette for your website? Well, I like to start with one base color. Let's take Rainbow Range as an example! I started my theme with one color--the container color--which is a pleasant sky-blue with an opacity of 0.69 (funny number). I usually use HEX color codes for my websites, but for this one, there's a lot of RGBA because I wanted a transparent glassy look. The exact RGBA of Rainbow Range's container color is rgba(14, 147, 236, 0.69). And dark mode is rgba(3, 31, 99, 0.77).

So, you can use a mix of HEX and RGBA, or even named colors! But generally, you should pick one way of defining your colors in your stylesheet, for easier code management. I use a mix of HEX for solid colors and RGBA only for transparent colors. You can use transparent HEX code, but it's not a straight forward number like RGBA is for adjusting opacity. I also try to avoid named colors as some aren't supported on older browsers. All of the colors listed by W3 however, should work with the vast majority of modern browsers. It's still worth being aware of the potential lack of support for people using older and non-standard browsers or devices.

HTML COLOR PICKER

HTML Color Picker

Here is a lovely little HTML color picker widget I found online! Here's the source. I'm hosting it natively on my site, but you don't have to do that if you want it on yours as well. Just copy & paste the code as colorcodehex.com suggests! If you do want to host it natively--here's a tutorial on how!

You can play around and use this color picker all day long! Use it to choose your base color for your website palette.

Text Color and Contrast Ratios

After choosing your base container color, you should choose a color for your <p> tags--that's your primary paragraph text. Lots of people choose very creative and beautiful text colors to go with their backgrounds. Many go for a very pastel look, which is pretty, but there's a caveat. Your text should ideally, for small text, have a contrast ratio of at the very least 4.5:1. Here's a contrast ratio checker from WebAIM.org For larger text--at least 18.5px when bold, 24px when regular weight on most standard fonts--this very text you're reading is at 22px, with a regular font-weight on a naturally thick font, which makes it pass into the "large text" threshold. Like the links and headers here for example, a contrast of 3:1 is the bare minimum. Rainbow Range doesn't pass with flying colors, but it passes, and your site should too.

"But why?" you may ask, as your pastel text on a pastel background looks aesthetically perfect. Well, accessibility is the name of the game. Lots of people have some form of visual disability. I personally have a visual disability. Without my glasses, tiny and low contrast text is impossible for me to read. And even with glasses, tiny and low contrast text is painful for me to read. Yup, you can cause people with disabilities actual pain with a visually-unoptimized site. This is why it's very important to check your contrast ratios for paragraph text especially!

Ready Made Color Schemes

If you're ever struggling to come up with a palette, sometimes the best thing to do is just steal one! Well, don't actually steal someone's code without permission, I'm being hyperbolic. You are free to "steal" all of the below color schemes. They were all created by me, Nori Jammy, and are completely free to use, edit, destroy, and recreate in your image. They all pass the contrast checker, with the caveat that it must be large text (again, that's bold font-weight, or at least 24px large). The most important thing to do when playing with colors is to have fun doing it!

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor.