Command Palette

Search for a command to run...

CO

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats

Opacity100%
r
102
g
126
b
234
HEX#667EEA
HEXA#667EEAFF
RGBrgb(102, 126, 234)
RGBArgba(102, 126, 234, 1)
HSLhsl(229, 76%, 66%)
HSLAhsla(229, 76%, 66%, 1)
HWBhwb(229 40% 8%)
LABlab(56% 22 -57)
LCHlch(56% 61.1 291.1)
OKLABoklab(0.63 0 -0.16)
OKLCHoklch(0.63 0.16 270)
#667EEA
Category:color
Mode:Offline
Version:1.0.0
Access:Free

What is Color Picker & Converter?

Color Picker & Converter interface on Toolz.dev - Pick colors and convert between HEX, RGB, and HSL formats

Color Picker & Converter is a free online tool that lets you select colors visually and convert between popular color formats including HEX, RGB, and HSL. It is an essential utility for web designers, developers, graphic artists, and anyone working with digital colors.

The tool provides an interactive color picker with a spectrum selector, brightness and saturation controls, and an opacity slider. As you pick a color, you instantly see the corresponding HEX code, RGB values, and HSL values, making it easy to grab the exact format you need for your project.

Beyond basic color picking, the tool also generates complementary, analogous, and other color harmony palettes based on your selected color. This helps you quickly build cohesive color schemes for websites, apps, and design projects. All processing runs in your browser with no installation required.

HEX, RGB and HSL are three ways of writing the same sRGB colour rather than three colour spaces, so converting between them is exact and lossless in both directions. HSL is the useful one to reason in, because adjusting lightness or saturation while holding hue keeps colours in the same family, which is far harder to do by editing hex digits. Modern CSS adds notations that reach outside sRGB, such as oklch and display-p3, and those can describe colours no hex value can. Anything expressed here stays inside sRGB, which is the safe common ground every display can show. The eyedropper, where the browser provides one, samples the rendered pixel rather than the source colour, so a value picked from an image that has been scaled or colour-managed can differ slightly from the original file.

How to use Color Picker & Converter?

1

Pick a color

Use the visual color picker to select a color by clicking on the spectrum, adjusting the hue slider, or entering a specific color value in any format.

2

View color values

See the selected color displayed in HEX, RGB, and HSL formats simultaneously. Each format updates in real-time as you adjust the color.

3

Explore color harmonies

View complementary, analogous, triadic, and other color harmony suggestions based on your selected color to build cohesive palettes.

4

Copy the color code

Click on any color format to copy it to your clipboard. Use it directly in your CSS, design tool, or application.

Key Features

Alpha Channel Support

Reads and writes 8-digit HEX and rgba, so a colour with transparency survives the conversion rather than losing its alpha

Multi-Format Conversion

Instantly convert between HEX, RGB, and HSL color formats with a single color selection

Visual Color Picker

Interactive color spectrum with hue, saturation, and brightness controls for precise color selection

Color Harmony Palettes

Generate complementary, analogous, triadic, and split-complementary color schemes automatically

Frequently Asked Questions

Split the six-digit HEX code into three pairs and read each pair as a hexadecimal number from 0 to 255. In #FF5733, FF is 255 (red), 57 is 87 (green), and 33 is 51 (blue), giving rgb(255, 87, 51). Paste the HEX code into the picker and the RGB and HSL values appear immediately.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

colorpickerconverterhexrgbhslpalettecomplementaryanalogous