Convert colors between HEX, RGB, HSL, HSB/HSV, and CMYK instantly. Pick a color or paste any format -- all conversions happen live in your browser.
A color converter translates color values between different color models used in web design, graphic design, and print production. Each color model represents colors differently: HEX uses a six-character hexadecimal code (#RRGGBB) that is the standard for CSS and HTML. RGB defines colors as a mix of Red, Green, and Blue channels from 0 to 255, which maps directly to how screens emit light. HSL describes colors by Hue (0-360 degrees on the color wheel), Saturation (intensity as a percentage), and Lightness (brightness as a percentage) -- making it the most intuitive model for designers who think in terms of 'make this color lighter' or 'more saturated.' HSB (also called HSV) is similar but uses Brightness instead of Lightness, matching how tools like Photoshop and Figma present their color pickers. CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in physical printing -- essential when designing for print. This tool auto-detects which format you paste in and converts to all five formats simultaneously. You can also use the visual color picker or the RGB/HSL sliders for precise adjustments. Every conversion runs entirely in your browser using standard color math -- no data is sent to any server.
Use the color picker to visually select a color, or type/paste a color value directly into the text input. The tool accepts HEX (#00d4ff or #0df), RGB (rgb(0, 212, 255)), HSL (hsl(190, 100%, 50%)), HSB/HSV (hsb(190, 100%, 100%)), or CMYK (cmyk(100%, 17%, 0%, 0%)) formats. The input format is auto-detected.
Switch between RGB and HSL slider modes to adjust the color precisely. RGB sliders control individual Red, Green, and Blue channels from 0 to 255. HSL sliders let you adjust Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). The preview swatch and all format values update in real time.
All five color formats are displayed simultaneously with a Copy button next to each. Click Copy to place the formatted value on your clipboard ready to paste into CSS, design tools, or print specifications.
Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.
Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.
Design custom border-radius shapes with independent corner controls and live preview.
Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.
Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.
Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.