Around 1 in 12 men and 1 in 200 women have color vision deficiency (NCBI)
shade palette
A brand new video course
Learn how to create and manipulate SVGs using JavaScript
I wanted to create a color picker for CSS & HTML that’s clean and elegant, without clutter and where we see a large preview of the selected color.
I also wanted to make it easy to copy and convert the color values in different formats like RGB(a), HSL(a), hex or 8-digit hex (with alpha), so that as web designers we can stop finicking around with formatting our color values and can get on to what we do best. So for example, if you’re looking to convert rgb to hex, or hex to hsl, this tool will help you do just that.
✨ For the selected color, you also get color palettes with tints, shades, tones, warmer colors and cooler colors. This can help refine the color, or help build a cohesive color palette for your web design projects. Tints consist of the original color mixed with various degrees of white, shades mix the color with various degrees of black and tones are a mix of the colors with various degrees of neutral gray.
For more color palettes, check out pppalette, a simple color palette generator and hhhue, a curated collection of color palettes.
This tool is made possible thanks to iro.js and chroma.js, two awesome JavaScript libraries to play with colors.
More about colors on the web and how color codes work
Using color on the web, whether this is via CSS, HTML or JavaScript, is done using a color code notation like RGB, HSL or HEX. These notations are simply 3 different ways to specify a color, and any of these 3 doesn’t give you access to any additional colors. In total, these notations give access to 16,777,216 colors.
RGB
TL;DR → The RGB color notation represents each color channel (red, green and blue) with a value between 0 and 255. The notation looks like this: rgb(44, 233, 77) and opacity can also be specified using RGBA: rgba(44, 233, 77, .25).
The RGB color notation (short for red, green and blue) is really the basis for color on the web currently. Additional notations like HEX and HSL are just different ways of specifying colors in the sRGB color space.
You’re likely already familiar with how to specify a color using the RGB color notation, but you may be less familiar with additional syntax for it that has been introduced mainly with the CSS color module level 4. For example, it’s now possible to specify the alpha value without using RGBA: rgb(88, 17, 213, .15) and we can also use a notation that omits the commas: rgb(255 186 140) and with that comma-less notation the alpha value can also be passed-in like this: rgb(255 186 140 / .33). These different notations can become especially handy when composing colors using CSS variables.
HEX
TL;DR → The HEX color notation is a shorthand for RGB and is coded as #RRGGBB, where each color channel is represented with two hexadecimal digits from 0 to F: 00 for 0 and FF for 255. The letters can be capitalized or not, it makes no difference.
The HEX color notation (short for hexadecimal) has perhaps been the most popular way to represent colors on the web and in design tools over the years. It’s simply a concise way to represent a RGB notation. The first 2 hexadecimal digits represent the red value, the middle 2 represent the green value and the last two represent the blue value.
For the vast majority of us, it’s really difficult to think in a hexadecimal manner (16 digits, from 0 to 9 and from A to F), so when working with HEX color codes most people use tools like color pickers to visually select a color and get its HEX color code value. Still, over time, many designers come to remember certain HEX color value, especially those that are in the grayscale spectrum. Good examples of such grayscale values would be #808080, #4D4D4D and #FAFAFA.
I believe that one of the reasons why HEX has been a popular way to represent colors is due to how short/compact the notation is. Otherwise though, it’s most often very difficult to just look at a HEX color code and have a good idea of what color it represents.
HEX shorthand: when both values for each color channel (red, green and blue) are the same, the HEX color code notation can be shortened to just 3 hexadecimal digits. For example, the #88AA33 color can be represented as just #8A3. It’s common to use colors like #333, #FFF, #000, which make for a short way to represent grayscale color values.
HEX-8 (#RRGGBBAA): An additional optional set of two hexadecimal digits was introduced for HEX color codes. This extra set of digits represents the alpha value for the color (its level of transparency). For example, #61FAFF7F represents a light blue at 50% opacity. Refer to this CSS Tricks article for more details about the #RRGGBBAA color notation.
HSL
TL;DR → The HSL color notation (short for Hue, Saturation and Lightness) is a more human-friendly way of specifying colors on the web. The notation looks like this: hsl(325, 100%, 72%), where the Hue is a value between 0 and 360, and the saturation and lightness are values between 0% and 100%. An alpha transparency value can also be provided like this: hsla(325, 100%, 72%, .5)
The HSL color notation (Hue, Saturation and Lightness), is rapidly gaining popularity because it’s a color notation that was created with humans in mind and it’s much easier to tweak HSL color values and have a good idea what impact it will have on the resulting color.
The Hue represents the base color itself and is a value between 0 and 360 and represents the rotation degree on the hue wheel. On the hue wheel, 0° is red and 360° is red again. Here’s a simple hue wheel that illustrates:
The Hue value is perhaps the only value in the HSL color notation that’s a bit more difficult to guess, unless you’ve been working with hue value for a while and have a good mental model of where certain hues are on the wheel.
The 2nd value in the HSL color notation, the Saturation, is the amount of gray in a given color. A saturation value of 0% will result in a completely grayscale color, and a saturation value of 100% will result in a very vibrant color without any gray.
The final value in HSL, the Lightness, is for the amount of white in a color. 0% lightness will always be black and 100% lightness will always be white, no matter the other values. 50% lightness is the base color without any white or black mixed-in.
Just like with the RGB color notation, the CSS Color Module Level 4 introduces a few more syntax options for HSL, like specifying the alpha value without the need for hsla, as in hsl(85, 100%, 85%, .33) or the notation without commas: hsl(85 100% 85%) and hsl(85 100% 85% / .33).
Looking ahead: LCH, LAB & relative color syntax
Some very neat additions to colors in CSS are coming soon, thanks CSS Color Level 4. Among them are the LCH and LAB color values as well as the relative color syntax.
The LCH and LAB color spaces are new color spaces that will allow us to access colors that are not in the sRGB color space. Modern screens often have the ability to display a much wider range of colors than what’s available with sRGB, and both LCH and LAB will allow to access those colors and make our content on the web that much more colorful!
LCH and LAB also are perceptually uniform, which helps with a problem that can happen with HSL where certain hues appear much lighter or darker to the human eye, and therefore a HSL color value of the same lightness value can appear much different to the eye in terms of lightness. These new color spaces where made especially to be easy for humans to grasp and play with.
The relative color syntax will allow us to transform one color value notation into another, making it seamless to use a HEX color value as part of a HSL notation, for example. This will come in very handy when using CSS variables.
All in all, this is a rather large topic that I won’t be able to discuss in depth here, but if you’re curious I suggest you read this article by Chris Coyier as well as this article by Lea Verou for a very good overview of what’s to come and what will soon be possible with colors in CSS.
Examples of accessible color palettes
Get inspired to create your own accessible designs and dive right into a color conscious template.
What is an accessible color palette?
Understand how color theory and contrast contribute to creating inclusive communications.
An accessible color palette ensures readers with visual impairments and disabilities can see and understand your design. Contrast is key to achieve this goal. Elements with low contrast are hard to see, even for those without visual impairments.
In other words, designing for accessibility benefits your entire audience.
What is contrast, exactly?
Contrast is the brightness or vibrancy of a color or element when compared to another element. For example, black text on a white background is high contrast. On the other hand, yellow text on a white background is low contrast.
The WCAG 2.1 specify the contrast ratio for body text should be at least 4.5:1.
Why use an accessible color palette?
Leave no audience member behind by combining complementary colorrs consciously.
If your designs aren’t legible, you’ll have a hard time connecting with your audience. What’s worse, if your designs are inaccessible, you may even alienate your audience — both those with visual impairments and those conscious of accessible needs.
Simply put, using an accessible color palette is the right thing to do for everyone.
