Color Studio
All-in-one color tool — convert HEX/RGB/HSL/HSV, check WCAG contrast with fix suggestions, and generate color palettes with harmony modes. Free, browser-only.
Color Studio is an all-in-one color tool for designers and developers that combines three separate tools — a color format converter, a WCAG accessibility contrast checker, and a color palette generator — 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, and build a palette 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.
Frequently Asked Questions
- What color formats does the converter support?
The converter supports HEX (3 and 6 digit), RGB (0-255 per channel), HSL (hue 0-360, saturation 0-100%, lightness 0-100%), and HSV/HSB (hue 0-360, saturation 0-100%, value 0-100%). All four formats are kept in sync — editing any one field immediately updates the other three.
- What is WCAG contrast and why does it matter?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with low vision or color blindness. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 and 4.5:1 respectively. Meeting AA compliance is a legal requirement for many public-sector websites and is considered best practice for all web content.
- How does the contrast fix suggestion work?
If your color pair fails WCAG AA (4.5:1 ratio), the tool walks through HSL lightness adjustments on the foreground color — testing lighter and darker variants — until it finds the nearest passing value. It shows the suggested HEX, the new contrast ratio, and lets you apply it directly or copy it. The fix always adjusts the foreground rather than the background to preserve your design intent.
- What are color harmony modes?
Color harmony modes derive palette colors from a single base color using relationships on the color wheel. Complementary uses the color directly opposite (180 degrees away). Analogous uses colors 30 degrees on either side. Triadic uses three colors 120 degrees apart. Split-complementary uses the base plus two colors adjacent to its complement. Monochromatic uses the same hue at different lightness levels. These produce aesthetically cohesive palettes rather than random color combinations.
- How do I use the Tailwind export?
The Tailwind config snippet generates a colors object you can paste into the theme.extend.colors section of your tailwind.config.js file. The colors are named brand-1 through brand-N. After adding them, you can use classes like bg-brand-1, text-brand-3, border-brand-2 directly in your Tailwind project.
← Back to all free tools