Color Editor
Adjust and refine colors with precision. Tweak hue, saturation, and lightness, generate shade scales, and check accessibility contrast for text.
About this tool
The Color Editor is a complete tool for adjusting and fine-tuning any color with precision. Enter a color in HEX, RGB, HSL, or even by name, then use the sliders to modify Hue (the color tone), Saturation (color intensity), and Lightness (how light or dark the color is). Changes are applied in real time, so you can instantly preview the result and verify legibility against light and dark text. The tool also automatically converts the color to the most common formats used in web design and development, including HEX, RGB, HSL, HSV, and OKLCH.
Key Features
What You Can Use the Color Editor For
- Build consistent palettes for design systems, components, and web interfaces
- Verify that color combinations pass WCAG and APCA accessibility thresholds before publishing
- Adapt a brand color for different contexts such as dark mode, hover states, and disabled elements
- Generate Tailwind-style shade scales to export as CSS variables or design tokens
- Convert colors between HEX, RGB, HSL, and OKLCH when working across different design and development tools
How to Use the Color Editor
Enter the base color
Type any HEX value, RGB, HSL, or color name into the Base Color field. The tool loads the color instantly and converts it to all available formats
Adjust with the sliders
Use the Hue, Saturation, and Lightness controls to modify the color in real time. All outputs and the shade scale update instantly
Check the contrast
The accessibility section shows the contrast ratio against white and black text using both WCAG 2.1 and APCA models, indicating whether the combination passes or fails
Copy the values
Click any format block (RGB, HSL, HSV, OKLCH) to copy the value directly. The HEX value is shown in the main preview
Export the shade scale
In the Tints & Shades section, choose the export format (CSS, SCSS, JSON, Tailwind) and the color format (HEX, RGB, HSL, or OKLCH), then click Copy to use in your project
Frequently Asked Questions
WCAG 2.1 uses a simple mathematical formula to calculate contrast between colors. APCA (Accessible Perceptual Contrast Algorithm) is a more modern model that accounts for how the human eye perceives luminosity in different reading contexts. For normal body text, an APCA value of 60 or above is considered adequate.
Select the Tailwind export format and your preferred color format. The generated code can be pasted directly into tailwind.config.js or into a CSS file as custom properties. If you use OKLCH, it is natively compatible with Tailwind 4.
OKLCH is a perceptually uniform color space — meaning that changing lightness or chroma produces visually predictable results. It is the format adopted internally by Tailwind 4 and CSS Color Level 4, making it ideal for generating shade scales that are more perceptually consistent than HSL.