Color Studio
Pick a color, copy its values, create related swatches, and check text contrast. Everything updates instantly inside your browser.
Pick your color
Enter a HEX value or choose a color using your device's picker.
Drag the rainbow bar to change hue, or use the arrow keys. The visual picker can adjust saturation and brightness.
#6D5EF7rgb(109, 94, 247)hsl(246, 91%, 67%)Generate palette
Text contrast checker
Compare the selected foreground color against a background using WCAG contrast ratios.
A ratio of at least 4.5:1 meets WCAG AA for normal text; 3:1 meets AA for large text; 7:1 meets AAA for normal text. These checks alone do not establish full accessibility compliance.
How to use Color Studio
1. Convert HEX colors to RGB and HSL
Type a six-digit HEX color such as #2F80ED (or its three-digit shorthand). The color preview and equivalent RGB/HSL values update as you type. Use the copy buttons to paste exact values into CSS or your preferred design app.
2. Generate shades or related colors
Choose Light & dark shades to view lighter and darker variants based on HSL lightness, or Color harmony to generate colors at nearby and complementary hue angles. Generated colors are inspiration, not a guarantee of aesthetic or accessibility suitability. Select a swatch to copy its HEX value.
3. Check readable text contrast
Use the selected HEX as text color, then set a background. The tool calculates relative luminance and a WCAG contrast ratio. For normal text, WCAG 2.x AA calls for at least 4.5:1. Test your real font sizes, states, and interface components as well.
4. Reuse the result
Copy the HEX/RGB/HSL value or generate CSS custom properties. Your last valid HEX color is stored in your current browser to make returning easier. No color data is uploaded to LuckyHueLab.