What Is ColorForge?
ColorForge is a color converter and palette tool built for designers, developers, and anyone who regularly works with color values. Enter a color in any format -- HEX, RGB, HSL, HSV, CMYK, or HWB -- and instantly see it converted to every other format. No more Googling "rgb to hex converter" five times a day.
But it goes beyond simple conversion. The Palette tab generates color harmonies (complementary, triadic, analogous, and more) from any base color. The Contrast tab runs WCAG accessibility checks so you can verify your text is actually readable. And the Image Picker lets you upload any image and click to extract exact color values from it -- handy when a client sends a brand PDF and says "match this blue."
Everything runs in your browser. There's nothing to install, no signup, and your color data never hits a server.
How to Use ColorForge
Start by entering a color. You can type a HEX code directly, adjust the RGB sliders, use the native color picker, or even grab a color from anywhere on your screen with the Eyedropper tool (Chrome and Edge). As you change any value, every other format updates in real time -- change the HSL hue and watch the HEX, RGB, and CMYK values follow.
Each format has a copy button that gives you ready-to-paste CSS. Need color: hsl(8, 78%, 57%); for your stylesheet? One click.
For the Contrast Checker, enter your foreground and background colors. ColorForge calculates the contrast ratio and tells you whether the combination passes WCAG AA and AAA standards for both normal and large text. This matters more than most people realize -- roughly 1 in 12 men have some form of color vision deficiency, and low-contrast text is a struggle for anyone reading on a phone in sunlight.
Your Colors Stay Private
ColorForge processes everything client-side in JavaScript. Color math, palette generation, contrast calculations, even the image color picker -- it all happens locally. Images you upload for color picking never leave your browser's memory.
This isn't just a privacy feature. It also means the tool works offline once the page is loaded, responds instantly without network latency, and doesn't break when a server goes down. It works exactly the way a utility tool should.
Common Questions
What's the difference between RGB and HSL?
RGB defines color by mixing Red, Green, and Blue light -- it's how screens physically produce color. HSL describes color in terms humans find more intuitive: Hue (the color itself, 0-360 degrees), Saturation (how vivid it is), and Lightness (how bright). Want to make a color slightly darker? In HSL, just lower the L value. In RGB, you'd need to proportionally reduce all three channels, which is much harder to eyeball. Most designers prefer HSL for picking colors and RGB/HEX for final implementation.
When should I use CMYK values?
CMYK matters when your design is headed for a physical printer. Screens use additive color (RGB -- light mixing), but printers use subtractive color (CMYK -- ink mixing). Colors that look vibrant on screen can print dull if you don't account for the difference. If you're preparing files for print, check the CMYK values here first. That said, the conversion is approximate -- for precise print color matching, you'd want a calibrated ICC profile, but CMYK values from ColorForge give you a reliable starting point.
What contrast ratio do I actually need?
WCAG 2.1 sets two levels. AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA compliance as a baseline. AAA is ideal but can be difficult to achieve with brand colors. A practical approach: make sure your body text passes AA, and use higher-contrast combinations for anything small or critical.
What's the difference between RGB and CMYK?
RGB mixes light on screens — your monitor combines red, green, and blue to create every color you see. CMYK mixes ink on paper — a printer layers cyan, magenta, yellow, and black. Because light and ink behave differently, the same color value can look noticeably different on screen versus in print. If you're designing something for print (business cards, brochures, packaging), always convert your colors to CMYK before sending files to the printer, or you may get unexpected color shifts.
How does the contrast checker work?
It calculates the WCAG contrast ratio between two colors — a standardized measurement of how easily text can be read against its background. A ratio of 4.5:1 or higher passes AA level for normal-sized text, and 3:1 passes for large text or headings. This matters for web accessibility: if your text-to-background contrast is too low, people with vision impairments struggle to read your content. The tool tells you instantly whether your color combination passes or fails.
Can I extract colors from an image?
Yes, the image color picker lets you upload any image and click anywhere on it to grab the exact color at that pixel. The tool instantly shows you the selected color in all six formats — HEX, RGB, HSL, HSV, CMYK, and CSS named colors if one matches. It's useful for matching brand colors from logos, pulling palette inspiration from photographs, or identifying exact shades in design mockups and screenshots.