HEX is a 6-digit hexadecimal representation of color used in web design. It combines red, green, and blue channels, each represented by two hex digits (00-FF). For example, #FF5733 is a warm orange-red.

How to convert RGB to HEX?

Convert each RGB channel (0-255) to its two-digit hexadecimal equivalent. For example, rgb(255, 87, 51) becomes #FF5733 because 255=FF, 87=57, 51=33.

What is WCAG contrast ratio?

WCAG contrast ratio measures the difference in brightness between foreground and background colors. A ratio of 4.5:1 is required for normal text (AA), and 7:1 for enhanced accessibility (AAA).

How to Use the Color Code Converter

The SnappedKit.com Color Code Converter lets you convert colors between HEX, RGB, HSL, and CMYK formats instantly. It also includes a WCAG contrast checker and a palette generator — all running in your browser.

Converting Colors

Edit any color field and all other formats update in real time. You can type a HEX value like FF5733, adjust RGB values individually, set HSL hue/saturation/lightness, or enter CMYK percentages. The swatch preview updates live.

Using the Sliders

The three sliders control Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). The slider backgrounds dynamically update to reflect the current color, making it easy to explore variations.

Eyedropper

Click Eyedropper to pick any color from your screen using the browser's built-in EyeDropper API (Chrome 95+). The picked color instantly fills all fields.

Contrast Checker

The WCAG 2.1 contrast section shows how your color performs against a background (white by default — editable). It calculates the contrast ratio and shows pass/fail badges for AA and AAA compliance levels for both normal and large text.

Palette Generator

Shades — progressively darker versions of your color
Tints — progressively lighter versions
Complementary — the color 180° opposite on the color wheel, with shades
Analogous — neighboring colors (±30°) for harmonious palettes
Triadic — three colors 120° apart for vibrant combinations

Click any palette chip to apply that color to the converter.

Color Format Reference

HEX — 6-digit code used in CSS: #FF5733
RGB — Red, Green, Blue (0–255): rgb(255, 87, 51)
HSL — Hue, Saturation, Lightness: hsl(11, 100%, 60%)
CMYK — Cyan, Magenta, Yellow, Key (for print design)