About Color Studio
Color Studio is an all-in-one color tool for designers and developers that combines four separate tools - a color format converter, a WCAG accessibility contrast checker, a color palette generator, and a dominant-color image extractor - into a single tabbed workspace. Instead of switching between multiple browser tabs to complete a color workflow, you can convert a color, check its accessibility, build a palette, and pull colors out of an existing image all in one place.
The Color Converter tab supports all common color formats: HEX, RGB (red/green/blue 0-255), HSL (hue/saturation/lightness), and HSV (hue/saturation/value). Editing any field updates all others simultaneously, so you can type a HEX value and instantly see the equivalent RGB, HSL, and HSV values. A large color swatch updates live, and all values are copyable with one click. If the color matches a CSS named color, that name is shown as well. A "Send to Contrast Checker" button flows the current color directly into the contrast tab as the foreground color.
The Contrast Checker tab tests any foreground and background color pair against WCAG 2.1 accessibility standards. It shows the contrast ratio and pass/fail status for WCAG AA (4.5:1 for normal text, 3:1 for large text) and WCAG AAA (7:1 for normal text, 4.5:1 for large text). If a combination fails the AA standard, the tool automatically suggests an adjusted foreground color that achieves the minimum 4.5:1 ratio - showing the suggested HEX, the new ratio, and a one-click Apply button to adopt it. This makes fixing accessibility issues fast and precise rather than a manual trial-and-error process.
The Palette Generator tab creates color palettes in multiple harmony modes: Random, Complementary (two colors opposite on the color wheel), Analogous (neighboring hues), Triadic (three evenly spaced hues), Split-Complementary (base plus two adjacent to its complement), and Monochromatic (variations in lightness of a single hue). You can choose 3, 5, 7, or 9 colors and lock individual swatches to keep them while regenerating the rest. Export options include CSS custom properties (:root {} variables) and a Tailwind CSS config snippet.
The Extract from Image tab pulls the dominant colors out of any uploaded photo or graphic - ideal for building a color scheme that is visually consistent with an existing logo, product photo, or mood board. Upload a JPG, PNG, WEBP, or other image format and the tool samples the pixel data using the Canvas API and runs a median cut color quantization algorithm to identify the most representative colors, rather than a simple (and muddier) average. Choose to extract 4, 8, 12, or 16 colors; each swatch shows its HEX, RGB, and HSL values and copies to your clipboard with one click. Download the whole palette as a PNG or copy it as CSS variables - all processing happens locally, so your image never leaves your browser.