Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
Free tool

Color converter

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.

R0
G212
B255
HEX
hex
#00d4ff
RGB
rgb
rgb(0, 212, 255)
HSL
hsl
hsl(190, 100%, 50%)
HSB/HSV
hsb/hsv
hsb(190, 100%, 100%)
CMYK
cmyk
cmyk(100%, 17%, 0%, 0%)

What is Color Converter?

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.

How to Use Color Converter

  1. 1

    Enter a color

    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.

  2. 2

    Fine-tune with sliders

    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.

  3. 3

    Copy the format you need

    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.

Features

  • Converts between HEX, RGB, HSL, HSB/HSV, and CMYK color formats instantly
  • Auto-detects input format -- paste any color string and it just works
  • Visual color picker for intuitive selection alongside text input
  • RGB sliders (0-255) for precise channel-level adjustments
  • HSL sliders for hue, saturation, and lightness control
  • Large color preview swatch that updates in real time
  • One-click copy button for each output format
  • Supports shorthand HEX (#0df expands to #00ddff)
  • All conversions use standard color math -- no approximations
  • Zero server calls -- runs entirely in your browser

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool
See all CSS & Design tools

Frequently Asked Questions

What is the difference between HSL and HSB/HSV?+
HSL and HSB both describe colors using Hue, Saturation, and a third component -- but that third component differs. HSL uses Lightness: at 50% lightness you get the pure color, 0% is black, 100% is white. HSB uses Brightness: at 100% brightness and 100% saturation you get the pure color, reducing brightness darkens it. HSB matches the color pickers in Photoshop and Figma, while HSL is more commonly used in CSS. This tool shows both so you can use whichever your workflow requires.
When should I use CMYK instead of RGB?+
Use CMYK when designing for physical print -- brochures, business cards, posters, packaging. Printers mix Cyan, Magenta, Yellow, and Black inks, so CMYK maps directly to the printing process. RGB and HEX are for screens (websites, apps, digital media). Some colors that look vivid on screen (especially bright blues and greens) cannot be reproduced in CMYK, so always check your CMYK values before sending designs to print.
Why does my HEX color look different in CMYK?+
HEX and RGB define colors in the additive color model (light emitted by screens), while CMYK uses the subtractive model (inks absorbing light on paper). The gamut (range of possible colors) differs between these models. Highly saturated screen colors -- especially neon greens, electric blues, and bright magentas -- fall outside the CMYK gamut and get approximated to the closest printable color. This tool does a mathematical conversion, but for production print work you should verify colors with your printer's ICC color profile.
Can I paste a color from Figma or Photoshop?+
Yes. Figma typically copies HEX values like #00D4FF or RGB values like rgb(0, 212, 255) -- both are auto-detected. Photoshop often shows HSB values -- paste them as hsb(190, 100%, 100%) and the tool converts instantly. You can also paste HSL or CMYK values from any design tool.
Is the conversion accurate?+
Yes. The tool uses standard IEEE color math for all conversions. HEX to RGB is exact (direct base-16 to base-10). RGB to HSL and HSB use the standard formulas with proper edge-case handling for achromatic colors. CMYK conversion uses the standard formula -- for absolute print accuracy, an ICC profile-based conversion is recommended, but the mathematical conversion is correct for general use.
Does this tool support alpha/transparency?+
This version converts opaque colors (no alpha channel). If you paste a HEX value with alpha (like #00d4ff80), only the first 6 characters are used. Support for RGBA, HSLA, and 8-digit HEX may be added in a future update.