Color Picker & Converter
Pick a color or enter a HEX/RGB value to instantly convert between HEX, RGB, HSL and CMYK, plus get CSS output, shades, tints and contrast info.
Disclaimer: This tool runs entirely in your browser -- nothing you enter is sent to or stored on our servers.
Understanding Color Formats
Color representation in digital design uses multiple formats. HEX (#RRGGBB) is the most common in CSS and design tools, using hexadecimal values 00-FF for each red, green, and blue channel. RGB (red, green, blue) uses decimal values 0-255 per channel. HSL (hue, saturation, lightness) is often more intuitive for designers -- hue is the color angle 0-360 degrees, saturation is color intensity 0-100%, lightness is brightness 0-100%. CMYK (cyan, magenta, yellow, key/black) is used primarily for print design, since it models how physical ink absorbs light rather than how a screen emits it.
Color accessibility matters for real users: ensure sufficient contrast ratio between text and background for WCAG AA compliance (minimum 4.5:1 for normal text, 3:1 for large text). Dark text on white has a ratio of 21:1; light grey text on white may fail at under 2:1. Use this picker to find accessible color combinations, convert between formats for cross-tool compatibility, or build consistent palettes -- HSL is particularly useful for creating shades and tints by adjusting only the lightness value while keeping hue and saturation fixed.
Worked Example
The color #00D4C8 (SmartUtilz's own teal accent) converts to RGB(0, 212, 200), HSL(177°, 100%, 42%), and CMYK(100%, 0%, 6%, 17%). Its contrast ratio is about 11:1 against a near-black background (comfortably clearing WCAG AAA), but only 1.87:1 against white -- failing even the minimum 3:1 threshold. A bright, saturated color like this can be highly accessible on a dark background and completely inaccessible on a light one, which is why contrast must always be checked against the actual background it will be paired with, never assumed.