~/devtools / color
tool::color
Color
Converter
Convert colors between HEX, RGB, and HSL formats in real-time. Pick a color visually or type in any format.
// color formats
HEX: #RRGGBB — RGB: rgb(R, G, B) — HSL: hsl(H°, S%, L%)
// color picker
#00FF88
// formats
HEX
RGB
HSL
// presets
ad · 300×250
// about this tool
What is a Color Converter?
Web development and design work frequently requires switching between HEX, RGB, and HSL color formats. Design tools commonly output HEX, while CSS sometimes benefits from rgb() or hsl() for better readability.
HEX (#RRGGBB) is the most common web color notation. RGB expresses each channel's intensity from 0 to 255. HSL — Hue, Saturation, Lightness — is more intuitive for adjusting colors and is great for building palettes.
This tool converts between all three formats in real time. You can also pick a color visually using the color picker. Converted values can be copied with a single click for direct use in CSS.
Use Cases
- ▸Convert HEX values from Figma or Sketch to CSS RGB
- ▸Transform brand colors into multiple formats for a design system
- ▸Adjust lightness via HSL to create hover or disabled states
- ▸Prepare color contrast analysis for accessibility review
- ▸Determine values for CSS custom properties (--color-primary, etc.)
FAQ
Q. What is the difference between RGB and HSL?
RGB represents colors as combinations of red, green, and blue light. HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), making it more intuitive for adjusting colors.
Q. Can I enter a 3-digit HEX (#RGB)?
#RGB is shorthand for #RRGGBB. For example, #f0a equals #ff00aa. The tool accepts 3-digit HEX and automatically expands it to 6 digits.
Q. Is alpha (transparency) supported?
The current version supports fully opaque colors (alpha = 1) only. Support for rgba() and hsla() transparency conversion is planned for a future update.
// related tools