Unleash the spectrum with an advanced color picker

Colors bring life and are so crucial to the way we perceive things. They help us understand the world and can impact our moods and emotions. The same goes for the internet, and that’s where color pickers come in. 

Imagine if your browser was limited to HTML's named color spectrum. Darkslategrey, mediumvioletred, etc. Then, you’d be able to use only 140 colors. 

A developer named Anthony Lieuallen created the color wheel for named colors. While it looks incredibly cool, I’m sure it would raise an eyebrow or two among many UX designers.

You need as many colors as possible to achieve complete creative freedom when designing for the web. You’ll ideally want to have as many of the ~1 million different shades of colors visible to the human eye as possible or even as many as a tetrachromat can see, which is ~100 million different colors, and that’s where HEX, HSLA(), OKLCH(), and other complete color profiles come in.

These color profiles can more than cover the human spectrum, even the ones with “superpowers.”

The three main ways to pick a color are:

1. HTML, where you enter the names of colors like Red, Tomato, or Crimson from the wheel above.
2. HEX, where you use codes made of numbers and letters like #FFFFFF for white or #000000 for black. The codes tell the computer how much red, green, and blue it should mix. 
3. HSL(A), where you pick a color with three numbers. One is for the type of color (hue), another is to determine if you want a bright or dull color(Saturation), and a third is to choose how light or dark you want the color (lightness). This also supports an alpha channel that helps you choose the opacity.

Named HTML colors.

Named HTML colors all have regular names as their codes. This is probably the easiest to remember, mainly because there are only 140 of them.

Here are a few examples of the various codes you can use as colors:

Named color: Black
Hex: #000000
RGB: 0, 0, 0
HSLA: 0, 0%, 0%, 1
OKLCH: 0, 0, 0

Named color: White
Hex: #FFFFFF
RGB: 255, 255, 255
HSLA: 0, 0%, 100%, 1
OKLCH: 100, 0, 0

Named color: Maroon
Hex: #800000
RGB: 128, 0, 0
HSLA: 0, 100%, 25%, 1
OKLCH: 25, 48, 40

Check out this table for all the named HTML colors in RGB, HSLA, OKLCH, and HEX codes.

Hex colors.

Hexadecimal color codes (hex codes) commonly represent colors in the RGB color model, particularly for web design and digital graphics. Each hex code consists of six hexadecimal digits, which define the levels of red, green, and blue in the color. The six digits are typically preceded by a #. You'll sometimes see an additional two characters if the color has an alpha channel, which indicates opacity.

• A hex color code is typically written as #RRGGBB , where RR , GG , and BB are two-digit hexadecimal numbers.
• Each pair of digits represents the intensity of the red, green, and blue channels.

HSL(A) colors.

HSL stands for hue, saturation, and lightness. The three components used in this color model. The HSL color model is designed to represent colors in a more intuitive way to human perception than the RGB model. Here's a breakdown of each component:

1. Hue (H):
2. Saturation (S):
3. Lightness (L):

Some consider it a more human-friendly way to describe and manipulate colors than RGB. This color profile is helpful in design and art, where intuitive adjustments to color properties are important.

Play with CSS.

You can use a few CSS tricks that automatically change colors on your website. For example, you could make a button that changes color when you click it or make the whole website switch to night mode colors.

Those are the basics of how CSS lets you pick and play with colors for websites. It gives you many options to make your colors look how you want.

New excellent color profiles attempt to make color spaces more vibrant and ensure that colors look the same to everyone, even on different screens. More on that later.

Try it for yourself.

Click the little colored square, select the color #fbbf25 , and hit enter.

The color picker looks like a simple feature, but once you digest it, you quickly realize how much goes into building one. 

The toddle color picker.

We recently revamped our color picker in toddle and released it as a package you can install in your project. Color pickers are great if you are building a Figma clone, a new no-code tool, or a competitor to Google Slides. It’s a powerful component that lets you wield the power of color. 

The package currently supports HEX and HSLA, and you can clone and republish it with RGB and OKLCH support. The community would love it.

You can switch between the two color profiles and specify the colors you want for each element; it even includes an eyedropper. Whether you prefer HEX or HSLA, you get a powerful color picker with everything you need. 

This color picker consists of 9 different components. Each component controls a separate part of the color picker. 

1. Panel - The panel that opens when you choose a color. 
2. Shade picker - Chooses the shade of color
3. Hue picker - Chooses the color
4. Transparency slider - Controls the color's opacity. 
5. Tooltip - Controls the eyedropper to select a color
6. Text input - Allow hex code inputs to choose a hex color
7. Number input - To allow entries that control the HSLA inputs.
8. Popover menu - Opens the input box to type in your color values
9. Color picker - Shows the color picked once it’s selected

The beauty of the component is that each component can be edited separately. With little effort, you can add support for color profiles like OKLCH, RGB, CMYK, or even Pantone.

Copy ours or build your own, but please do share.

We try to publish our core components as packages, making them freely available to all users. Browse some of them here . This is the right approach because we know how long it takes to make software work well. When components are freely available, they are easier to modify and improve. If there's one thing Github has taught us, sharing our work benefits us all.