If you work with design, social media or web pages, you'll see colors written in several ways. They're just different ways of naming the same thing.
The three formats
- HEX, like
#E4007C: the most common in web design. It's three pairs of digits: red, green and blue. - RGB, like
rgb(228, 0, 124): the amount of red, green and blue, from 0 to 255. - HSL, like
hsl(330, 100%, 45%): hue, saturation and lightness. It's handy for creating variations, such as a lighter shade.
With the Color Converter you type a color in any of them, or pick it with the selector, and get the other two instantly, with copy buttons. It accepts 3-digit HEX: #F0A is the same as #FF00AA.
Pulling colors from an image
Got a logo or a reference photo? Color Palette from an Image groups the main tones and gives you their HEX codes. Tap a color to copy it, or copy them all as CSS variables. It's an approximation: similar colors are grouped together.
Practical uses
- Create a favicon from your logo.
- Convert an SVG to PNG at the size you need.
- Make a logo transparent with Remove Solid Color Background.
Accessibility tips
Aim for good contrast between text and background, and don't rely on color alone to communicate something. Light gray text on white can be unreadable for many people.