The fastest way to convert between RGB, Hex, and HSL color formats. Adjust sliders or type any value, see the live swatch update instantly, check WCAG contrast, find the nearest CSS named color, and copy any format in one click — all free, all in-browser.
How to Use
01
Enter a colorType a hex value, drag the RGB sliders, or use the HSL controls
02
See the live swatchThe stage fills with your color and shows the hex value centered
03
Check contrastWCAG AA badges show white and black text contrast ratios at a glance
04
Adjust opacityUse the Alpha slider for rgba() and 8-digit hex with transparency
05
Copy any formatOne click copies Hex, RGB, HSL, CSS variable, or Tailwind class
06
Use presetsClick any named color swatch below the tool to load it instantly
Output Formats
#RRGGBB / #RRGGBBAA
Standard hex notation for CSS. 8-digit version includes alpha channel.
rgb() / rgba()
Functional RGB notation. rgba() adds opacity for transparent overlays.
hsl() / hsla()
Human-readable hue, saturation, and lightness. Easier to reason about than RGB.
CSS Custom Property
Copies a ready-to-paste --color-primary: #hex; variable declaration.
Tailwind Class
Finds the nearest Tailwind 500-weight color class (e.g. orange-500).
CSS Named Color
Displays the closest CSS named color (e.g. darkorange) for quick reference.
Frequently Asked Questions
Each RGB channel (0–255) converts to a two-digit hexadecimal number. Red 249 → F9, Green 115 → 73, Blue 22 → 16, giving #F97316. This tool does the conversion instantly as you drag the sliders.
HSL stands for Hue, Saturation, Lightness. It's more intuitive than RGB because you can adjust how vivid a color is (saturation) or how light it is (lightness) independently, without changing the hue. Great for building color scales.
It calculates the contrast ratio between your selected color and both pure white and pure black text. WCAG AA requires a ratio of at least 4.5:1 for normal text. A green "Pass" means the text is accessible; red "Fail" means it is not.
The Alpha slider controls transparency from 0% (fully transparent) to 100% (fully opaque). When alpha is below 100%, the RGB copy output switches to rgba() and the hex output extends to 8 digits with the alpha as the last two hex characters.
The tool compares your color against Tailwind's full color palette using Euclidean distance in RGB space and returns the closest named class. It's an approximation — the actual swatch color may differ slightly from your input.
No. Everything runs entirely in your browser using JavaScript. Your colors are never sent to any server. The recent colors history is kept in memory only and resets when you close the tab.