Color Tools
Convert, mix, and generate palettes in any format.
Free colour converters, shade generators, and mixers for designers and developers.
Working with colour on the web means juggling HEX, RGB, RGBA, HSL, HSV, CMYK, and (increasingly) OKLCH. Our colour tools handle every conversion instantly, preserve alpha channels correctly, and show a large preview swatch alongside every value. The shade generator produces an accessible 10-step tint and shade ramp from any base colour, ready to paste into a Tailwind config or CSS variables block. The mixer interpolates smoothly between two colours in RGB or OKLCH space, which matters for palettes that need to stay perceptually uniform. Designers use these tools to match brand guidelines; developers use them to translate between formats that a framework requires. Every output includes the WCAG contrast ratio against black and white so you can check readability in one glance.
Frequently asked questions
- What is OKLCH and why do people use it?
- OKLCH is a perceptually uniform colour space that keeps lightness, chroma, and hue meaningful to the human eye. It is supported natively in modern CSS and produces more consistent palettes than HSL when you adjust a single channel.
- Why does HEX sometimes have 8 digits?
- A 6-digit HEX encodes red, green, and blue. An 8-digit HEX adds an alpha channel for transparency. For example, #635BFF80 is the accent colour at roughly 50 percent opacity.
- Which format should I use in my stylesheet?
- HEX for opaque brand colours, RGBA or HSLA when you need transparency, and OKLCH if you want perceptually correct shade variations. All three are widely supported.
- Can I check colour accessibility here?
- Yes. Every conversion shows the WCAG contrast ratio against pure black and pure white so you can quickly rule out combinations that will fail accessibility audits.