Convert colors between HEX, RGB, HSL, HSV, and CMYK. Check WCAG contrast ratios, generate color palettes with harmony rules, and create tint and shade scales.
#3B82F659, 130, 246217° 91% 60%217° 76% 96%76% 47% 0% 4%rgb(59 130 246)Color Toolkit is a four-in-one color utility for designers and developers. The Convert tab translates any color into six formats: HEX, RGB, HSL, HSV, CMYK, and the CSS rgb() function syntax. The Contrast tab checks foreground and background color pairs against all four WCAG 2.1 thresholds - normal AA, normal AAA, large AA, and large AAA - and shows a live preview of the combination. The Palette tab generates six harmony types from any base color: complementary, analogous, triadic, split-complementary, tetradic, and monochromatic. The Shades tab produces ten tints toward white and ten shades toward black.
Pick a tab for the task at hand. On Convert, Palette, and Shades, use the color swatch to open the native picker or type any HEX code directly into the text field. Named CSS colors like coral or steelblue are also accepted. On Contrast, set foreground and background colors independently and use the swap button to reverse the pair. Click any color chip on the Palette or Shades tabs to copy its HEX code to clipboard. On Convert, each output row has its own copy button.
WCAG contrast ratios follow the Web Content Accessibility Guidelines 2.1 formula. A ratio of 4.5:1 or higher passes normal text AA, 7:1 passes AAA. Large text (18pt or 14pt bold) has lower thresholds of 3:1 for AA and 4.5:1 for AAA. Use the Palette tab to explore design directions quickly - click any chip to copy its HEX and paste it into your editor or design tool.