Syntax - Web Development Podcast

cccolor
HEX, RGB & HSL color picker

background
  • •••
  • #FFB3CB
  • #FFB3CBFF
  • 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.

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.

SVG generators, tools & design resources

pppalette
color palette generator

hhhue
curated color palettes

ssshape
SVG blob generator

llline
SVG line generator

dddepth
AI-generated 3D shapes

sssvg
SVG reference

SVG Spinners
How to make them

ffflux
fluid SVG gradients

tttexture
grunge textures

nnnoise
noise texture generator

aaabstract
abstract backgrounds

rrrepeat
repeating SVG shapes

wwwatercolor
watercolor backgrounds

hhholographic
holographic backgrounds

mmmotif
SVG patterns with a 3D feel

gggrain
grainy gradient generator

uuunion
mesh-like gradient generator

nnneon
glowing SVG shapes

ccclaymoji
emoji maker

iiisometric
isometric design builder

sssurf
SVG wave generator

qqquad
generative patterns

dddraw
freehand SVG drawing tool

pppointed
SVG arrow maker

cccloud
cloud SVGs

ssstar
star SVGs

lllove
heart SVGs

bbblurry
blurry background shapes

uuundulate
make some SVG ripples

ccchaos
wild wavy SVG shapes

oooscillate
curvy line patterns

ffflurry
make it rain, SVG-style

cccoil
SVG spiral waves

ssspiral
SVG spiral patterns

cccircular
SVG gradient circle patterns

rrreplicate
SVG line pattern generator

tttwinkle
bursting line patterns

ssscales
gradient SVG patterns

rrrainbow
colorful background patterns

ttten
10 Print-inspired pattern generator

ssscribble
make SVG scribbles

pppixelate
pixel art patterns

sssquiggly
wavy line patterns

ooorganize
SVG grid patterns

vvvortex
spinning circle patterns

gggyrate
spinning geometric patterns

llleaves
organic SVG backgrounds

ggglitch
glitchy shapes

ppperspective
shapes that vanish

sssurface
SVG circles that feel 3D

hhhorizon
Cyberpunk-style backgrounds

sssplatter
make funky SVG shapes

ssspill
generate melting SVGs

ssspot
organic speck patterns

wwwhirl
twisting line patterns

rrreflection
SVG circle patterns

bbburst
confetti generator

dddynamite
decorative SVG shapes

dddivided
split SVG shapes

lllook
fun line icons

dddoodle
hand-drawn doodles

pppsychedelic
psychedelic backgrounds

rrrasterize
convert SVG to PNG

eeencode
encode SVG to Base64

rrready?
support chart for web features

CSS Selectors
A Visual Guide

Pick + Convert colors

CCCOLOR

A simple color picker app for Mac, Windows & Linux

Get it here