Color Picker - Get HEX, RGB & HSL Codes | Morph

Pick a color, get the code

Morph's color picker lets you choose any color visually and instantly read its code in the formats you actually use: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`), and HSL (`hsl(214, 64%, 53%)`). Drag across the color field, fine-tune with the hue slider, and copy the value straight into your CSS, design file, or wherever you need it.

Three formats, one source of truth

All three codes describe the same color — they're just different ways of writing it, and each has a job:

HEX is the compact form you'll paste into most CSS and design tools.
RGB spells out the red, green, and blue channels (0–255 each), which is handy when you're adjusting one channel or working with code that expects separate values.
HSL describes hue, saturation, and lightness — the most intuitive format when you want to make a color a little lighter, more muted, or shift it toward a neighboring hue without trial and error.

Change the color any way you like and all three codes stay in sync, so you can grab whichever one your project needs.

Built for real workflows

Designers use it to nail down a palette and copy exact values into a design file or a style guide. Front-end developers use it to grab a HEX for a button or convert a designer's RGB into HSL to build a hover state. Anyone tweaking a theme, a chart color, or an email template can land on the precise shade and copy it in one click. Because HSL is right there next to HEX, building lighter and darker variants of a base color is far easier than eyeballing hex digits.

Runs in your browser, privately

The color picker is pure browser code — the color math and the interface both run on your device. There's no upload, no account, and nothing sent to a server. It loads fast and keeps working offline once the page is open, because picking a color and computing its codes never needs a network connection.

A few practical notes

When you copy a HEX value, it's ready to paste into CSS as-is. If you need a color with transparency, convert to RGB and add an alpha channel (`rgba(...)`) in your code. To build a consistent palette, pick one base color and use the HSL lightness value to generate tints and shades by nudging the lightness up or down while keeping hue and saturation fixed — that keeps a set of colors feeling like a family rather than a random assortment.

How to use

Choose a color — Drag inside the color field to set saturation and brightness, then use the hue slider to set the base color.
Read the codes — HEX, RGB, and HSL values update together as you move, so you always see all three for the current color.
Copy the format you need — Copy the HEX for most CSS and design work, RGB to adjust channels, or HSL to build lighter and darker variants.
Paste it into your project — Drop the value straight into your stylesheet, design tool, or theme settings.

Frequently asked questions

What color formats does it give me?

It shows HEX, RGB, and HSL for every color you pick, all kept in sync, so you can copy whichever format your project needs.

Why would I use HSL over HEX?

HSL makes it easy to adjust a color intuitively — raise the lightness for a tint, lower it for a shade, or shift the hue — without guessing at hex digits.

Can I get a color with transparency?

Pick your color, copy the RGB values, and add an alpha channel in your code as rgba(...) to set the transparency level you want.

Does it send my data anywhere?

No. The picker runs entirely in your browser. There's no upload and nothing is sent to a server — it even works offline once loaded.

How do I build a matching palette?

Pick a base color and use its HSL value, then nudge the lightness up or down while keeping hue and saturation fixed to create tints and shades that feel like a set.