Color picker & CSS gradient generator for designers

Pick any color and read HEX, RGB and HSL instantly

The Color Picker keeps the whole job on one screen: tap the big swatch, choose a color in your browser's color dialog, and the tool converts it live into all three formats — HEX, RGB and HSL — each with its own copy button. No hunting through submenus, no converting by hand, no ads between you and the code.

Because the three values update together, the picker doubles as a converter in every direction: paste-free HEX to RGB, RGB to HSL, or back again. When you land on the right color, one tap copies the exact string your CSS, design tool or brand document needs — and a share button turns the swatch plus its codes into an image you can drop into a chat with a client or teammate.

HEX, RGB and HSL — how the three color formats relate

HEX, RGB and HSL are three notations for the same color — none is "more correct", they just answer different questions. Take Carbide's own accent orange as the example:

• HEX — #FF4D00: six hexadecimal digits, two per channel (red FF, green 4D, blue 00). The web's compact default and what most design tools show first.
• RGB — rgb(255, 77, 0): the same three channels written in decimal, 0 to 255 each. The form to reach for in code, especially when you need transparency: rgba(255, 77, 0, 0.5).
• HSL — hsl(18, 100%, 50%): hue as a position on the color wheel (0–360°), then saturation and lightness as percentages. The format to think in when you want a lighter, darker or more muted version of a color.

How to get a color code from an image

Most real color questions start with a picture: a logo, a screenshot, a product photo whose exact shade you need to match. Here is the workflow:

• 1. Open the image on your screen — in a browser tab, or in the Image Editor if you want to crop or zoom into the exact area first.
• 2. Open the Color Picker alongside it and tap the swatch to bring up your browser's color dialog.
• 3. Choose the eyedropper — most desktop browsers include one in that dialog — and click the pixel you want to sample.
• 4. Read the result: the picker shows that exact pixel's HEX, RGB and HSL codes, each one a tap away from your clipboard.

Build a palette from one base color

One base color is enough for a whole interface if you work in HSL. Take the HSL reading from the Color Picker, keep the hue and saturation fixed, and step the lightness — around 90% gives you a background tint, 70% a hover state, 50% the base, 30% a text-safe shade. Lowering the saturation instead produces the muted neutrals that sit quietly behind content.

For accents, move the hue: +180° gives the complementary color, ±30° gives analogous neighbors that always look deliberate together. Copy each variant's HEX as you go and you have a palette in minutes. The color guide walks through choosing and combining colors step by step, and if the palette is headed for photo work, the online image editor guide shows where each color slots in — text, shapes and watermarks.

Design a CSS gradient and copy the code in one click

The Gradient Maker turns gradient design into three moves: pick a start color, pick an end color, and drag the angle slider anywhere from 0 to 360 degrees. The preview updates live as you adjust, so you judge the blend by eye instead of guessing at numbers.

When it looks right, press copy CSS and the tool puts a complete, paste-ready declaration on your clipboard — for example: background: linear-gradient(90deg, #ff4d00 0%, #2f6bff 100%);. Drop it into any stylesheet, style attribute or CSS-in-JS block and the result renders identically to the preview. The whole thing works on a phone as well as a desktop, so you can sketch a background gradient wherever the idea strikes.

Linear vs radial gradients — the CSS syntax explained

Both gradient types share the same building block — a comma-separated list of color stops — and differ only in how they spread the colors:

• Linear: background: linear-gradient(90deg, #ff4d00 0%, #2f6bff 100%); — colors flow along a straight line; the angle sets the direction (0° points up, 90° points right).
• Radial: background: radial-gradient(circle, #ff4d00 0%, #2f6bff 100%); — colors radiate outward from the center; there is no angle to set.
• To convert one into the other, keep the stop list and swap the function name — dropping the angle for radial.

Frequently asked questions