Syntax - Web Development Podcast

HEX, RGB & HSL color picker

  • •••
  • #FFB3CB
  • hsl(341, 100%, 85%)
  • hsla(341, 100%, 85%, 1)
  • rgb(255, 179, 203)
  • rgba(255, 179, 203, 1)
  • oklch(84.5% 0.093 358.69)

Color Palettes

Click on the colors below to copy their value. You can select which format to use:

tone palette

warmer palette

cooler palette

complementary tint palette

complementary shade palette

analogous palette

cccolor - Clean & simple color picker for web designers | Product Hunt

about this color picker tool

🎨 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.


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.



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.



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.

SVG generators, tools & design resources

color palette generator

curated color palettes

SVG blob generator

SVG line generator

AI-generated 3D shapes

SVG reference

SVG Spinners
How to make them

fluid SVG gradients

grunge textures

noise texture generator

abstract backgrounds

repeating SVG shapes

watercolor backgrounds

holographic backgrounds

SVG patterns with a 3D feel

grainy gradient generator

mesh-like gradient generator

glowing SVG shapes

emoji maker

isometric design builder

SVG wave generator

generative patterns

freehand SVG drawing tool

SVG arrow maker

cloud SVGs

star SVGs

heart SVGs

blurry background shapes

make some SVG ripples

wild wavy SVG shapes

curvy line patterns

make it rain, SVG-style

SVG spiral waves

SVG spiral patterns

SVG gradient circle patterns

SVG line pattern generator

bursting line patterns

gradient SVG patterns

colorful background patterns

10 Print-inspired pattern generator

make SVG scribbles

pixel art patterns

wavy line patterns

SVG grid patterns

spinning circle patterns

spinning geometric patterns

organic SVG backgrounds

glitchy shapes

shapes that vanish

SVG circles that feel 3D

Cyberpunk-style backgrounds

make funky SVG shapes

generate melting SVGs

organic speck patterns

twisting line patterns

SVG circle patterns

confetti generator

decorative SVG shapes

split SVG shapes

fun line icons

hand-drawn doodles

psychedelic backgrounds

convert SVG to PNG

encode SVG to Base64

support chart for web features

CSS Selectors
A Visual Guide

Pick + Convert colors


A simple color picker app for Mac, Windows & Linux

Get it here