What is the difference between HEX and RGB?

They represent the same information in different notations. HEX encodes red, green, and blue values as a six-character string (e.g. #FF4D00), while RGB spells them out as three decimal numbers (e.g. rgb(255, 77, 0)). Both describe the same color — use whichever format your tool or code expects.

How do I check if two colors have enough contrast?

Calculate or look up the contrast ratio between the foreground and background color. WCAG AA requires at least 4.5:1 for body text and 3:1 for text larger than 18px (or bold 14px). Carbide's Color Picker shows you the HSL lightness of any color, which makes it easy to spot low-contrast pairs before you commit to them.

Why does my gradient look muddy in the middle?

This usually happens when the two end colors are on opposite sides of the hue wheel and the midpoint passes through a desaturated or gray zone. Try adding a third color stop at the midpoint to guide the transition, or keep both colors within 90° of each other on the hue wheel. Shifting the midpoint stop slightly in hue also helps.

Does Carbide send my color data to a server?

No. Both the Color Picker and Gradient Maker run entirely on your device. Carbide is built offline-first and private — your color values, palette exports, and gradient CSS strings never leave your phone or browser.

Guide

How to pick colors and build palettes for any project

Choosing colors is one of the most practical skills in design, yet most guides skip the fundamentals and jump straight to trends. This article explains how color formats work, how to pick combinations that are easy to read, and how to turn a palette into a smooth gradient — using tools that run entirely on your device, no internet required.

Understanding HEX, RGB, and HSL

Every color on a screen is described in one of three common formats. HEX (e.g. #FF4D00) is a six-character shorthand used in CSS and design tools — each pair of characters represents red, green, and blue on a 0–255 scale. RGB makes that scale explicit: rgb(255, 77, 0). HSL (Hue, Saturation, Lightness) is the most human-friendly: hue is the angle on the color wheel (0–360°), saturation controls how vivid the color is, and lightness controls how bright. HSL is the easiest format to adjust when you want a color to feel darker, lighter, or more muted without changing its hue.

Picking accessible, readable color combinations

Contrast is the single most important factor in readability. The WCAG standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A common pitfall is pairing two mid-lightness colors — both look fine on their own but clash when placed together. A reliable approach: keep one color very light (HSL lightness above 85%) and one very dark (below 20%), then use your accent color only for interactive elements. Use Carbide's Color Picker to inspect any HEX, RGB, or HSL value instantly on your device — it works offline and never uploads your color data anywhere.

Building a practical color palette

A working palette rarely needs more than five roles: background, surface, primary text, secondary text, and one accent. Start with a neutral background (low saturation, high lightness in light mode; low saturation, low lightness in dark mode). Pick your accent by choosing a hue on the color wheel, then set saturation high (60–80%) and lightness to around 50%. Derive your text colors by shifting lightness to near-black or near-white. Keep all your values in one place — Carbide's Color Picker lets you switch between HEX, RGB, and HSL views instantly, so you can copy the right format for wherever you need it, all without a network connection.

Creating smooth gradients

A gradient is a transition between two or more colors. The most reliable gradients connect colors that are close on the HSL color wheel (within 60° of hue) and have a consistent lightness arc. Avoid combining pure black (#000000) with a vivid color — the midpoint often turns muddy; use a very dark tinted color instead (e.g. hsl(20, 40%, 8%)). For a three-stop gradient, place your lightest tone first, your accent in the middle, and a darker variant at the end. Carbide's free, offline Gradient Maker lets you preview and fine-tune stops in real time, then export the CSS gradient string ready to paste into your project.

Tools in this guide

Color Picker Gradient Maker

Frequently asked questions

What is the difference between HEX and RGB?: They represent the same information in different notations. HEX encodes red, green, and blue values as a six-character string (e.g. #FF4D00), while RGB spells them out as three decimal numbers (e.g. rgb(255, 77, 0)). Both describe the same color — use whichever format your tool or code expects.
How do I check if two colors have enough contrast?: Calculate or look up the contrast ratio between the foreground and background color. WCAG AA requires at least 4.5:1 for body text and 3:1 for text larger than 18px (or bold 14px). Carbide's Color Picker shows you the HSL lightness of any color, which makes it easy to spot low-contrast pairs before you commit to them.
Why does my gradient look muddy in the middle?: This usually happens when the two end colors are on opposite sides of the hue wheel and the midpoint passes through a desaturated or gray zone. Try adding a third color stop at the midpoint to guide the transition, or keep both colors within 90° of each other on the hue wheel. Shifting the midpoint stop slightly in hue also helps.
Does Carbide send my color data to a server?: No. Both the Color Picker and Gradient Maker run entirely on your device. Carbide is built offline-first and private — your color values, palette exports, and gradient CSS strings never leave your phone or browser.