Convert between HEX, RGB, HSL color formats instantly. Pick colors and get CSS codes. Free online color converter for de...
Color management is essential for designers, developers, and digital creators. Our color converter supports all major web color formats: HEX (with and without alpha), RGB and RGBA, HSL and HSLA, and CMYK for print applications. The built-in color picker allows visual selection, while the converter ensures you always have the exact digital values you need. Whether you're matching brand colors, creating gradients, or ensuring accessibility compliance, this tool provides the precise color data you need for web design, graphic design, and digital art projects.
HEX, RGB, RGBA, HSL, HSLA, and CMYK. We show conversions between all formats.
Yes, use the color picker to select any color and see its values in all supported formats.
Yes, the CMYK conversion is useful for print design, though always verify with your print provider.
All modern browsers support the full color range. We provide exact values for precise matching.
Every color on a screen is a mix of red, green, and blue light — but designers, developers, and design tools describe that mix in different notations. HEX is compact and universal in CSS, RGB maps directly to how displays work, and HSL matches how humans actually think about color. Converting between them is mechanical; knowing when to use each is craft. This guide covers both.
An RGB color gives each channel an intensity from 0 to 255 — that's 256 levels per channel and 256³ = 16,777,216 possible colors, the standard 24-bit palette. rgb(255, 0, 0) is pure red; rgb(0, 0, 0) is black (all light off); rgb(255, 255, 255) is white (all channels full). Equal values on all three channels always produce a neutral gray. An optional fourth value, alpha, adds transparency: rgba(0, 0, 0, 0.5) is 50% transparent black, the workhorse of overlays and shadows.
A HEX code is simply the three RGB channels written in hexadecimal and concatenated: #RRGGBB. Hexadecimal digits run 0–9 then A–F, where FF equals 255. Worked example: rgb(26, 132, 102) → 26 = 1A, 132 = 84, 102 = 66 → #1A8466. Going the other way, split #FF6B35 into FF (255), 6B (107), 35 (53) → rgb(255, 107, 53), a warm orange. Three-digit shorthand doubles each digit: #F80 means #FF8800. Because HEX and RGB encode identical information, conversion between them is always lossless.
HSL reorganizes the same color space into Hue (position on the color wheel, 0–360°: red at 0°, green at 120°, blue at 240°), Saturation (0% gray to 100% vivid), and Lightness (0% black to 100% white). Its power is editability: to get a hover state, keep hue and saturation and nudge lightness; to build a monochrome palette, hold hue and vary the other two; to find a complementary accent, add 180° to the hue. Tasks that require recalculating all three RGB channels become single-slider adjustments in HSL, which is why modern design systems define palettes in it.
Beautiful palettes fail if people can't read the text. The WCAG guidelines require a contrast ratio of at least 4.5:1 between text and its background for normal text, and 3:1 for large text (18pt+, or 14pt bold). Contrast is computed from relative luminance, which tracks the L-ish dimension of your colors: light gray text on white (#999 on #FFF ≈ 2.8:1) fails; #595959 on white (≈ 7:1) passes comfortably. Roughly 8% of men have some form of color-vision deficiency, so never encode meaning in hue alone — pair red/green status colors with icons or labels.